构建JavaScript库，为什么要以这种方式使用IIFE?

问题描述

我注意到很多图书馆在下面使用这种样式来定义他们的图书馆.我还注意到，第一个自我调用功能与Require.js或AMD系统有关，它们始终以工厂为参数，我将更多地研究Require.js，始终将其引入Browserify.

I have noticed a lot of libraries use this style below to define their library. I also notice that the first self invoking function has something to do with Require.js or AMD systems, they always have factory as an argument, I will look more into Require.js, always been into Browserify.

为什么将主代码传递到括号内第一个自调用函数的末尾，这是闭包还是仅被视为匿名函数，我将对此进行更深入的研究.这有什么好处?看来作者在闭包内部传递了string，this和callback.

Why is the main code passed into the end of the first self invoking function inside parentheses, is this is a closure, or just considered an anonymous function, I will dig deeper into both. What are the benefits to this? It looks like inside the closure the author passes a string, this, and a callback.

在下面的示例中，这会为我的图书馆提供一种干净安全的方法来全球化主对象吗?

Will this give my library a clean safe way to globalize the main object in this example below 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架构，我不想听到自己愚蠢或以前做过的事情，我想挑战自己并学习.

I am trying to dig really deep into JavaScript and create my own small MVC architecture, I don't want to hear I am silly or its been done before, I want to challenge myself and learn.

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

If there are any great resources for creating a JavaScript library or even better an MVC library I would love to know.

推荐答案

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

This code pattern is called Universal Module Definition (UMD). It allows you to make your JavaScript library usable in different environments. It provides three ways of defining modules:

1. 异步模块定义(AMD)，由 RequireJS 和 Dojo工具包.

1. Asynchronous Module Definition (AMD), implemented by RequireJS and Dojo Toolkit.

define( [], factory );

CommonJS — NodeJS模块.

CommonJS — NodeJS modules.

module.exports = factory();

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

Assigning module to the global object, for example window in browsers.

root[globalName] = factory();

IIFE具有三个参数:globalName，root和factory.

The IIFE has three parameters: globalName, root and factory.

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

• globalName is the name of your module. It applies only to the third way of defining a module, i.e. assigning your module object to the global variable. For example, if you set this parameter to "myAwesomeModule" and use the code in browser (without AMD), you can access your module using myAwesomeModule variable.
• root is the name of global object. Obviously, it also applies only to the third way of defining a module. Usually this is passed as this parameter, because this is a reference to window in browser. However, this doesn't work in strict mode. If you want your code to work in strict mode, you can replace this with typeof window !== "undefined" ? window : undefined.
• Finally, factory is an anonymous function, which should return your module as object.

另请参阅:

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

• What is the (function() { } )() construct in JavaScript?
• What Is AMD, CommonJS, and UMD?

这篇关于构建JavaScript库，为什么要以这种方式使用IIFE?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！