Построение библиотеки JavaScript, зачем использовать IIFE таким образом?

Question

Я заметил, что многие библиотеки используют этот стиль ниже, чтобы определить их библиотеку. Я также замечаю, что первая функция self invoking имеет какое-то отношение к системам 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

Этот шаблон кода называется Universal Module Definition (UMD). Это позволяет вам использовать вашу библиотеку JavaScript в разных средах. Она предусматривает три способа определения модулей:

1. Asynchronous Module Definition (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 в браузере. Однако, это doesn't work in strict mode. Если вы хотите, чтобы ваш код работал в строгом режиме, вы можете заменить this на typeof window !== "undefined" ? window : undefined.
• И, наконец, factory - анонимная функция, которая должна возвращать ваш модуль в качестве объекта.

Смотрите также:

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

Answer 2

Это является примером Universal Module Definition (UMD). Это метод, чтобы сделать модуль JS совместим с тремя популярными JS модуля спецификации:

1. Asynchronous Module Definition (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 
}); 

Многие транспилеры и инструменты сборки автоматически генерируют эту обертку.