Javascript 模块化开发

随着网站逐渐变成互联网应用程序，嵌入网页的 Javascript 代码越来越庞大，越来越复杂，javaScript 简单的代码组织规范不足以驾驭如此庞大规模的代码。既然 javaScript 不能控如此大规模的代码，就要借鉴其他编程语言的做法。在 java 中使用 package 来管理，将业务相同的代码组织到同一个 package 包中，包内是一个相对独立的环境，不用担心命名冲突等问题，外部可以使用 import 引入包来访问非同包中的属性和方法。但是 javascript 没有像 java 一样 class 的概念。所以开发者需要模拟出类似的功能来管理，组织复杂的代码，我们称为模块。

一个模块就是实现一个特定功能的文件，有了模块，我们就可以使用别人的代码，想要什么功能就加载什么模块

函数封装

在之前我们写 javascript 代码时，创建属性，函数是这样的：

var num = 1;
function fun(){
return "fun";
}

这样创建的属性和方法都是全局变量和函数，很容易污染环境，如果在同一项目中不同的人去开发，很容易出现变量函数重名而导致预想不到的错误。但是使用模块化编程，创建属性和函数时将其封装在一个变量中，会使 javascript

环境整洁。

var module = {
num : 2,
fun : function(){
return "fun";
}
}

这样就将 num, fun() 封装在 Module 中，使用的时候就是调用这个属性，

console.log(module.num); // 1
console.log(module.fun()); // fun

但是这样的写法会暴露内部的成员，内部的状态可以被外部改写，

module.num = 5;
console,log(module.num); // 5

我们可以这样改写上面的代码

var module = (function(){
var num = 1;
function fun(){
return "fun";
};

return {
n : num,
f : fun
};
})();

访问 fun 方法就可以使用这样的写法

console.log(module.fun()); // fun

上面就是 Javascript 模块化的基本写法

放大模式

如果一个模块很大，或者一个模块需要调用另一个模块，那就需要采用“放大模式”

var module1 = (function(mod){
function m(){
...
}
return mod;
})(module1);

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

宽放大模式

在浏览器中，模块的各个部分都是从网上获取的，有时无法知道那个部分先加载，如果采用上面的写法，第一个执行部分有可能加载一个不存在的空对象，所以使用“宽放大模式”

var module1 = (function(mod){
...
return mod;
})(window.module1 || {});

这样就可以立即执行一个函数，并可以执行空对象。

输入全局变量

独立性是模块的重要特点，模块内部最好不与程序其他部分直接交互

为了在模块内部调用全局变量，必须显示的将其他变量输入模块

var module1 = (function($, YAHOO){
...
})(jQuery, YAHOO);

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

更多文章请访问阮老师的个人网站：http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html