Heim > Web-Frontend > js-Tutorial > Verstehen Sie die Front-End-Modularität (CommonJs, AMD und CMD)

Verstehen Sie die Front-End-Modularität (CommonJs, AMD und CMD)

怪我咯
Freigeben: 2017-04-05 13:50:15
Original
4120 Leute haben es durchsucht

Es gibt drei Front-End-Modulspezifikationen: CommonJs, AMD und CMD.

CommonJs kommt serverseitig zum Einsatz, AMD und CMD kommen in der Browserumgebung zum Einsatz.

AMD ist die standardisierte Ausgabe von Moduldefinitionen während des Promotion-Prozesses von RequireJS.

CMD ist die standardisierte Ausgabe der Moduldefinition während des Promotion-Prozesses von SeaJS.

AMD: Frühe Ausführung (asynchrones Laden: Abhängigkeiten werden zuerst ausgeführt) + verzögerte Ausführung

CMD: Verzögerte Ausführung (zum Laden ausführen, in der richtigen Reihenfolge ausgeführt)

Modul

Funktion Schreiben

function f1(){
    //...
}
function f2(){
    //...
}
Nach dem Login kopieren

Ein Modul ist eine Datei, die eine bestimmte Funktion implementiert. Es besteht darin, mehrere Funktionen in einer Datei zusammenzufassen . ein Modul. Laden Sie diese Datei bei Bedarf und rufen Sie die darin enthaltenen Funktionen auf.

Dadurch wird jedoch die globale Variable verschmutzt, es gibt keine Garantie dafür, dass es keinen Variablennamen-Konflikt mit anderen Modulen gibt, und es besteht keine Beziehung zwischen den Modulen Mitglieder.

 ObjektSchreiben

var module = {
  star : 0,
  f1 : function (){
    //...
  },
  f2 : function (){
    //...
  }
};
module.f1();
module.star = 1;
Nach dem Login kopieren

Das Modul wird als Objekt geschrieben und die Modulmitglieder werden durch Aufrufen des ObjektsAttribut< gekapselt 🎜>, Sie können auf das Modul zugreifen. Es macht aber auch die Modulmitglieder verfügbar, und der interne Status des Moduls kann von der Außenwelt geändert werden.

Funktion sofort ausführen

var module = (function(){
    var star = 0;
    var f1 = function (){
      console.log(&#39;ok&#39;);
    };
    var f2 = function (){
      //...
    };
       return {
          f1:f1,
          f2:f2
       };
  })();
module.f1();  //ok
console.log(module.star)  //undefined
Nach dem Login kopieren
Extern kein Zugriff auf interne private Variablen

CommonJs

CommonJS ist eine Spezifikation für serverseitige Module, die gefördert und verwendet wird von Node. Aufgrund der Komplexität der serverseitigen Programmierung ist es schwierig, ohne Module mit dem Betriebssystem und anderen Anwendungen zu interagieren. Die Verwendung ist wie folgt:

math.js
exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
      sum += args[i++];
    }
    return sum;
};

increment.js
var add = require(&#39;math&#39;).add;
exports.increment = function(val) {
    return add(val, 1);
};

index.js
var increment = require(&#39;increment&#39;).increment;
var a = increment(1); //2
Nach dem Login kopieren
Gemäß der CommonJS-Spezifikation:

  • Eine einzelne Datei ist ein Modul. Jedes Modul hat einen separaten Bereich, d. h. innerhalb des Moduls definierte Variablen können von anderen Modulen nicht gelesen werden, es sei denn, sie sind als Attribute des globalen Objekts definiert.

  • Der beste Weg, Modulvariablen zu exportieren, ist die Verwendung des module.exports-Objekts.

  • Laden Sie das Modul mit der Methode require, die eine Datei liest und ausführt und das module.exports-Objekt in der Datei zurückgibt.

Schauen Sie Wenn Sie sich den obigen Code genau ansehen, werden Sie feststellen, dass require synchron ist. Das Modulsystem muss den Inhalt der Moduldatei synchron lesen, kompilieren und ausführen, um die Modul-

-Schnittstelle zu erhalten.

Allerdings bringt dies browserseitig viele Probleme mit sich.

Auf der Browserseite ist die beste und einfachste Möglichkeit, JavaScript zu laden, das
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage