Costruire una libreria JavaScript, perché utilizzare un IIFE in questo modo?

Question

Ho notato che molte librerie usano questo stile qui sotto per definire la loro libreria. Ho anche notato che la prima funzione auto-invocazione ha qualcosa a che fare con i sistemi Require.js o AMD, hanno sempre factory come argomento, cercherò di approfondire Require.js, sempre in Browserify.

Perché il codice principale è passato alla fine della prima funzione auto-invocante tra parentesi, è una chiusura, o solo considerata una funzione anonima, scaverò più in profondità in entrambi. Quali sono i benefici a questo? Sembra che all'interno della chiusura l'autore superi uno string, this e uno callback.

Questo darà alla mia biblioteca un modo sicuro per globalizzare l'oggetto principale in questo esempio sotto 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(){ 

sto cercando di scavare davvero in profondità nel Javascript e creare la mia propria piccola architettura MVC, non voglio sentire io sono stupido o il suo stato fatto prima, voglio mettermi alla prova e imparare.

Se ci sono grandi risorse per creare una libreria JavaScript o anche una libreria MVC mi piacerebbe sapere.

Answer 1

Questo modello di codice si chiama Universal Module Definition (UMD). Ti permette di rendere la tua libreria JavaScript utilizzabile in diversi ambienti. Esso fornisce tre modi di moduli che definiscono:

1. Asynchronous Module Definition (AMD), attuati da RequireJS e Dojo Toolkit.

   define([], factory);

2. CommonJS — moduli NodeJS.

   module.exports = factory();

3. modulo all'oggetto globale, ad esempio window nei browser Assegnazione.

   root[globalName] = factory();

L'IIFE ha tre parametri: globalName, root e factory.

• globalName è il nome del modulo. Si applica solo al terzo modo di definire un modulo, ad esempio assegnando il tuo oggetto modulo alla variabile globale. Ad esempio, se si imposta questo parametro su "myAwesomeModule" e si utilizza il codice nel browser (senza AMD), è possibile accedere al modulo utilizzando la variabile myAwesomeModule.
• root è il nome dell'oggetto globale. Ovviamente, si applica anche solo al terzo modo di definire un modulo. Solitamente this viene passato come questo parametro, perché this è un riferimento a window nel browser. Tuttavia, questo doesn't work in strict mode. Se si desidera che il codice funzioni in modalità rigorosa, è possibile sostituire this con typeof window !== "undefined" ? window : undefined.
• Infine, factory è una funzione anonima, che dovrebbe restituire il modulo come oggetto.

Vedi anche:

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

Answer 2

Questo è un esempio di Universal Module Definition (UMD). Si tratta di una tecnica per rendere un modulo JS compatibili con i tre famosi moduli spec JS:

1. Asynchronous Module Definition (AMD, utilizzato da Require.js)

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

2. CommonJS (Node.js ecosistema)

   esportazioni

   module.exports = object; 
   

3. globali (ad esempio, sul window nel browser)

   global['name'] = object; 
   

UMD avvolge una funzione fabbrica responsabile della creazione l'oggetto da esportare e lo passa come un argomento a una funzione di immediatamente invocato espressione (IIFE), come nel frammento si è incollato. L'IIFE è responsabile della rilevazione dell'ambiente del modulo e dell'esportazione dell'oggetto creato dalla fabbrica in modo appropriato. Il motivo è il seguente:

(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 
}); 

Molti transpolester e strumenti di generazione generano automaticamente questo wrapper.