后端程序员的 Js 之旅 : 模块化（一）
发表于2016-04-24
原文出处： 李少鹏（@BenjaLi）
ECMAScrip 6 之前，JavaScript 是天生模块化缺失的，代码之间隔离最基本的单位是函数，通常 JavaScript 的模块化也是采用函数来实现。模块化的缺失不利于大规模 Web App 的开发，促使生态圈催生出大量的模块化的规范，其中的代表是 CommonJS、AMD 和 UMD ，同样也产出许多优秀的模块加载器比如 RequireJS、Browserify、Webpack 等。《后端程序员的 JavaScript 之旅 – 模块化》系列将分多个篇幅分别介绍 JavaScript 模块化实现的基本原理、模块化规范、业内比较流行的加载器以及 ES 6 的模块特性。阮一峰老师的《Javascript 模块化编程》系列对模块化的内容有精彩的描述，这个系列写在 2012 年，JavaScript 生态圈在近几年发生了日新月异的变化，我会尝试增加一些新的内容。
本文全面介绍 Ben Cherry 在 JavaScript Module Pattern: In-Depth 一文中提到的 JavaScript 模块化设计模式。
基础模式
· 匿名闭包
匿名闭包是很常用的代码隔离方式，声明匿名对象并立即执行。匿名函数中声明的变量和方法以及匿名函数本身不会污染到函数体外，同时匿名函数的调用形成一个闭包，使函数体内可以使用函数体外声明的变量和方法。
JavaScript
(function () {
// ... all vars and functions are in this scope only
// still maintains access to all globals
}());
(function () {
// ... all vars and functions are in this scope only
// still maintains access to all globals
}());
全局导入
我们知道 JavaScript 全局变量的作用域贯穿全局，在函数内也可以使用甚至声明全局变量，这样很容易导致代码混乱难以管理。
全局导入模式是匿名闭包的一个变种，增加参数导入全局变量，约定在匿名函数内部只能通过导入的参数访问外部的模块，从而使模块间的依赖清晰，便于管理。
JavaScript
(function ($, YAHOO) {
// now have access to globals jQuery (as $) and YAHOO in this code
}(jQuery, YAHOO));
(function ($, YAHOO) {
// now have access to globals jQuery (as $) and YAHOO in this code
}(jQuery, YAHOO));
这种约定不能强制阻止函数体内部访问全局变量，其中一个解决方案是把所有的模块都使用这种方式处理，仅把模块本身导出到全局变量，这样就可以极大减少全局变量的使用。
模块导出
模块导出就是将立即执匿名函数的结果返回赋值给一个全局变量。匿名函数仅将开放的对象返回，其内部定义的变量、函数仍然对外部不可见。
JavaScript
var MODULE = (function () {
var my = {},
privateVariable = 1;
function privateMethod() {
// ...
}
my.moduleProperty = 1;
my.moduleMethod = function () {
// ...
};
return my;
}());
var MODULE = (function () {
var my = {},
privateVariable = 1;
function privateMethod() {
// ...
}
my.moduleProperty = 1;
my.moduleMethod = function () {
// ...
};
return my;
}());
进阶模式
· 扩充模式
JavaScript 对象支持热扩充，结合全局导入模式，我们可以将模块进行扩充。
JavaScript
var MODULE = (function (my) {
my.anotherMethod = function () {
// added method...
};
return my;
}(MODULE));
var MODULE = (function (my) {
my.anotherMethod = function () {
// added method...
};
return my;
}(MODULE));
这种模式假定 MODULE 已经声明过，如果没有声明调用会出错。
宽扩充模式
宽扩充模式通过一个技巧，调用匿名函数传递 MODULE || {} 作为参数，解决 MODULE 如果未事先申明调用出错的问题。这个模式还隐藏着一个妙处，就是多个扩充模式可以并行地被调用不被堵塞。
JavaScript
var MODULE = (function (my) {
// add capabilities..
return my;
}(MODULE || {}));
var MODULE = (function (my) {
// add capabilities...
return my;
}(MODULE || {}));
紧扩充模式
宽扩充模式非常棒，但是有一个缺点是对无法安全地处理方法属性的重载。紧扩充模式保持对旧有方法的的引用，在定义的新方法中可以灵活地重用旧有方法的功能。
JavaScript
var MODULE = (function (my) {
var old_moduleMethod = my.moduleMethod;
my.moduleMethod = function () {
// method override, has access to old through old_moduleMethod...
};
return my;
var MODULE = (function (my) {
var old_moduleMethod = my.moduleMethod;
my.moduleMethod = function () {
// method override, has access to old through old_moduleMethod...
};
return my;
}(MODULE));
克隆和继承
JavaScript
var MODULE_TWO = (function (old) {
var my = {},
key;
for (key in old) {
if (old.hasOwnProperty(key)) {
my[key] = old[key];
}
}
var super_moduleMethod = old.moduleMethod;
my.moduleMethod = function () {
// override method on the clone, access to super through super_moduleMethod
};
return my;
}(MODULE));
var MODULE_TWO = (function (old) {
var my = {},
key;
for (key in old) {
if (old.hasOwnProperty(key)) {
my[key] = old[key];
}
}
var super_moduleMethod = old.moduleMethod;
my.moduleMethod = function () {
// override method on the clone, access to super through super_moduleMethod
};
return my;
}(MODULE));
克隆和继承模式差不多是对原有模块影响最小的模块重用方式，这种模式通浅克隆旧模块属性的方式进行重用，可以结合紧扩充模式处理方法重载的问题。需要注意的是，这是一种浅克隆，当旧模块的属性是对象的时候，针对这个对象的修改，将会对新旧两个模块相互影响。
跨文件私有状态
当一个模块分拆成多个文件，使用宽扩充模式会发现一个限制，各文件中的方法会维护自己的私有状态而无法在模块的多个文件中共享，下面的一个示例展示如何在这种情况下对私有状态再同一个模块见共享。
JavaScript
var MODULE = (function (my) {
var _private = my._private = my._private || {},
_seal = my._seal = my._seal || function () {
delete my._private;
delete my._seal;
delete my._unseal;
},
_unseal = my._unseal = my._unseal || function () {
my._private = _private;
my._seal = _seal;
my._unseal = _unseal;
};
// permanent access to _private, _seal, and _unseal
return my;
}(MODULE || {}));
var MODULE = (function (my) {
var _private = my._private = my._private || {},
_seal = my._seal = my._seal || function () {
delete my._private;
delete my._seal;
delete my._unseal;
},
_unseal = my._unseal = my._unseal || function () {
my._private = _private;
my._seal = _seal;
my._unseal = _unseal;
};
// permanent access to _private, _seal, and _unseal
return my;
}(MODULE || {}));
每个文件维护一个本地变量 _private，用于分享给别的模块。当模块被加载之后，调用 MODULE._seal 销毁本地变量 _private 的外部访问属性。如果模块需要扩充，加载文件之前调用 _unseal 将本地变量 _private 输出到外部访问的属性，加载之后，调用 _seal 销毁外部访问的属性。
子模块
子模块就是将模块的属性也定义为模块，可以灵活使用上面提到的各种模式。
JavaScript
MODULE.sub = (function () {
var my = {};
// ...
return my;
}());
MODULE.sub = (function () {
var my = {};
// ...
return my;
}());
这么多年来，还没用过一把好的机械键盘 我要尝试改变一下 ?