Modulladen und -ausführung werden in Node.js gepackt, sodass die Variablen in der Moduldatei geschlossen sind und keine globalen Variablen verschmutzen oder mit anderen in Konflikt geraten.
Bei Frontend-Modulen platzieren unsere Entwickler den Modulcode normalerweise in einem Abschluss, um Konflikte mit anderen zu vermeiden.
Wie man Module kapselt, die Node.js und dem Front-End gemeinsam sind, können wir auf die Underscore.js-Implementierung verweisen, bei der es sich um ein funktionales Funktionsmodul handelt, das Node.js und Front-End gemeinsam hat. Sehen Sie sich den Code an:
// Erstellen Sie einen sicheren Verweis auf den Unterstrich Objekt zur Verwendung unten.
var _ = function(obj) {
if (obj Instanz von _) return obj;
if (!(diese Instanz von _)) return new _(obj);
this._wrapped = obj;
};
// Exportieren Sie das Underscore-Objekt für **Node.js**, mit
// Abwärtskompatibilität für die alte „require()“-API . Wenn wir uns im
// Browser befinden, fügen Sie „_“ als globales Objekt über einen String-Bezeichner hinzu,
// für den „erweiterten“ Modus des Closure Compilers.
if (typeof exports !== 'undefiniert' ) {
if (typeof module !== 'undefiniert' && module.exports) {
exports = module.exports = _;
}
exports._ = _;
} else {
root._ = _;
}
Bestimmt, ob die lokale Variable _ Exporten zugewiesen werden soll, indem beurteilt wird, ob Exporte vorhanden sind. Sie ist abwärtskompatibel mit der alten require()-API . Wenn im Browser als globales Objekt eine Zeichenfolgenkennung „_“ verwendet wird, lautet der vollständige Abschluss wie folgt:
(function() {
// Baseline setup
// --------------
/ / Richten Sie das Root-Objekt „window“ im Browser oder „exports“ auf dem Server ein.
var root = this;
// Erstellen Sie einen sicheren Verweis auf das Unterstreichen Sie das Objekt zur Verwendung unten.
var _ = function(obj) {
if (obj Instanz von _) return obj;
if (!(diese Instanz von _)) return new _(obj);
this._wrapped = obj;
};
// Exportieren Sie das Underscore-Objekt für **Node.js**, mit
// Abwärtskompatibilität für das alte `require()` API. Wenn wir uns im
// Browser befinden, fügen Sie „_“ als globales Objekt über einen String-Bezeichner hinzu,
// für den „erweiterten“ Modus des Closure Compilers.
if (typeof exports != = 'undefiniert') {
if (typeof module !== 'undefiniert' && module.exports) {
exports = module.exports = _;
}
exports._ = _;
} else {
root._ = _;
}
}).call(this);
Ein Abschluss wird durch die Funktionsdefinition konstruiert. call(this) ist die Funktion, die unter diesem Objekt aufgerufen wird, um zu verhindern, dass interne Variablen den globalen Bereich verunreinigen. Im Browser zeigt dieser auf das globale Objekt (Fensterobjekt) und bei externen Aufrufen wird die Variable „_“ dem globalen Objekt „root._“ zugewiesen.
Lo-Dash, das Underscore.js ähnelt, verwendet ebenfalls eine ähnliche Lösung, ist jedoch mit dem Laden von AMD-Modulen kompatibel:
;(function() {
/**在 ES5 之前的環境中用作“undefined”的安全參考*/
var undefined;
或
'布林值': false,
'函數': true,
'字串': false,
'未定義': false
};
/**用於確定值是否屬於語言類型 Object*/
var root = (objectTypes[typeof window] && window) || this root = (objectTypes[typeof window] && window) || this; var freeExports = objectTypes[typeof 出口] && 出口&& !exports.nodeType && 出口;
/**檢測自由變數“exports”*/
/**檢測自由變數“module”*/
/**檢測流行的 CommonJS 擴充 `module.exports`*/ /
/***/
var moduleExports = freeModule && freeModule.exports === free moduleExports = freeModule && freeModule.exports === free mod *-- ----------------------------------------------- --- ----------------------*/
// 公開Lo-Dash
var _ = runInContext();
// 一些AMD 建構最佳化器,如r.js,檢查如下所示的條件模式:
if (typeof Define == 'function' && typeof Define.amd == 'object' && Define .amd) {
// 即使AMD 載入器存在於
中,也將Lo-Dash 暴露給全域物件// 如果Lo-Dash 是由第三方腳本注入的,且不打算被
// 載入為一個模組。
root._ = _;
// 定義為匿名模組,因此,透過路徑映射,可
// 定義為「底線」模組引用
🎜> return _;
});
}
// 檢查對於「define」之後的「exports」,以防止建構最佳化器加上「exports」物件
( ) {
// 在Node.js 或RingoJS
if (moduleExports) {
(free 犀牛中-require
else {
freeExports._ = _;
}
} }
}.call(this));
再來看看Moment .js的封裝閉包主要程式碼:
複製程式碼
程式碼如下:
(Funktion (undefiniert) {
var moment;
// auf nodeJS prüfen
var hasModule = (typeof module !== 'undefiniert' && module.exports);
/************************************
Enthüllender Moment
******** ****************************/
function makeGlobal(deprecate) {
var warned = false, local_moment = moment;
/*global ender:false */
if (typeof ender !== 'undefiniert') {
return;
}
// Hier bedeutet „this“ „Fenster“ im Browser oder „global“ auf dem Server
// füge „moment“ hinzu ` als globales Objekt über einen String-Bezeichner,
// für den „erweiterten“ Modus des Closure Compilers
if (veraltet) {
this.moment = function () {
if (!warned && console && console.warn) {
warningd = true;
console.warn(
"Der Zugriff auf Moment über den globalen Bereich ist "
„veraltet und wird in Kürze entfernt“
" release.");
}
return local_moment.apply(null, arguments);
};
} else {
this['moment'] = moment;
}
}
// CommonJS-Modul ist definiert
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) {
// Wenn der Benutzer noGlobal angegeben hat, ist ihm global bekannt
makeGlobal(module.config().noGlobal === undefined);
}
return moment;
});
} else {
makeGlobal();
. 🎜>}).call(this);端通用的模块时,可以使用以下逻辑:
复制代码
代码如下: wenn ( typeof exports !== "undefiniert") {
exports.** = **;} else {
this.** = **;
}
即,如果exports对象存在, 则将局部变量装载在exports对象上, 如果不存在, 则装载在全局对象上.如果加上ADM规范的兼容性,那么多加一句判断:
复制代码
代码如下:if (typeof define === "function" && define.amd){}