本文深入解析JavaScript模块化编程的核心模式，从基础的匿名闭包与全局变量导入入手，详细阐述放大模式（宽放大与紧放大）、跨文件私有变量管理及子模块创建等进阶技巧。通过具体代码示例，展示如何构建可扩展、高性能且易于维护的大型JavaScript应用架构，帮助开发者掌握现代前端开发的模块化最佳实践。
模块化编程是JavaScript开发中极为普遍的一种架构模式。它通常能显著提升代码的可读性与可维护性，然而，许多高效的高级实践尚未被广大开发者广泛知晓和应用。
基础概念
基础概念
本节将简要回顾自Eric Miraglia（YUI核心开发者）首次发表博客介绍模块化模式以来的几种主要流派。若你对这些基础模式已十分熟悉，可直接跳过本章，进入“进阶模式”部分。
匿名闭包
这是实现模块化的基石，也是JavaScript语言中最强大的特性之一。我们只需创建一个匿名函数并立即执行它（IIFE）。所有代码逻辑都在此函数作用域内运行，依托于闭包机制实现私有化，确保内部变量在整个应用生命周期中保持独立且不被外部污染。
代码如下:
(function () {
// ... all vars and functions are in this scope only
// still maintains access to all globals
}());请注意包裹匿名函数的最外层括号。这是由JavaScript语法特性决定的必要步骤：以function关键字开头的语句默认被解析为函数声明，而将其包裹在括号内则强制解释器将其视为函数表达式。
全局变量导入
JavaScript存在一种“隐式全局变量”机制。当解释器在作用域链中反向查找变量声明时，若未找到var声明，该变量将被视为全局变量。若在赋值语句中引用未声明的变量，解释器会自动创建全局变量。这虽然便于在匿名闭包中访问或创建全局变量，但会导致代码难以维护，因为从代码表面难以直观区分哪些是全局变量。
幸运的是，利用匿名函数提供了一种更优的解决方案：将全局变量作为参数传入匿名函数。这种方式不仅代码更清晰，执行效率也更高。示例如下：
代码如下:
(function ($, YAHOO) {
// now have access to globals jQuery (as $) and YAHOO in this code
}(jQuery, YAHOO));模块导出
除了使用全局变量，我们有时还需要声明并导出新的全局变量供反复调用。通过返回匿名函数的值，我们可以轻松实现这一点，从而构建出基本的模块化模式雏形。完整示例如下：
代码如下:
var MODULE = (function () {
var my = {},
privateVariable = 1;
function privateMethod() {
// ...
}
my.moduleProperty = 1;
my.moduleMethod = function () {
// ...
};
return my;
}());如上所示，我们声明了一个名为MODULE的全局模块对象。它包含两个公有属性：方法MODULE.moduleMethod和变量MODULE.moduleProperty。同时，利用匿名函数的闭包特性，模块内部还维护着私有的内部状态。此外，我们可以像之前介绍的那样，通过参数导入所需的全局变量。
进阶模式
进阶模式
上述基础模式已能应对多数场景，现在我们可以在此基础上进一步发展，构建更强大、可扩展的结构。接下来，我们将以MODULE模块为例，逐一介绍这些进阶模式。
放大模式
放大模式
模块化模式的一个限制是模块代码必须集中在单个文件中。对于大型项目，将JavaScript拆分为多个文件至关重要。幸运的是，我们可以通过“放大模块”来实现这一目标：先导入现有模块，为其添加新属性，最后再导出。以下示例展示了如何从原有的MODULE中扩展功能：
代码如下:
var MODULE = (function (my) {
my.anotherMethod = function () {
// added method...
};
return my;
}(MODULE));虽然此处var关键字并非强制，但为了保持代码风格一致性，我们仍使用它。执行完毕后，模块将新增一个名为MODULE.anotherMethod的公有方法。此放大文件同样维护其自身的私有状态及导入的对象。
宽放大模式
宽放大模式
前例要求初始化模块必须先执行，随后才能执行放大模块。然而，这并非绝对必要。JavaScript应用性能优化的关键之一在于脚本的异步执行。通过“宽放大模式”，我们可以创建灵活的多部分模块，允许它们以任意顺序加载。每个文件需遵循以下结构：
代码如下:
var MODULE = (function (my) {
// add capabilities...
return my;
}(MODULE || {}));在此模式中，var表达式是必需的。注意，如果MODULE尚未初始化，该导入语句会自动创建MODULE。这意味着你可以使用如LABjs等工具并行加载所有模块文件，而无需担心阻塞问题。
紧放大模式
紧放大模式
宽放大模式虽好，但也带来了一些限制：它无法安全地覆盖模块属性，也无法在初始化阶段使用其他文件中的属性（尽管运行时可以使用）。“紧放大模式”引入了加载顺序序列，并允许覆盖属性。以下是一个简单示例（对原始MODULE进行放大）：
代码如下:
var MODULE = (function (my) {
var old_moduleMethod = my.moduleMethod;
my.moduleMethod = function () {
// method override, has access to old through old_moduleMethod...
};
return my;
}(MODULE));在上述示例中，我们覆盖了MODULE.moduleMethod的实现，但通过old_moduleMethod变量保留了对原方法的引用，以便在需要时调用。
克隆与继承
克隆与继承
代码如下:
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));这可能是灵活性最低的一种选择。虽然它使代码看起来整洁，但代价是牺牲了灵活性。如前文代码所示，若属性是对象或函数，它不会被复制，而是成为该对象或函数的第二个引用。修改其中一个会同时影响另一个（因为它们指向同一对象）。虽然可以通过递归克隆解决对象克隆问题，但函数克隆可能无法通过此方式解决（或许eval可以，但这并非推荐做法）。因此，此处提及该方法仅为了文章完整性。
跨文件私有变量
跨文件私有变量
将模块拆分到多个文件时，一个重大限制是：每个文件维护各自的私有变量，且无法访问其他文件的私有变量。但此问题是可以解决的。以下是一个支持跨文件私有变量的宽放大模块示例：
代码如下:
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()，并在新文件执行完毕后再次调用_seal()。我在实际工作中使用此模式，且在其他地方较少见到。我认为这是一种极具价值的模式，值得单独撰文探讨。
子模块
子模块
最后一种进阶模式是最为直观的。创建子模块有许多优秀案例，其方式与普通模块创建类似：
代码如下:
MODULE.sub = (function () {
var my = {};
// ...
return my;
}());虽然看似简单，但值得在此提及。子模块具备普通模块的所有进阶优势，包括放大模式和私有化状态。
结论
结论
大多数进阶模式可以组合使用，以创建更实用的架构。若必须推荐一种用于设计复杂应用程序的模块化模式，我会选择结合宽放大模式、私有变量和子模块。
我尚未深入探讨这些模式的性能问题，但我倾向于一种更简单的思考方式：如果一个模块化模式具备良好的性能，它应该能很好地支持代码最小化，从而加快脚本下载速度。宽放大模式允许简单的非阻塞并行下载，进而提升加载速度。虽然初始化时间可能略慢于其他方法，但权衡利弊后，这仍是值得的。只要全局变量导入准确，运行时性能应不受影响，甚至可能通过在子模块中使用私有变量缩短引用链而获得更快的运行速度。
最后，这里展示了一个子模块动态加载到父模块的示例（若父模块不存在则创建）。为简洁起见，我去除了私有变量部分，当然添加私有变量也非常简单。这种编程模式允许整个复杂的层级结构代码库通过子模块并行加载。
代码如下:
var UTIL = (function (parent, $) {
var my = parent.ajax = parent.ajax || {};
my.get = function (url, params, callback) {
// ok, so I'm cheating a bit :)
return $.getJSON(url, params, callback);
};
// etc...
return parent;
}(UTIL || {}, jQuery));本文总结了当前“JavaScript模块化编程”的最佳实践，并说明如何投入实用。虽然这不是初级教程，但只要具备基本的JavaScript语法知识，即可轻松理解。