构建一个JavaScript库,为什么要这样使用IIFE？

Question

我注意到很多库使用下面的这种风格来定义他们的库.我还注意到第一个自调用函数与Require.js或AMD系统有关,它们总是将工厂作为参数,我将更多地看待Require.js,总是进入Browserify.

为什么主代码传递到括号内的第一个自调用函数的末尾,这是一个闭包,或者只是被认为是一个匿名函数,我将深入研究两者.这有什么好处？它看起来像瓶盖内笔者经过一string,this和callback.

这会给我的库一个干净安全的方法来全局化下面这个例子中的主要对象Please吗？

(function( globalName, root, factory ) {
    if ( typeof define === 'function' && define.amd ) {
        define( [], factory );
    }
    else if ( typeof exports === 'object' ) {
        module.exports = factory();
    }
    else{
        root[globalName] = factory();
    }
}('Please', this, function(){

我正在尝试深入挖掘JavaScript并创建我自己的小型MVC架构,我不想听到我很傻或以前做过,我想挑战自己并学习.

如果有任何很好的资源来创建JavaScript库或甚至更好的MVC库我很想知道.

Answer 1

此代码模式称为通用模块定义(UMD).它允许您使JavaScript库在不同的环境中可用.它提供了三种定义模块的方法:

1. 异步模块定义(AMD),由RequireJS和Dojo Toolkit实现.

   define( [], factory );

2. CommonJS - NodeJS模块.

   module.exports = factory();

3. 将模块分配给全局对象,例如window在浏览器中.

   root[globalName] = factory();

该IIFE有三个参数:globalName,root和factory.

• globalName是您的模块的名称.它仅适用于定义模块的第三种方式,即将模块对象分配给全局变量.例如,如果将此参数设置为"myAwesomeModule"并在浏览器中使用代码(不使用AMD),则可以使用myAwesomeModule变量访问模块.
• root是全局对象的名称.显然,它也仅适用于定义模块的第三种方式.通常this作为此参数传递,因为this是window在浏览器中的引用.但是,这在严格模式下不起作用.如果您希望代码在严格模式下工作,则可以替换this为typeof window !== "undefined" ? window : undefined.
• 最后,factory是一个匿名函数,它应该将您的模块作为对象返回.

也可以看看:

• JavaScript中的(function(){})()构造是什么？
• 什么是AMD,CommonJS和UMD？

Answer 2

这是通用模块定义(UMD)的示例.这是一种使JS模块与三种流行的JS模块规范兼容的技术:

1. 异步模块定义(AMD,由Require.js使用)

   define('name', [ /* dependencies */ ], factory);
   

2. CommonJS(Node.js生态系统)

   module.exports = object;
   

3. 全局导出(例如,window在浏览器中)

   global['name'] = object;
   

UMD包装负责创建要导出的对象的工厂函数,并将其作为参数传递给立即调用的函数表达式(IIFE),就像在您粘贴的代码段中一样.IIFE负责检测模块环境,并以适当的方式导出工厂创建的对象.模式如下:

(function (name, root, factory) {
   // detect the module environment and
   // export the result of factory()
})('name', this, function () {
   // module code
   // return the object to be exported
});

许多转换器和构建工具会自动生成此包装器.