构建一个 JavaScript 库，为什么要这样使用 IIFE? [英] Building a JavaScript library, why use an IIFE this way?

问题描述

我注意到很多图书馆使用下面的这种风格来定义他们的图书馆.我还注意到第一个自调用函数与 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";?窗口:未定义.
• 最后，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?

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