Was ist js-Modularisierung? Einführung in die js-Modularisierung

Was ist js-Modularisierung? JS-Modularität ist kein Konzept, das von Anfang an existierte, aber die Anforderungen an das Engineering werden immer höher und der Bedarf an der Entwicklung von JS-Modulen ist entstanden. Daher geht es um die Entwicklung von js-Modulen. Werfen wir einen Blick auf einige Beispiele der JavaScript-Modularisierung.

Modulare Entwicklungsgeschichte

JS hatte zu Beginn kein Konzept der Modularität, bis das Front-End Daten vom Back-End anfordern konnte komplexer und es traten viele Probleme auf. Problem: Globale Variablen, Funktionsnamenskonflikte und Abhängigkeiten sind schwierig zu handhaben.
Zu dieser Zeit wurden Unterausführungsfunktionen verwendet, um diese Probleme zu lösen. Beispielsweise verwendete die klassische JQuery anonyme selbstausführende Funktionen, um den Code zu kapseln, und montierte sie alle unter der globalen Variablen JQuery.

CommonJs

CommonJs wird über nodeJs entwickelt. Jede js-Datei ist ein Modul und jedes Modul hat einen separaten Bereich. Das Modul verwendet module.exports als Export und gibt ein Objekt aus. Verwenden Sie die Methode require, um die Datei zu lesen und ihr internes module.exports-Objekt zurückzugeben.

Das Problem mit CommonJs besteht darin, dass es synchron geladen wird, was auf der Serverseite normal ist, aber in einem Browser voller Asynchronität nicht zutrifft. Über die Anpassung an den Browser war die Community gespalten.

AMD

AMD ist Asynchronous Module Definition. Der chinesische Name bedeutet asynchrone Moduldefinition. Es handelt sich um eine Spezifikation für die modulare Entwicklung auf der Browserseite. Da sie von JavaScript nicht nativ unterstützt wird, hat der Autor von AMD persönlich RequireJS implementiert, das der AMD-Spezifikation entspricht.
Die AMD-Spezifikation legt fest, dass die globale Funktion define zum Definieren des Moduls verwendet wird. Die Verwendung lautet define(id, dependencies,factory); von dem das Modul abhängt, und die Fabrik ist eine anonyme Funktion, die die Logik des Moduls enthält.
Das Unternehmen verwendet derzeit AMD-Spezifikationen.
Zum Beispiel:

//main.jsrequire(['a', 'b'], function(a, b){
     console.log('main.js执行');
     a.hello();
     $('#b').click(function(){
          b.hello();
     });
})

Das Problem mit requireJs besteht darin, dass beim Hinzufügen zu einem Modul alle abhängigen Module des Moduls vorab geladen werden, diese Abhängigkeiten jedoch möglicherweise nicht zu Beginn verwendet werden. Es ist auch sehr mühsam, gleichzeitig eine lange Liste von Abhängigkeiten zu schreiben. Was noch besser ist, ist, dass AMD die drei Funktionen „require“, „exprots“ und „module“ in commonJs beibehält. Sie müssen sie nicht alle in Abhängigkeiten schreiben, sondern können sie bei Bedarf mit „require“ einführen.

CMD

Da requirejs alle oben genannten uneleganten Aspekte aufweist, muss es neue Dinge geben, um es zu verbessern. Der Autor von seajs ist ein inländischer Taobao-Frontmann. Ende Vorreiter. seajs berücksichtigt vollständig die Modules/Wrappings-Spezifikation und verwendet keine Rückrufe zum Schreiben von Modulen wie requirejs. Und es folgt nicht vollständig der Modules/Wrappings-Spezifikation, um Module zu definieren, sondern verwendet dieselbe Definition wie requirejs. Möglicherweise bevorzugt der Autor diesen Namen. (Dies führt jedoch mehr oder weniger zu Verwirrung im Verständnis der Leute.) Die Methode zum Definieren eines Moduls mithilfe von Seajs ist wie folgt:

//main.jsdefine(function(require, exports, module){
     console.log('main.js执行');     var a = require('a');
     a.hello();    
     $('#b').click(function(){
          var b = require('b');
          b.hello();
     });

});

Beim Definieren eines Moduls ist es nicht erforderlich, das Abhängigkeitsarray aufzulisten Formale Parameter müssen in der Factory-Funktion require, exports, module übergeben werden. Anschließend wird die toString-Methode der Factory-Funktion aufgerufen, ein regelmäßiger Abgleich mit dem Inhalt der Funktion durchgeführt und die Abhängigkeiten mithilfe der übereinstimmenden require-Anweisung analysiert. Dadurch wird der Code im CommonJS-Stil wirklich realisiert.

Der Unterschied zwischen AMD und CMD

Der offensichtlichste Unterschied zwischen AMD und CMD ist der unterschiedliche Umgang mit Abhängigkeiten beim Definieren von Modulen
AMD befürwortet die Vorabhängigkeit, die beim Definieren von Modulen erforderlich ist Deklarieren Sie die Module, von denen es abhängt
CMD empfiehlt nahegelegene Abhängigkeiten und erfordert nur, wenn ein bestimmtes Modul verwendet wird
Dieser Unterschied hat seine eigenen Vor- und Nachteile, es handelt sich lediglich um eine syntaktische Lücke, und sowohl requireJS als auch SeaJS unterstützen sich gegenseitig . Schreiben eines

Zukunftsorientierten ES6-Modulstandards

ES6 berücksichtigt Modularität und verwendet Import und Export, wird jedoch derzeit von Browsern nicht unterstützt und dieser Standard ist nur ein Prototyp.

Verwandte Empfehlungen:

Kapseln Sie eine Methode in js – Modularisierung

Erste Kontaktaufnahme mit JS require.js Modular Tools

Das obige ist der detaillierte Inhalt vonWas ist js-Modularisierung? Einführung in die js-Modularisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!