为什么function( global, factory )在如此多的前端库中有应用

Posted 2021-09-07 小小

在如此多的javascript库中，我看到global 、factory作为函数的参数，这是为什么呢？
答：
这是UMD模式，你可以很清晰的通过下图看到看到这段代码在你的库中做了什么：

 ┌──────────────────┐       ┌──────────────────┐
    │                  ▼       ▼                  │
    │    (function (global, factory) {            │
    │                                             │
    │                                             │
    │        /* deleted for clarity */            │
    │                 ┌───────────────────────────┘
    │                 │
    │    }(this, function () { \'use strict\';
    │       │
    └───────┘
             /* */

         })

所以这根本上是一个立即执行函数，如果你把匿名函数改写为有名字的函数你可以更清晰的看到这段代码的结构。

// rename function () { \'use strict\' ...
function Vue () { \'use strict\';
    /* */
}

// rename function (global, factory) ...
function UMD (global, factory) {
    /* deleted for clarity */ 
}

UMD(this, Vue);

global根本上就是当从函数外部引用时暴露factory的全局对象（window在浏览器和node.js没命名），factory是创建库对象的函数，根本上factory是vue，jq等三方库的完成。
用这样的方式来写这个建构，没有创建任何不必要的全局变量和函数，因此避免了污染全局区域并且避免了与其他库变量或函数名的冲突。
至于为什么要把this分派给global，这是因为window是一个完全没有保护的全局变量（这是为什么node.js没有给它起名字）并且任何第三放库都可以重写或者修改它。如果你在使用不知名的第三方库时想要浏览器的原始全局对象，你需要使用this这个小技巧。

借鉴于：
https://stackoverflow.com/que...