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

2018-08-06 本文已影响0人潘千千

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

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

正文：

一、立即执行函数的应用

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

var specialTags = document.querySelectorAll('[data-x]')
for(let i =0;i<specialTags.length; i++){
  specialTags[i].classList.add('offset')
}
findClosestAndRemoveOffset()
window.addEventListner（'onscroll '，function(x){
  findClosestAndRemoveOffset()
}）
function findClosestAndRemoveOffset(){
  let specialTags = document.querySelectorAll('[data-x]')
  let minIndex = 0
  for(let i =1;i<specialTags.length; i++){
    if(Math.abs(specialTags[i].offsetTop - window.scrollY) < Math.abs(specialTags[minIndex].offsetTop - window.scrollY)){
      minIndex = i
    }
  }
  // minIndex 就是里窗口顶部最近的元素
  specialTags[minIndex].classList.remove('offset')
  let id = specialTags[minIndex].id
  let a = document.querySelector('a[href="#'+ id + '"]')
  let li = a.parentNode
  let brothersAndMe = li.parentNode.children
  for(let i=0; i<brothersAndMe.length; i++){
    brothersAndMe[i].classList.remove('highlight')
  }
  li.classList.add('highlight')
}

只看这个，大家能不能觉得这种做法是否有什么缺陷呢？大家注意，这里第一行代码有一个var specialTags这个变量，是在下图2的A里声明的，此时，在console.log下打印出window.specialTags是如下图，而这个是正确的：

image.png

但是，当我们一旦有时候脑子抽风，在下图2的B里面也声明了一个全局变量，也叫specialTags.var specialTags = "你咬我”
图2：

image.png
那么再次打印window.specialTags,就会出现如下情况：

image.png

specialTags被覆盖了。那么我们怎么解决这个问题呢？既然是全局变量惹的祸，那我们就不用它呗。我们知道，js只有两种变量，全局变量和局部变量。那我们就取局部变量呗。es6之前，我们是怎么取局部变量来着？？-----只有函数里面，才有局部变量。那好，那我们用大括号将上述代码包起来可以吗？像这样：

image.png
不可以的哇，这里要注意哦，因为这个蓝色框里面德var会进行变量提升，也就是说，他还是全局变量，没有什么改变。那既然这样，什么东西才能把var包住的呢？那就是函数了呗：

function XXX(){
var specialTags = document.querySelectorAll('[data-x]')
for(let i =0;i<specialTags.length; i++){
  specialTags[i].classList.add('offset')
}
findClosestAndRemoveOffset()
window.addEventListner（'onscroll '，function(x){
  findClosestAndRemoveOffset()
}）
function findClosestAndRemoveOffset(){
  let specialTags = document.querySelectorAll('[data-x]')
  let minIndex = 0
  for(let i =1;i<specialTags.length; i++){
    if(Math.abs(specialTags[i].offsetTop - window.scrollY) < Math.abs(specialTags[minIndex].offsetTop - window.scrollY)){
      minIndex = i
    }
  }
  // minIndex 就是里窗口顶部最近的元素
  specialTags[minIndex].classList.remove('offset')
  let id = specialTags[minIndex].id
  let a = document.querySelector('a[href="#'+ id + '"]')
  let li = a.parentNode
  let brothersAndMe = li.parentNode.children
  for(let i=0; i<brothersAndMe.length; i++){
    brothersAndMe[i].classList.remove('highlight')
  }
  li.classList.add('highlight')
}
}
XXX.call();

那是不是像上述这样写就可以了呢？不对呀！因为XXX（）也是全局变量啊，那怎么办呢？那就不要给名字了嘛，让它变成匿名函数：

function (){
var specialTags = document.querySelectorAll('[data-x]')
for(let i =0;i<specialTags.length; i++){
  specialTags[i].classList.add('offset')
}
findClosestAndRemoveOffset()
window.addEventListner（'onscroll '，function(x){
  findClosestAndRemoveOffset()
}）
function findClosestAndRemoveOffset(){
  let specialTags = document.querySelectorAll('[data-x]')
  let minIndex = 0
  for(let i =1;i<specialTags.length; i++){
    if(Math.abs(specialTags[i].offsetTop - window.scrollY) < Math.abs(specialTags[minIndex].offsetTop - window.scrollY)){
      minIndex = i
    }
  }
  // minIndex 就是里窗口顶部最近的元素
  specialTags[minIndex].classList.remove('offset')
  let id = specialTags[minIndex].id
  let a = document.querySelector('a[href="#'+ id + '"]')
  let li = a.parentNode
  let brothersAndMe = li.parentNode.children
  for(let i=0; i<brothersAndMe.length; i++){
    brothersAndMe[i].classList.remove('highlight')
  }
  li.classList.add('highlight')
}
}.call();

缩写下来，把那中间一堆去掉，让我们把结构看得更清晰就是：

function (){
}.call();

但是，这样做有什么问题吗，有的，chrome报错：

image.png

于是，就有人试出了一种方法，在function前面加上感叹号，进行取反。

image.png
原因是什么呢？加了感叹号之后，浏览器就会知道，哦，这个感叹号后面不是一个函数，是一个函数执行，于是他就会执行。但是有人会提出问题，加了感叹号不是会改变函数的返回值吗？但是，有一点要记清，这个函数我们不需要返回值呀，我们根本不在乎这个匿名函数的返回值。有的朋友可能会想到这种方法:

(function(){}).call()

但是这种方法有一个弊端，就是，一旦有人在前边写了一点东西：

 xxx    
   (function(){}).call()

浏览器就会报错。为什么？那我问你，这个浏览器会看成什么：

a
()

看成a 空格，括号，这就是相当于a()，相当于执行了a.然后呢，我们把所有的js文件里面的，都写在这个带感叹号的函数里。
好的，到现在，我们暂时整理一下我们目前的思路：

我们不想要全局变量
我们要使用局部变量
ES 5 里面，只有函数有局部变量
于是我们声明一个 function xxx，然后 xxx.call()
这个时候 xxx 是全局变量（全局函数）
所以我们不能给这个函数名字
function(){}.call()
但是 Chrome 报错，语法错误
试出来一种方法可以不报错:
I !function(){}.call() (我们不在乎这个匿名函数的返回值，所以加个 ! 取反没关系)
II (function(){}).call() 不推荐
xxx
(function(){}).call() 报错
III frank192837192463981273912873098127912378.call() 不推荐
等到这样写完后，我们才算是真正的实现模块化了，因为这些js文件模块之间，没有任何联系和影响了。