构建JavaScript库,为什么要这样使用IIFE?

构建JavaScript库,为什么要这样使用IIFE?,javascript,model-view-controller,umd,Javascript,Model View Controller,Umd,我注意到许多库使用下面的样式来定义它们的库。我还注意到,第一个自调用函数与Require.js或AMD系统有关,它们总是以工厂为参数,我将更深入地研究Require.js,始终是Browserify 为什么主代码被传递到括号内第一个自调用函数的末尾,这是一个闭包,还是仅仅被认为是一个匿名函数,我将深入研究这两个函数。这有什么好处?它看起来像是在闭包内部,作者传递了一个字符串,这个,以及一个回调 这是否会为我的库提供一种干净安全的方式来全球化下面这个示例中的主要对象请 (function( glo

我注意到许多库使用下面的样式来定义它们的库。我还注意到,第一个自调用函数与Require.js或AMD系统有关,它们总是以工厂为参数,我将更深入地研究Require.js,始终是Browserify

为什么主代码被传递到括号内第一个自调用函数的末尾,这是一个闭包,还是仅仅被认为是一个匿名函数,我将深入研究这两个函数。这有什么好处?它看起来像是在闭包内部,作者传递了一个
字符串
这个
,以及一个
回调

这是否会为我的库提供一种干净安全的方式来全球化下面这个示例中的主要对象

(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库,我很想知道。

这个代码模式叫做(UMD)。它允许您在不同的环境中使用JavaScript库。它提供了三种定义模块的方法:

  • (AMD),由和实施

    定义([],工厂)

  • -NodeJS模块

    module.exports=factory()

  • 将模块分配给全局对象,例如浏览器中的
    window

    root[globalName]=factory()

  • IIFE有三个参数:
    globalName
    root
    factory

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

      • 这是(UMD)的一个例子。这是一种使JS模块与三种流行的JS模块规范兼容的技术:

      • (AMD,由Require.js使用)

      • (Node.js生态系统)

      • 全局导出(例如,在浏览器中的
        窗口上

      • 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
        });
        
        许多Transpiler和构建工具自动生成此包装器

        module.exports = object;
        
        global['name'] = object;
        
        (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
        });