本文深入解析JavaScript中利用匿名函数进行模块封装的核心原理。通过对比jQuery、Backbone和Underscore等主流库的早期与最新源码，详细阐述了自调用匿名函数、全局变量保护、AMD模块支持以及CommonJS兼容等关键实现机制，帮助开发者理解现代JS库的底层设计思想。
JavaScript匿名函数封装原理
在研究不同JavaScript库的封装方式后，逐渐理清了思路。其核心逻辑大致如下：
总体来看，结构与前述类似，主要区别在于最后使用了call()方法。
代码如下:
构建一个自调用匿名函数，并设定window作为参数传入该对象。这样做的目的主要在于：
代码如下:
确保库内部代码不受外部污染，同时也不会污染全局环境。复制代码
jQuery库封装源码解析
以早期版本jQuery 1.7.1为例，其封装代码结构大致如下：
jQuery 封装
代码如下:
(function( window, undefined ) {
var jQuery = (function() {console.log('hello');});
window.jQuery = window.$ = jQuery;
if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
define( "jquery", [], function () { return jQuery; } );
}
})( window );其中：
代码如下:
console.log('hello');用于验证上述封装机制是否生效，此时即可在window对象中调用jQuery。
代码如下:
window.$或者：
代码如下:
window.jQuery基于此，我们可以构建类似的封装结构：
代码如下:
(function(window, undefined) {
var PH = function() {
}
})(window)与前述示例相比，上述代码仅缺少两个步骤：
1. 定义jQuery符号及全局调用接口 2. 异步模块定义（AMD）支持
进一步查阅更早期的jQuery封装代码，其方法大体一致，但存在以下差异：
代码如下:
if (typeof window.jQuery == "undefined") {
var jQuery = function() {};
if (typeof $ != "undefined")
jQuery._$ = $;
var $ = jQuery;
};这种判断机制较为特殊，导致我们无法直接重写前一步骤中的jQuery。因此，需查看最新版本的jQuery封装实现。以版本2.1.1为例，除增加大量功能外，其核心思想保持不变：
代码如下:
(function(global, factory) {
if (typeof module === "object" && typeof module.exports === "object") {
module.exports = global.document ?
factory(global, true) :
function(w) {
if (!w.document) {
throw new Error("jQuery requires a window with a document");
}
return factory(w);
};
} else {
factory(global);
}
}(typeof window !== "undefined" ? window : this, function(window, noGlobal) {
var jQuery = function() {
console.log('jQuery');
};
if (typeof define === "function" && define.amd) {
define("jquery", [], function() {
return jQuery;
});
};
strundefined = typeof undefined;
if (typeof noGlobal === strundefined) {
window.jQuery = window.$ = jQuery;
};
return jQuery;
}));在浏览器环境中：
代码如下:
typeof module ="undefined"上述逻辑主要针对Node.js等环境进行判断，这表明jQuery代码量日益庞大。
Backbone库封装机制
Backbone 封装
查看Backbone源码：
代码如下:
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
define(['underscore', 'jquery', 'exports'], function(_, $, exports) {
root.Backbone = factory(root, exports, _, $);
});
} else if (typeof exports !== 'undefined') {
var _ = require('underscore');
factory(root, exports, _);
} else {
root.Backbone = factory(root, {}, root._, (root.jQuery || root.Zepto || root.ender || root.$));
}
}(this, function(root, Backbone, _, $) {
Backbone.$ = $;
return Backbone;
}));除了异步支持外，还体现了对jQuery和underscore的依赖关系。
代码如下:
define(['underscore', 'jquery', 'exports'], function(_, $, exports) {
root.Backbone = factory(root, exports, _, $);
});表明Backbone原生支持RequireJS。
Underscore库封装实现
Underscore 封装 此外，Underscore库也占用了符号 _。
代码如下:
(function() {
var root = this;
var _ = function(obj) {
if (obj instanceof _) return obj;
if (!(this instanceof _)) return new _(obj);
this._wrapped = obj;
};
if (typeof exports !== 'undefined') {
if (typeof module !== 'undefined' && module.exports) {
exports = module.exports = _;
}
exports._ = _;
} else {
root._ = _;
}
if (typeof define === 'function' && define.amd) {
define('underscore', [], function() {
return _;
});
}}.call(this));