Pattern del modulo JavaScript con esempio [chiuso]

Non riesco a trovare esempi accessibili che mostrino come due (o più) moduli diversi sono collegati per lavorare insieme.

Quindi, vorrei chiedere se qualcuno ha il tempo di scrivere un esempio che spiega come i moduli lavorano insieme.

Per avvicinarsi al modello di progettazione modulare, è necessario prima comprendere questi concetti:

Espressione di funzione immediatamente richiamata (IIFE):

(function() {
      // Your code goes here 
}());

Esistono due modi per utilizzare le funzioni. 1. Dichiarazione di funzione 2. Espressione di funzione.

Qui stanno usando l'espressione della funzione.

Che cos'è lo spazio dei nomi? Ora, se aggiungiamo lo spazio dei nomi al pezzo di codice sopra, allora

var anoyn = (function() {
}());

Cos'è la chiusura in JS?

Significa che se dichiariamo una funzione con un ambito variabile / all'interno di un'altra funzione (in JS possiamo dichiarare una funzione all'interno di un'altra funzione!), Conterà sempre tale ambito funzione. Ciò significa che qualsiasi variabile nella funzione esterna verrà sempre letta. Non leggerà la variabile globale (se presente) con lo stesso nome. Questo è anche uno degli obiettivi dell'utilizzo del modello di progettazione modulare evitando conflitti di denominazione.

var scope = "I am global";
function whatismyscope() {
    var scope = "I am just a local";
    function func() {return scope;}
    return func;
}
whatismyscope()()

Ora applicheremo questi tre concetti che ho menzionato sopra per definire il nostro primo modello di progettazione modulare:

var modularpattern = (function() {
    // your module code goes here
    var sum = 0 ;

    return {
        add:function() {
            sum = sum + 1;
            return sum;
        },
        reset:function() {
            return sum = 0;    
        }  
    }   
}());
alert(modularpattern.add());    // alerts: 1
alert(modularpattern.add());    // alerts: 2
alert(modularpattern.reset());  // alerts: 0

jsfiddle per il codice sopra.

L'obiettivo è nascondere l'accessibilità variabile al mondo esterno.

Spero che questo ti aiuti. In bocca al lupo.

Consiglio vivamente a chiunque entri in questa materia di leggere il libro gratuito di Addy Osmani:

"Apprendimento dei modelli di progettazione JavaScript".

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

Questo libro mi ha aiutato immensamente quando stavo iniziando a scrivere JavaScript più gestibili e lo uso ancora come riferimento. Dai un'occhiata alle sue diverse implementazioni del modello di modulo, le spiega davvero bene.

Ho pensato di ampliare la risposta di cui sopra parlando di come potresti adattare i moduli in un'applicazione. Ne avevo letto nel libro di Doug Crockford, ma essendo nuovo a JavaScript era tutto ancora un po 'misterioso.

Vengo da ac # background quindi ho aggiunto un po 'di terminologia che trovo utile da lì.

html

Avrai qualche tipo di file html di livello superiore. Aiuta a pensare a questo come al tuo file di progetto. Ogni file javascript che aggiungi al progetto vuole entrare in questo, sfortunatamente non hai il supporto degli strumenti per questo (sto usando IDEA).

È necessario aggiungere file al progetto con tag di script come questo:

        <script type="text/javascript" src="app/native/MasterFile.js" /></script>
        <script type="text/javascript" src="app/native/SomeComponent.js" /></script>

Sembra che il collasso dei tag causi il fallimento delle cose - mentre sembra che xml sia davvero qualcosa con regole più folli!

File dello spazio dei nomi

MasterFile.js

myAppNamespace = {};

questo è tutto. Questo è solo per aggiungere una singola variabile globale per il resto del nostro codice in cui vivere. Puoi anche dichiarare spazi dei nomi nidificati qui (o nei loro file).

Modulo (s)

SomeComponent.js

myAppNamespace.messageCounter= (function(){

    var privateState = 0;

    var incrementCount = function () {
        privateState += 1;
    };

    return function (message) {
        incrementCount();
        //TODO something with the message! 
    }
})();

Quello che stiamo facendo qui è assegnare una funzione di contatore messaggi a una variabile nella nostra applicazione. È una funzione che restituisce una funzione che eseguiamo immediatamente .

concetti

Penso che aiuti a pensare alla linea superiore di SomeComponent come allo spazio dei nomi in cui stai dichiarando qualcosa. L'unica avvertenza è che tutti i tuoi spazi dei nomi devono apparire prima in qualche altro file: sono solo oggetti radicati dalla nostra variabile dell'applicazione.

Al momento ho fatto solo piccoli passi con questo (sto eseguendo il refactoring di un normale javascript da un'app extjs in modo da poterlo testare) ma sembra abbastanza bello in quanto è possibile definire piccole unità funzionali evitando il quagmire di 'questo ' .

È inoltre possibile utilizzare questo stile per definire i costruttori restituendo una funzione che restituisce un oggetto con una raccolta di funzioni e non lo chiama immediatamente.

Qui https://toddmotto.com/mastering-the-module-pattern puoi trovare lo schema spiegato in dettaglio. Vorrei aggiungere che la seconda cosa su JavaScript modulare è come strutturare il codice in più file. Molte persone possono consigliarti qui di andare con AMD, ma posso dire per esperienza che finirai per avere una risposta lenta della pagina a causa di numerose richieste HTTP. La via d'uscita è la pre-compilazione dei moduli JavaScript (uno per file) in un singolo file seguendo lo standard CommonJS. Dai un'occhiata agli esempi qui http://dsheiko.github.io/cjsc/

Puoi trovare il Pattern Pattern JavaScript qui http://www.sga.su/module-pattern-javascript/