概念-模块化开发

说到模块化开发，我们先来看看我们传统的在js中写代码的方式：

function fn1(){//do something}function fn2(){//do something}

这样写的方式，好处有一个，那就是简单方便，缺点那就更多了，第一、全局变量（全局变量是魔鬼）；第二、不好管理，完全看不出这两个函数有什么联系，到底是用来干嘛的；   第三、维护难，重用性不高（复制粘贴除外）。

那我们可以给它加一个壳，放在一个对象里：

var module={num:0,fn1:function (){//do something},fn2:function (){//do something}}

貌似这样稍微好一点了，因为这样就只有一个全局变量了，而且用的时候只需要module.fn1()这样就可以了，但是缺点是这样模块里面所有的属性都能访问到，本意是num这个属性是由fn1和fn2来修改而外部无法修改呢，但是这样一写，都能访问到了，那我们换一种方式

var module=function(){var num=0;var fn1=function (){//do something},var fn2=function (){//do something}return {fun1:fn1,fun2:fn2}}();

这样是不是好得多呢，将fn1，fn2抛出去，内部的变量外面是访问不到的，这样基本上就算可以了，但是这个模块是个对象，万一我想要问这个对象是什么类型的呢，那就改一下

var module=function(){var num=0;var obj=new SomeClass();var privateMethod=function (){//do something},obj.publicMethod=function(){privateMethod();}return obj;}();

这样一个模块就完成了，但是一般来说模块都会存在着继承关系，那应该怎么办呢，那只需改一改代码即可

var moduleSon=function(module){var num=0;var privateMethod=function (){//do something},module.publicMethod=function(){privateMethod();}return module;}(moduleParent);

这样是不是就实现继承一个模块了呢，当然这种方式不只是用来继承，大家都知道除了继承，模块之间最好没有任何联系，就是说模块是相互独立的，但是如果一个模块需要用另一个模块怎么办呢，也可以采用上面的方式

var moduleSon=function($){var num=0;var obj=new SomeClass();var privateMethod=function (){$("#id").css('width','200px');},obj.publicMethod=function(){privateMethod();}return obj;}(jQuery);

这样是不是就实现了一个模块对另一个模块的使用，当然你完全可以不用这种方式因为jQuery是全局变量，可以在模块中直接用就行了，但是就像jquery源码中为什么要传入window一样，第一方面是作用域链的关系，这样缩短了查找效率。第二个方面主要是这样代码非常清晰，完全可以看到这个模块依赖了jQuery这个模块。其实模块本质上就是一个对象，上面挂载了许多方法和属性。但是这个对象又巧妙的用了作用域链，因为这个对象里的方法有着对外层匿名函数的活动对象的引用，也就是拥有外部函数的作用域。

这一章我们是理清楚概念，后面我会举实例来分析模块化具体的用法和好处。上面这种方式也存在着一个弊端，那就是如果jQuery如果是一个单独的js文件（事实上也是）,那就存在异步加载的问题，就是上面这个模块执行的时候jQuery.js这个文件还没下载完，那怎么办呢，第一种方式:同步下载，具体方式就是按照

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

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

这样的顺序，但是这样的缺点非常明显，如果js文件一多，依赖关系太复杂，就不好维护了，因为要严格依照依赖关系写引入顺序，而且这种方式不能使用异步下载的方式就是设置script标签为async，第二种方式就是回调函数了，当jQuery下载完后再执行上面的代码，这是一种比较好的方式。好了，今天就分析到这里吧。