带你初步了解模块化，立即执行函数，闭包和MVC在项目中的应用（三

前言：如果对这几个概念不熟悉的童鞋，本篇文章是接着上一篇带你初步了解模块化，立即执行函数，闭包和MVC在项目中的应用（一）和（二）来继续记录下去的，一定要记得看前面哦，还有就是如果大家看了觉得对自己有帮助，麻烦给个赞吧，谢谢大家~~

关键词：模块化，立即执行函数，闭包和MVC~~......

正文：

MVC

  现在，让我们先回顾下上一篇文章中的init-swiper.js，我们单独提取出来的这个js,

var mySwiper = new  Swiper('.swiper-container',{
            loop:true,
            pagination:{
                  el:'.swiper-pagination'
            },
            navigation:{
                nextEl:'.swiper-button-next',
                prevEl:'.swiper-button-prev',
            }
      })

  什么是mvc的view？如下就是view,是用户看得见的东西：

image.png
  现在，我们把init-swiper.js稍作一个修改，还在相应的HTML外加一个div，包住所有与init-swiper.js有关的标签：
部分HTML：
image.png
init-swiper.js:

!function (){
    var view = querySelector('#mySlides');
    var mySwiper = new Swiper(view.querySelector('.swiper-container'),{
            loop:true,
            pagination:{
                  el:'.swiper-pagination'
            },
            navigation:{
                nextEl:'.swiper-button-next',
                prevEl:'.swiper-button-prev',
            }
      })
}.call()

  有的童鞋是不是不知道我在干什么？没事，在跟着我改几个js文件就知道啦，接下来，我们再来改一个sticky-topnavbar.js：

//原来：
!function (){
  window.addEventListner（'onscroll '，function(x){
     if(window.scrollY > 0){
      topNavBar.classList.add('sticky')
    }else{
      topNavBar.classList.remove('sticky')
    }
  }）
}
//现在
!function (){
 var view = querySelector('#topNavBar');
  window.addEventListner（'onscroll '，function(x){
     if(window.scrollY > 0){
      view .classList.add('sticky')
    }else{
      view .classList.remove('sticky')
    }
  }）
}

  还有一个smoothly-navigation.js：

//原来：--------原来--------原来-------原来--------原来--------原来--------原来--------原来--------原来------原来------->
!function(){
    let liTags = document.querySelectorAll('nav.menu > ul > li')
for(let i=0; i<liTags.length; i++){
  liTags[i].onmouseenter = function(x){
    x.currentTarget.classList.add('active')
  }
  liTags[i].onmouseleave = function(x){
    x.currentTarget.classList.remove('active')
  }
}
let aTags = document.querySelectorAll('nav.menu > ul > li > a')
function animate(time) {
  requestAnimationFrame(animate);
  TWEEN.update(time);
}
requestAnimationFrame(animate);
for(let i=0; i<aTags.length; i++){
  aTags[i].onclick = function(x){
    x.preventDefault()
    let a = x.currentTarget
    let href = a.getAttribute('href') //'#siteAbout'
    let element = document.querySelector(href)
    let top = element.offsetTop
    let currentTop = window.scrollY
    let targetTop = top - 80
    let s = targetTop - currentTop // 路程
    var coords = { y: currentTop}; // 起始位置
    var t = Math.abs((s/100)*300) // 时间
    if(t>500){ t = 500 }
    var tween = new TWEEN.Tween(coords) // 起始位置
      .to({ y: targetTop}, t) // 结束位置 和 时间
      .easing(TWEEN.Easing.Cubic.InOut) // 缓动类型
      .onUpdate(function() {
        // coords.y 已经变了
        window.scrollTo(0,coords.y) // 如何更新界面
      })
      .start(); // 开始缓动
    }
}
}.call()
//更改后：----------更改后--------------更改后-----------更改后-----------更改后-----------更改后-----------更改后-------->
!function(){
    var view = document.querySelector('nav.menu');
    var liTags = view.querySelectorAll('nav.menu > ul > li');
    for(let i=0; i<liTags.length; i++){
      liTags[i].onmouseenter = function(x){
        x.currentTarget.classList.add('active')
      }
      liTags[i].onmouseleave = function(x){
        x.currentTarget.classList.remove('active')
      }
    }
    let aTags = document.querySelectorAll('nav.menu > ul > li > a')
    function animate(time) {
      requestAnimationFrame(animate);
      TWEEN.update(time);
    }
    requestAnimationFrame(animate);
    for(let i=0; i<aTags.length; i++){
      aTags[i].onclick = function(x){
        x.preventDefault()
        let a = x.currentTarget
        let href = a.getAttribute('href') //'#siteAbout'
        let element = document.querySelector(href)
        let top = element.offsetTop
        let currentTop = window.scrollY
        let targetTop = top - 80
        let s = targetTop - currentTop // 路程
        var coords = { y: currentTop}; // 起始位置
        var t = Math.abs((s/100)*300) // 时间
        if(t>500){ t = 500 }
        var tween = new TWEEN.Tween(coords) // 起始位置
          .to({ y: targetTop}, t) // 结束位置 和 时间
          .easing(TWEEN.Easing.Cubic.InOut) // 缓动类型
          .onUpdate(function() {
            // coords.y 已经变了
              window.scrollTo(0,coords.y) // 如何更新界面
            })
            .start(); // 开始缓动
      }
  }
}.call()

重点在这里！！！  我们现在接着改sticky-topnavbar.js

//现在---------现在--------现在---------现在---------现在--------现在---------现在--------现在----------现在---------现在--->
!function (){
 var view = querySelector('#topNavBar');
  window.addEventListner（'onscroll '，function(x){
     if(window.scrollY > 0){
      view .classList.add('sticky')
    }else{
      view .classList.remove('sticky')
    }
  }）
}
//再更改---------再更改--------再更改---------再更改---------再更改--------再更改---------再更改--------再更改---->
!function (){
   var view = querySelector('#topNavBar');
   var controller = function(view){
      window.addEventListner（'onscroll '，function(x){
            if(window.scrollY > 0){
                 view .classList.add('sticky')
            }else{
                 view .classList.remove('sticky')
            }
      }）
    }
   controller(view);
}.call()

  其他几个js也照着这个这么改,多想一想，都这么改了以后，所有的大体结构都是一样的，一个view，一个controller，controller操作view，这就是MVC里面的VC，接下来再次进行第三次改造，还是以sticky-topnavbar.js为例：

//现在---------现在--------现在---------现在--------现在-------现在--------现在--------现在---->
!function (){
   var view = querySelector('#topNavBar');
   var controller = function(view){
      window.addEventListner（'onscroll '，function(x){
            if(window.scrollY > 0){
                 view .classList.add('sticky')
            }else{
                 view .classList.remove('sticky')
            }
      }）
    }
   controller(view);
}.call()
//第三次更改---------第三次更改--------第三次更改---------第三次更改---------第三次更改--------第三次更改----->
!function (){
   var view = querySelector('#topNavBar');
   var controller = {
        view:null,
        init:function(view){
            this.view = view;//所以，这里的this指向的是controller；
            this.bindEvents();// this.bindEvents.call(this)
        },
        bindEvents:function(){
            window.addEventListner（'onscroll '，function(x){
                  if(window.scrollY > 0){
                       view .classList.add('sticky')
                  }else{
                       view .classList.remove('sticky')
                  }
            }）
        }
   }
   controller.init(view);//controller.init.call(controller,view);
}.call()

  这次的变更需要费些心思了，但是代码看起来十分高级有木有？而且，这个代码变得有了结构了：
第一：这个需要一个view，及一个大模块。
第二：这个需要一个初始化函数init。
第三：他会去绑定事件。

记住：如果你是用一个对象来调用函数的，如上面的controller.init(view)，那么就相当于这个对象就是这个函数里面的this。controller.init(view)同时也可以写成：controller.init.call(controller,view);

  以为这就是最终版的代码了吗，哈哈，还不是呢，bindEvents,就是绑定事件，那我就只让它绑定事件：

//现在---------现在--------现在---------现在--------现在-------现在--------现在--------现在---->
!function (){
   var view = querySelector('#topNavBar');
   var controller = {
        view:null,
        init:function(view){
            this.view = view;//所以，这里的this指向的是controller；
            this.bindEvents();// this.bindEvents.call(this)
        },
        bindEvents:function(){
            window.addEventListner（'onscroll '，function(x){//这个事件里的this指向的是window，如果我们想取到controller所代表的this，就要用如下更改后的箭头函数的方法
                  if(window.scrollY > 0){
                       view .classList.add('sticky')
                  }else{
                       view .classList.remove('sticky')
                  }
            }）
        }
   }
   controller.init(view);//controller.init.call(controller,view);
}.call()
//第四次更改---------第四次更改--------第四次更改---------第四次更改---------第四次更改--------第四次更改----->
!function (){
   var view = querySelector('#topNavBar');
   var controller = {
        view:null,
        init:function(view){
            this.view = view;//所以，这里的this指向的是controller；
            this.bindEvents();// this.bindEvents.call(this)
        },
        bindEvents:function(){
            window.addEventListner（'onscroll '，(x) =>{
                  if(window.scrollY > 0){
                      this.active();
                  }else{
                       this.deactive();
                  }
            }).bind(this)
        }，
        active:function(){
              this.view .classList.add('sticky');
        },
        deactive:function(){
              this.view .classList.remove('sticky');
        }
   }
   controller.init(view);//controller.init.call(controller,view);
}.call()

这会才是最终的代码，看起来高大上的样子如果觉得本文对你有帮助，请点赞哦谢谢~~