前端模塊通常是我們開發人員為了避免和他人沖突才把模塊代碼放置在一個閉包中。

如何封裝Node.js和前端通用的模塊，我們可以參考Underscore.js 實現，他就是一個Node.js和前端通用的功能函數模塊，查看代碼：

代碼如下:
// Create a safe reference to the Underscore object for use below.
var _ = function(obj) {
if (obj instanceof _) return obj;
if (!(this instanceof _)) return new _(obj);
this._wrapped = obj;
};

// Export the Underscore object for **Node.js**, with
// backwards-compatibility for the old `require()` API. If we're in
// the browser, add `_` as a global object via a string identifier,
// for Closure Compiler "advanced" mode.
if (typeof exports !== 'undefined') {
if (typeof module !== 'undefined' && module.exports) {
exports = module.exports = _;
}
exports._ = _;
} else {
root._ = _;
}
通過判斷exports是否存在來決定將局部變量 _ 賦值給exports，向后兼容舊的require() API，如果在瀏覽器中，通過一個字符串標識符“_”作為一個全局對象；完整的閉包如下：
代碼如下:
(function() {

// Baseline setup
// --------------

// Establish the root object, `window` in the browser, or `exports` on the server.
var root = this;

// Create a safe reference to the Underscore object for use below.
var _ = function(obj) {
if (obj instanceof _) return obj;
if (!(this instanceof _)) return new _(obj);
this._wrapped = obj;
};

// Export the Underscore object for **Node.js**, with
// backwards-compatibility for the old `require()` API. If we're in
// the browser, add `_` as a global object via a string identifier,
// for Closure Compiler "advanced" mode.
if (typeof exports !== 'undefined') {
if (typeof module !== 'undefined' && module.exports) {
exports = module.exports = _;
}
exports._ = _;
} else {
root._ = _;
}
}).call(this);

通過function定義構建了一個閉包，call(this)是將function在this對象下調用，以避免內部變量污染到全局作用域。瀏覽器中，this指向的是全局對象（window對象），將“_”變量賦在全局對象上“root._”，以供外部調用。

和Underscore.js 類似的Lo-Dash，也是使用了類似的方案，只是兼容了AMD模塊載入的兼容：
代碼如下:
;(function() {

/** Used as a safe reference for `undefined` in pre ES5 environments */
var undefined;
/** Used to determine if values are of the language type Object */
var objectTypes = {
'boolean': false,
'function': true,
'object': true,
'number': false,
'string': false,
'undefined': false
};
/** Used as a reference to the global object */
var root = (objectTypes[typeof window] && window) || this;

/** Detect free variable `exports` */
var freeExports = objectTypes[typeof exports] && exports && !exports.nodeType && exports;

/** Detect free variable `module` */
var freeModule = objectTypes[typeof module] && module && !module.nodeType && module;

/** Detect the popular CommonJS extension `module.exports` */
var moduleExports = freeModule && freeModule.exports === freeExports && freeExports;

/*--------------------------------------------------------------------------*/

// expose Lo-Dash
var _ = runInContext();

// some AMD build optimizers, like r.js, check for condition patterns like the following:
if (typeof define == 'function' && typeof define.amd == 'object' && define.amd) {
// Expose Lo-Dash to the global object even when an AMD loader is present in
// case Lo-Dash was injected by a third-party script and not intended to be
// loaded as a module. The global assignment can be reverted in the Lo-Dash
// module by its `noConflict()` method.
root._ = _;

// define as an anonymous module so, through path mapping, it can be
// referenced as the "underscore" module
define(function() {
return _;
});
}
// check for `exports` after `define` in case a build optimizer adds an `exports` object
else if (freeExports && freeModule) {
// in Node.js or RingoJS
if (moduleExports) {
(freeModule.exports = _)._ = _;
}
// in Narwhal or Rhino -require
else {
freeExports._ = _;
}
}
else {
// in a browser or Rhino
root._ = _;
}
}.call(this));
再來看看Moment.js的封裝閉包主要代碼：
代碼如下:
(function (undefined) {
var moment；
// check for nodeJS
var hasModule = (typeof module !== 'undefined' && module.exports)；
/************************************
Exposing Moment
************************************/

function makeGlobal(deprecate) {
var warned = false, local_moment = moment;
/*global ender:false */
if (typeof ender !== 'undefined') {
return;
}
// here, `this` means `window` in the browser, or `global` on the server
// add `moment` as a global object via a string identifier,
// for Closure Compiler "advanced" mode
if (deprecate) {
this.moment = function () {
if (!warned && console && console.warn) {
warned = true;
console.warn(
"Accessing Moment through the global scope is " +
"deprecated, and will be removed in an upcoming " +
"release.");
}
return local_moment.apply(null, arguments);
};
} else {
this['moment'] = moment;
}
}

// CommonJS module is defined
if (hasModule) {
module.exports = moment;
makeGlobal(true);
} else if (typeof define === "function" && define.amd) {
define("moment", function (require, exports, module) {
if (module.config().noGlobal !== true) {
// If user provided noGlobal, he is aware of global
makeGlobal(module.config().noGlobal === undefined);
}

return moment;
});
} else {
makeGlobal();
}
}).call(this);
從上面的幾個例子可以看出，在封裝Node.js和前端通用的模塊時，可以使用以下邏輯：
代碼如下:
if (typeof exports !== "undefined") {
exports.** = **;
} else {
this.** = **;
}
即，如果exports對象存在，則將局部變量裝載在exports對象上，如果不存在，則裝載在全局對象上。如果加上ADM規范的兼容性，那么多加一句判斷：
代碼如下:if (typeof define === "function" && define.amd){}

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com