我看到了以下IIFE模式(它有名字吗?),根据这篇博客文章,它可以防止其他插件,提高最小化,并具有微小的性能优势。我还亲自为IIFE添加了一个名称空间:
(function (MyNamespace, $, window, document, undefined) {
"use strict";
// My Code
})(window.MyNamespace = window.MyNamespace || {}, window.jQuery, window, document);
我在每个JavaScript文件中都看到过这种模式。在连接和缩小之后呢?我怎样才能确保我的代码只使用上述IIFE中的一个包装?像NPM、Gulp/Grunt这样的工具在这方面有帮助吗?是否有处理这种情况的标准方法?
经过一番调查,像jQuery和knockout这样的库编写者通过预先挂起并将IFFE附加到JavaScript来处理这个问题。然后,他们有一个make文件,将所有内容连接在一起。
jQuery IIFE的开始处理非浏览器场景要复杂得多。
jQuery intro.js(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 ) {
jQuery outro.js return jQuery;
}));
Knockout(感谢@JamesThorpe)采用一种稍微不同的方法来解析窗口及其后代。
淘汰赛extern-pre.js
(function(undefined){
var window = this || (0, eval)('this'),
document = window['document'],
navigator = window['navigator'],
jQueryInstance = window["jQuery"],
JSON = window["JSON"];
淘汰赛extern-post.js
}());
然后,您可以使用类似gulp-concat的东西将介绍和输出文件夹在您自己的脚本文件周围。