js模块开发

js模块开发（一）

现在嵌入页面里面的javascript代码越来越复杂，于是可能依赖也越来越严重，使用别人开发的js也越来越多，于是在理想情况下，我们只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。

于是js模块化开发就显的越来越重要了，但是，Javascript不是一种模块化编程语言，它不支持"类"（class），更遑论"模块"（module）了。（正在制定中的ECMAScript标准第六版，将正式支持"类"和"模块"，但还需要很长时间才能投入实用。）在现有的开发中，使用“模块的效果”。于是我们简单的总结了几种模块开发的方式。

（1）原始写法：

模块就是实现特定功能的一组方法。

只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。

1 2 3 4 5 6

function f1(){   } function f2(){   }

然后我们直接调用就可以了，但是这个做法有很多的弊端。例如："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。

（2）：使用对象的写法

为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面。这个写法在我现在的项目中经常使用。

1 2 3 4 5 6 7 8 9

var func={ var count=0; inti:function(){   }, getValues:function(){   } }

然后我们要使用的话直接 func.inti() .但是这个方式有一个缺点：这样的写法会暴露所有模块成员，内部状态可以被外部改写。func.count=1,这样就很不安全。

（3）：立即执行函数写法

这个就可以防止修改内部的成员。

1 2 3 4 5 6 7 8 9

var func=({ var count=0; inti:function(){   }, getValues:function(){   } })():

func就是Javascript模块的基本写法。可以起到很好的保护私有成员的作用。

（4）：放大模式

如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用"放大模式"

1 2 3 4 5 6

var func = (function (fn){ 　　　fn.m = function () { 　　　　　//... 　　　}; 　　　return fn; 　})(func)

　　上面的代码为func模块添加了一个新方法m()，然后返回新的func模块。

(5):宽放大模式

在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。如果采用上一节的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用"宽放大模式"。

1 2 3 4

var func = ( function (fn){ 　　　　//... 　　　　return fun; 　　})(window.func || {});

与"放大模式"相比，＂宽放大模式＂就是"立即执行函数"的参数可以是空对象。

(6):输入全局变量

独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。为了在模块内部调用全局变量，必须显式地将其他变量输入模块。

1 2 3

var func = (function ($, baidu) { 　　　//... 　})(jQuery, baidu);

　　上面的func模块需要使用jQuery库和baidu库，就把这两个库（其实是两个模块）当作参数输入func。这样做除了保证模块的独立性，还使得模块之间的依赖关系变得明显。

待续：js模块加载器