JavaScript-Modulmuster mit Beispiel [geschlossen]

Ich kann keine zugänglichen Beispiele finden, die zeigen, wie zwei (oder mehr) verschiedene Module miteinander verbunden sind, um zusammenzuarbeiten.

Ich möchte also fragen, ob jemand Zeit hat, ein Beispiel zu schreiben, in dem erklärt wird, wie Module zusammenarbeiten.

Um sich dem modularen Entwurfsmuster zu nähern, müssen Sie zuerst dieses Konzept verstehen:

Sofort aufgerufener Funktionsausdruck (IIFE):

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

Es gibt zwei Möglichkeiten, wie Sie die Funktionen verwenden können. 1. Funktionsdeklaration 2. Funktionsausdruck.

Hier verwenden Sie Funktionsausdruck.

Was ist ein Namespace? Wenn wir nun den Namespace zum obigen Code hinzufügen, dann

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

Was ist Schließung in JS?

Wenn wir also eine Funktion mit einem variablen Bereich / innerhalb einer anderen Funktion deklarieren (in JS können wir eine Funktion innerhalb einer anderen Funktion deklarieren!), Wird dieser Funktionsumfang immer gezählt. Dies bedeutet, dass jede Variable in der äußeren Funktion immer gelesen wird. Die globale Variable (falls vorhanden) mit demselben Namen wird nicht gelesen. Dies ist auch eines der Ziele der Verwendung eines modularen Entwurfsmusters zur Vermeidung von Namenskonflikten.

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

Jetzt werden wir diese drei oben erwähnten Konzepte anwenden, um unser erstes modulares Entwurfsmuster zu definieren:

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 für den obigen Code.

Ziel ist es, die variable Zugänglichkeit vor der Außenwelt zu verbergen.

Hoffe das hilft. Viel Glück.

Ich würde wirklich jedem empfehlen, der dieses Thema betritt, um Addy Osmanis kostenloses Buch zu lesen:

"Lernen von JavaScript-Entwurfsmustern".

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

Dieses Buch hat mir sehr geholfen, als ich anfing, wartbareres JavaScript zu schreiben, und ich verwende es immer noch als Referenz. Schauen Sie sich seine verschiedenen Modulmusterimplementierungen an, er erklärt sie sehr gut.

Ich dachte, ich würde die obige Antwort erweitern, indem ich darüber spreche, wie Sie Module in eine Anwendung einfügen würden. Ich hatte darüber im Doug Crockford-Buch gelesen, aber als Neuling in Javascript war alles noch ein bisschen mysteriös.

Ich komme aus ac # Hintergrund, habe also eine Terminologie hinzugefügt, die ich von dort aus nützlich finde.

Html

Sie haben eine Art HTML-Datei der obersten Ebene. Es ist hilfreich, sich dies als Ihre Projektdatei vorzustellen. Jede Javascript-Datei, die Sie dem Projekt hinzufügen, möchte darauf eingehen. Leider erhalten Sie dafür keine Tool-Unterstützung (ich verwende IDEA).

Sie müssen dem Projekt Dateien mit folgenden Skript-Tags hinzufügen:

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

Es scheint, dass das Reduzieren der Tags dazu führt, dass Dinge fehlschlagen - obwohl es so aussieht, als ob XML wirklich etwas mit verrückteren Regeln ist!

Namespace-Datei

MasterFile.js

myAppNamespace = {};

das ist es. Dies dient nur zum Hinzufügen einer einzelnen globalen Variablen, in der der Rest unseres Codes leben soll. Sie können hier (oder in eigenen Dateien) auch verschachtelte Namespaces deklarieren.

Modul (e)

SomeComponent.js

myAppNamespace.messageCounter= (function(){

    var privateState = 0;

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

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

Wir weisen hier einer Variablen in unserer Anwendung eine Nachrichtenzählerfunktion zu. Es ist eine Funktion, die eine Funktion zurückgibt, die wir sofort ausführen .

Konzepte

Ich denke, es ist hilfreich, sich die oberste Zeile in SomeComponent als den Namespace vorzustellen, in dem Sie etwas deklarieren. Die einzige Einschränkung besteht darin, dass alle Ihre Namespaces zuerst in einer anderen Datei angezeigt werden müssen - es handelt sich lediglich um Objekte, die von unserer Anwendungsvariablen verwurzelt werden.

Ich habe nur kleine Schritte mit diesem zur Zeit genommen (ich bin Refactoring einige normale Javascript aus einer extjs App , damit ich es testen kann) , aber es scheint ganz nett , wie Sie kleine Funktionseinheiten unter Vermeidung der Morast definieren : ‚Diese ' .

Sie können diesen Stil auch verwenden, um Konstruktoren zu definieren, indem Sie eine Funktion zurückgeben, die ein Objekt mit einer Sammlung von Funktionen zurückgibt und es nicht sofort aufruft.

Hier https://toddmotto.com/mastering-the-module-pattern finden Sie das Muster ausführlich erklärt. Ich möchte hinzufügen, dass das zweite an modularem JavaScript darin besteht, Ihren Code in mehrere Dateien zu strukturieren. Viele Leute raten Ihnen hier vielleicht, sich für AMD zu entscheiden, aber ich kann aus Erfahrung sagen, dass Sie aufgrund zahlreicher HTTP-Anfragen irgendwann mit einer langsamen Seitenantwort enden werden. Der Ausweg ist die Vorkompilierung Ihrer JavaScript-Module (eines pro Datei) in eine einzelne Datei gemäß dem CommonJS-Standard. Schauen Sie sich hier Beispiele an http://dsheiko.github.io/cjsc/

Sie finden Module Pattern JavaScript hier http://www.sga.su/module-pattern-javascript/