避免 IIFE 模式的多个副本答案

【问题标题】：Avoiding Multiple Copies of the IIFE Pattern避免 IIFE 模式的多个副本
【发布时间】：2015-09-09 22:06:23
【问题描述】：

我见过下面的 IIFE 模式（它有名字吗？），根据this 博客文章，它可以防止其他插件，改进缩小并具有tiny 性能优势。我还亲自为 IIFE 添加了一个命名空间：

(function (MyNamespace, $, window, document, undefined) {
    "use strict";

    // My Code

})(window.MyNamespace = window.MyNamespace || {}, window.jQuery, window, document);

我已经在每个 JavaScript 文件中看到了这种模式。连接和缩小之后呢？如何确保我的代码只包含上述 IIFE 中的一个？ NPM、Gulp/Grunt 等工具在这方面有帮助吗？有处理这种情况的标准方法吗？

【问题讨论】：

这对性能的影响很小，由于多次使用该模式，您遇到了什么问题？
这是您必须在每个文件中复制的代码。在连接和缩小之后，您只需要它的一份副本，这将进一步帮助缩小。这似乎是一个相当普遍的模式，我希望有人解决了这个问题。
你在什么状态下运行你的构建工具？最后一步是在观看还是更多？
如果您使用的是构建工具，请使用该工具将您的文件（没有此代码块）包含在一个副本中。 Knockout for example 这样做。
感谢@JamesThorpe 提供的示例。我还碰巧在jQuery 上观看了 Paul Irish 的视频，发现他们采取了类似的方法。

标签： javascript gruntjs npm gulp iife

【解决方案1】：

经过一些调查，像 jQuery 和 knockout 这样的库编写者通过将 IFFE 预先挂起和附加到 JavaScript 来处理这个问题。然后他们有一个将所有内容连接在一起的制作文件。

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）采用稍微不同的方法来解析窗口及其后代。

Knockout extern-pre.js

(function(undefined){
    var window = this || (0, eval)('this'),
        document = window['document'],
        navigator = window['navigator'],
        jQueryInstance = window["jQuery"],
        JSON = window["JSON"];

Knockout extern-post.js

}());

然后，您可以使用 gulp-concat 之类的东西将 intro 和 outro 文件夹在您自己的脚本文件周围。

【讨论】：