js模块化

刚开始的时候我们写js代码是这么写的

function method1(){

}
function method2(){

}

然后调用的时候通过method1()，method2()即可调用，这么写的话有很明显的缺点，在页面上我们可能引用了其他的js库，这么写会污染全局变量，无法保证自己定义的函数名称不同其他js库中的名字冲突。而且也不能看出不同函数之间的关系。

后来我们学会了封装，将相关的函数以及变量封装到一个对象中，我们这样写：

var module = {
    a : 0,
    b : 1,
    method1:function(){

    },
    method2:function(){
    
    }
}

调用的时候，我们可以这样module.mehtod1();
如此将相关函数放入一个模块内部可以大大的减少名字冲突的概率，但是如此写也会有一个缺点，模块内部的一些内部状态也对外可见，我们可以在外部修改其内部状态module.a = 1;

因此我们可以这么写，采用立即执行函数的写法

var module = (function(){
	var a = 0;
	var method1 = function(){};
	var method2 = function(){};
	return{
		method1:method1,
		method2:mehtod2
	};
})();

如此一来我们就将内部变量隔绝在模块内部，只有内部函数才能访问以及赋值，从模块外部无法进行访问。

那么如果某个模块过大，那么怎么办呢？把所有的内容放在同一个js文件中么，这样在加载js文件的时候就会加载了本来不需要的内容，照成网络资源的浪费。

我们怎么样将一个过大的模块分开放在不同的js文件中呢？

我们可以这样：

var module = (function(mod){
	mod.method3 = function(){
	};
	return mod;
})(module || {});

我们在模块module中加入一个新的方法method3

将js代码写成不同的模块之后，我们就需要对这些模块进行管理，当我们把不同的模块代码放在不同的js文件中的时候，我们页面上面就会出现类似于这种代码：

<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>
<script type="text/javascript" src="3.js"></script>

如果这些模块之间有依赖关系，我们还不能颠倒了这些js加载的顺序，我们可以通过一个开源的js库 require.js（ csdn下载）来管理我们js的加载。
<script type="text/javascript" src="require.js" data-main="../js/main.js"></scirpt>

data-main指定主js，最先加载的js文件，如果该js文件依赖于其他的js库，那么我们可以在main.js文件最上面这么写：

require(['jquery'], function(){
	
});

require方法接受两个参数，第一个参数为数组，指明该js所依赖的js文件，第二个参数为回调函数，当所有依赖都被加载之后该回调函数会被执行。

默认的路径为main.js所在的路径+模块id(即数组中指定的名字)以js为后缀的文件。同时我们也可以配置这些依赖的具体路径

require.config({
	paths:{
		jquery:"../js/jquery.min"
	}
});
或者
require.config({
	baseUrl:"js/lib",
	path:{
		jquery:"jquery.min"
	}
})
也可以
require.config({
	baseUrl:"js/lib",
	path:{
		jquery: "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
	}
})