对于模块化一直是迷糊的状态，现在学习一些文章根据自己的理解做一些简单的记录。
1、函数
我们学习js，使用js，用的最多的就是函数，可是你真的了解函数么。其实函数的使用还是有很多的内容的。
首先说到我们函数的定义
函数声明
function aa（）{ /code/}
调用 aa();
这也是我们刚学js的时候用的比较多的，调用的时候，函数名字加括号，括号内写参数即可
变量式声明
var aa = function(){ /code/}
aa();
这样也可以实现函数的定义。
这两种有什么区别呢？
我们都知道js内有变量提升的概念，也就是var定义的变量会在js编译的时候提升到当前js文件的顶部，但是只是定义，不会赋值。
所以var定义的变量即使在函数的最顶部调用也可以，不会说不存在，只是值为‘undefined’，因为定义未赋值。
（注意let ，const定义的变量不存在变量提升）
那么根据这些我们可以分析出，其实变量式函数声明只是将一个匿名函数的定义赋值给了一个变量而已。js 变量又是弱类型的，赋值过去这时候这个变量就代表的是函数了。
函数式的声明是必然提升的，所以不管函数在文件内定义在何处，我们都可以直接调用，但是变量式的声明就不可以了。
2、匿名函数，自执行函数
在上面变量式函数定义里，我们定义了一个函数却没有起名字，这个就叫做匿名函数。那么自执行函数呢。
在上面函数的调用里，是函数的名字加括号实现调用。
那么我们直接在函数定义的后面加括号呢。
function aa(){ alert（1）}()
会直接报错，我们从变量式函数声明里可以看出，函数的定义可以直接赋值给一个变量，这个变量名字加括号就可以调用，我们这里也是按照这个思路调用的。那么我们将函数的定义用括号括起来当做一个整体试试
（function aa(){ alert（1）}）()
这次真的起作用了，这时候实际就是在函数定义的时候执行了，也就叫做自执行函数。后面的括号里就可以加函数的参数。
3、模块化，上面讲了这么些，跟模块化有什么关系呢？
模块化顾名思义就是将写的代码分模块。我们最开始写js一般都是定义很多的js文件，可能是根据页面，或者根据功能区定义的。
这么多的js文件，里面的变量名字，函数名字等会不会冲突的，答案是肯定的，那么在做很多的一个项目的时候我们可能不小心就会有重名的定义，导致功能出现问题，是不是处处都得要小心呢。
如果我们分模块了，每个模块互不干扰，即使名字一样，但是也不是同一个模块，这时候是不是就方便多了。
我们知道的我们定义对象的时候，不同的对象内的属性名，方法名其实是不冲突的，因为属于不同的对象。实际模块化也就是将这些模块创建为一个个的对象。
最简单的写法
var moduleA = new Objet({
a: 0 ,
f1: function(){},
f2:gunction(){}
})
var moduleB = new Objet({
a: 0 ,
f1: function(){},
f2:gunction(){}
})
这时候我们在调用这些方法就是
moduleA.a moduleA.f1()
moduleB.a moduleB.f1()
这时候就实现了最简单的模块化。
其他的问题来了。
1、这两个模块里的属性实际上在外部也是可以访问的，也就是内部变量暴露给了外部，内部的一些函数在使用这些变量，如果在模块外部把这些变量改变了，可能会引起一些错误。
2、不同模块或者插件或者依赖之间的依赖关系
比如A 模块依赖jquery。 B模块不依赖jquery
统一引入jquery是不是在某些页面就多加载了很多不必要的东西。
那么我们能不能把这些依赖通过参数引入呢。
这两个问题怎么解决呢？
这就用到了我们上面说的自执行函数。我们可以考虑只将函数赋值给模块的定义。在这里我们使用函数，跟上面对象类似，只是我们将函数使用return返回出来。
我们将两个模块的定义如下
var moduleA = function（$）{
a= 0 ,
f1= function(){},
f2= gunction(){}
return {
f1: f1(),
f2:f2()
}
}(jQuery)
var moduleB = function（）{
a= 0 ,
f1= function(){},
f2= gunction(){}
return {
f1: f1(),
f2:f2()
}
}()
这样将2个自执行函数的结果返回给这两个模块，而且我们只是返回的部分，并且我们将jquery作为参数加到第一个模块里。
我们可以查看jquery或者一些插件可以看到类似的写法。
这只是比较简单的模块化的理解，更深的继续学习中.......
网友评论