模块化--闭包--立即执行函数

在es5里定义变量只有用var这个关键字。
但是var会导致变量提升，即变量是全局变量。
而在es5里面只有函数有局部变量。
于是我们声明一个 function xxx，然后 xxx.call()
这个时候 xxx 是全局变量（全局函数）
所以我们不能给这个函数名字，所以用匿名函数function(){}.call()
但是 Chrome 报错，语法错误。
所以在代码前面加上感叹号!就不报错了。!function(){}.call()
当然也可以用括号把函数包起来

匿名函数立即执行

这就是es5的匿名函数然后立即执行的代码，可见在es5的时候想要用一个局部变量是多么的麻烦，当然es6只需要let就可以实现局部变量的使用了。

模块化

如果用上面的方式把函数包起来立即执行，那么在外面是访问不到里面的变量的。

在index.html用script标签引用两个js文件module1和module2

//module1.js
!function(){
    var person = {
        name: 'frank'
    }
}.call()

//module2.js
!function(){
    console.log(person)
}.call()

在module2的js里面的console.log输出的是undefined的，因为匿名函数加立即执行，在外面是访问不到里面的变量的。
但是window对象是都能访问的，所有我们可以给module1创建window对象，然后再module2调用module1定义的window的对象

//module1.js
!function(){
    var person = window.person = {
        name: 'frank'
    }
}.call()

//module2.js
!function(){
    var person = window.person
    console.log(person)    //   {name: "frank"}
    console.log(window.person)    //    {name: "frank"}
}.call()

这样module2就可以访问module1创建的window.person对象里的内容了。可以通过person或者window.person访问。这样也实现了两个js之间的相互交流。

什么是模块化，其实上面的就是模块化了。

!function(){}.call()所有的js文件用这种形式改写，并通过创建window对象来相互访问，这就是模块化了。

接下来不暴露person，暴露一个函数

//module1
!function(){
    var person  = {
        name: 'frank',
        age: 18
    }
    window.frankGrowUp = function(){
        person.age += 1
        return person.age
    }
}.call()

//module2
!function(){
    var newAge = window.frankGrowUp()
    console.log(newAge)           // 19
    console.log(person)            //person is not defined
    console.log(window.person)   //undefined
}.call()

现在module2不知道person的全部信息，只知道person一部分信息
window.frankGrowUp函数用了外面person这个变量，组成了闭包
然后这个闭包加上立即执行函数 ，立即执行函数是用来隔离作用域的 ，如果没有匿名函数，这个闭包就毫无意义 。

如何使用闭包：

1.立即执行函数使得 person 无法被外部访问
2.闭包使得匿名函数可以操作 person
3.window.frankGrowUp 保存了匿名函数的地址
4.任何地方都可以使用 window.frankGrowUp
=> 任何地方都可以使用 window.frankGrowUp操作 person，但是不能直接访问 person

这就是我对模块化，闭包，匿名函数的立即执行的理解，如有问题请及时指出，我会及时改正。