深入理解JavaScript模块化开发：从全局变量冲突到模块加载器

前端开发中的全局变量冲突问题

小A作为创业团队的前端工程师，主要负责项目JavaScript代码的编写工作。

全局变量冲突

基于过往经验，小A将常用功能封装为函数，并统一存放于公用文件base.js中：

var _ = {
$: function(id) { return document.getElementById(id); },
getCookie: function(key) { ... },
setCookie: function(key, value) { ... }
};

小A将这些函数挂载到_对象下，旨在避免产生过多全局变量从而引发冲突。他告知团队成员，只需引入base.js即可使用这些函数。

同事小C反馈，其页面引入了第三方库underscore.js，该库同样占用了_全局变量，导致与base.js中的_发生冲突。小A考虑到underscore.js为第三方库难以修改，且base.js已在多处页面使用，无法轻易改动，最终只能无奈地修改underscore.js的全局变量名。

此时小A意识到，虽然将函数封装在命名空间内能降低全局变量冲突的概率，但并未从根本上解决全局变量污染的问题。

JavaScript依赖管理的挑战

依赖

随着业务扩展，小A开发了一系列函数库和UI组件，例如标签切换组件tabs.js。该组件需要调用base.js以及util.js中的函数。

新同事小D反馈，虽然页面中引入了tabs.js，但功能运行异常。小A检查后发现，小D不了解tabs.js依赖于base.js和util.js，未引入这两个文件。小A随即指导其进行修改：

<script src="tabs.js"></script>
<script src="base.js"></script>
<script src="util.js"></script>

然而功能依然异常。小A指出：“既然存在依赖关系，被依赖的文件必须放在依赖文件之前加载。”原来小D将base.js和util.js放在了tabs.js之后。

小A心想，作为开发者自己清楚组件的依赖关系，但其他人员尤其是新人往往难以掌握，这带来了维护隐患。

随后，小A为标签切换组件增加了新功能，导致tabs.js需要额外调用ui.js中的函数。此时他发现一个严重问题：必须在所有引用了tabs.js的页面上手动增加ui.js的引用。

又过了一段时间，小A优化了tabs.js，移除了对util.js的依赖以提升性能，并在所有使用tabs.js的页面中移除了util.js的引用。结果导致部分页面功能异常。小A排查后发现，其他功能仍在使用util.js中的函数，移除引用导致错误。为了保障功能正常，他不得不恢复代码。

小A开始思考，是否存在一种方法，在修改依赖关系时无需逐一修改页面，同时不影响其他功能？

模块化编码与模块加载器应用

模块化

小A在互联网上偶然发现了一种新颖的模块化编码方式，这种方案能够彻底解决他之前遇到的所有问题。

在模块化编程模式下，每个文件被视为一个独立的模块。每个模块通过名为define的函数进行创建。例如，将base.js改造为模块后，代码结构如下：

define(function(require, exports, module) {
exports.$ = function(id) { return document.getElementById(id); };
exports.getCookie = function(key) { ... };
exports.setCookie = function(key, value) { ... };
});

base.js向外提供的接口均被添加到exports对象中。由于exports是局部变量，整个模块代码不占用任何全局变量。

那么如何调用模块提供的接口呢？以tabs.js为例，它依赖于base.js和util.js：

define(function(require, exports, module) {
var _ = require('base.js'), util = require('util.js');
var div_tabs = _.$('tabs');
// .... 其他代码
});

模块可以通过局部函数require获取其他模块的接口。此时，变量_和util均为局部变量，且变量名完全由开发者控制。如果不喜欢_，也可以命名为base：

define(function(require, exports, module) {
var base = require('base.js'), util = require('util.js');
var div_tabs = base.$('tabs');
// .... 其他代码
});

一旦需要移除util.js或添加ui.js，只需修改tabs.js即可：

define(function(require, exports, module) {
var base = require('base.js'), ui = require('ui.js');
var div_tabs = base.$('tabs');
// .... 其他代码
});

由于浏览器缺乏对模块化的原生支持，若采用模块化编码，必须借助加载器（loader）。

目前存在多种加载器实现，例如require.js、seajs。此外，JRaiser类库也提供了自己的加载器。