Wie versteht man die JavaScript-Modularität?

Das Verständnis der JavaScript-Modularität ist: 1. Modulmodus, der durch die Merkmale des Abschlusses einen neuen Bereich eröffnet und so Konflikte bei der Benennung globaler Bereiche und Sicherheitsprobleme lindert. 2. CommonJS-Modus, der hauptsächlich in der Knotenentwicklung verwendet wird Die Datei ist ein Modul und jede Datei hat ihren eigenen Gültigkeitsbereich.

Das Verständnis der JavaScript-Modularität ist:

1. Modulmodus

Vor der Bildung modularer Spezifikationen verwendeten JS-Entwickler das Modulentwurfsmuster, um das Verschmutzungsproblem des globalen JS-Bereichs zu lösen. Das Modulmuster wurde ursprünglich als Methode zur Bereitstellung privater und öffentlicher Kapselung für Klassen im traditionellen Software-Engineering definiert. In JavaScript verwendet der Modulmodus anonyme, selbstaufrufende Funktionen (Abschluss), um sie zu kapseln, und unterscheidet private und öffentliche Mitglieder durch benutzerdefiniertes Offenlegungsverhalten.

let myModule = (function (window) {
    let moduleName = 'module'  // private
    // public
    function setModuleName(name) {
      moduleName = name
    }
    // public
    function getModuleName() {
      return moduleName
    }
    return { setModuleName, getModuleName }  // 暴露行为
  })(window)

Das obige Beispiel ist eine Möglichkeit, das Modulmuster zu schreiben. Es öffnet einen neuen Bereich durch die Schließungsfunktion, was die Probleme globaler Bereichsnamenskonflikte und der Sicherheit lindert. Allerdings konnten Entwickler es nicht zum Organisieren und Teilen von Code verwenden, sodass die darauf basierende modulare Spezifikation entstand.

Verwandte Lernempfehlungen: Javascript-Video-Tutorial

2. CommonJS

CommonJS wird hauptsächlich verwendet In der Node-Entwicklung ist jede Datei ein Modul und jede Datei hat ihren eigenen Bereich. Öffentliche Mitglieder über module.exports verfügbar machen. Zum Beispiel:

// 文件名：x.js
let x = 1;
function add() {
  x += 1;
  return x;
}
module.exports.x = x;
module.exports.add = add;

Darüber hinaus führt CommonJS Modulabhängigkeiten über require() ein, und die Anforderungsfunktion kann die integrierten Module, benutzerdefinierten Module und Module von Drittanbietern von Node einführen, z npm.

// 文件名：main.js
let xm = require('./x.js');
console.log(xm.x);  // 1
console.log(xm.add());  // 2
console.log(xm.x);   // 1

Aus dem obigen Code können wir ersehen, dass die Funktion „require“ x.js synchron lädt und eine Kopie des Ausgabeliterals „module.exports“ zurückgibt.

Manche Leute fragen sich vielleichtmodule.exports.x = x;Ist es nicht eine Aufgabe? Warum ist das so eine große Sache? Wir sagen, dass das Modulmuster der Eckpfeiler der modularen Spezifikation ist und dass CommonJS auch eine Kapselung des Modulmusters ist. Wir können den Modulmodus vollständig verwenden, um den oben genannten Codeeffekt zu erzielen:

let xModule = (function (){
  let x = 1;
  function add() {
    x += 1;
    return x;
  }
  return { x, add };
})();
let xm = xModule;
console.log(xm.x);  // 1
console.log(xm.add());  // 2
console.log(xm.x);   // 1

Durch das vom Modulmodus simulierte CommonJS-Prinzip können wir die Eigenschaften von CommonJS gut erklären. Da CommonJS den Rückgabewert des Selbstaufrufs der anonymen Funktion durch Zuweisung erhalten muss, ist die Anforderungsfunktion beim Laden des Moduls synchron. Allerdings schränkt der Lademechanismus von CommonJS-Modulen die Nutzung von CommonJS auf dem Client ein, da das synchrone Laden von CommonJS-Modulen über HTTP sehr zeitaufwändig ist.

3. AMD

// 定义AMD规范的模块
define([function() {
  return 模块
})

Die standardmäßig abhängigen Module werden asynchron geladen und die definierten Module werden als Rückruffunktionen verwendet auf der AMD Modulverwaltungstool-Bibliothek. Natürlich ist die AMD-Spezifikation nicht durch den Selbstaufruf anonymer Funktionen gekapselt. Wir können weiterhin das Prinzip der Schließung verwenden, um die privaten Mitglieder und öffentlichen Mitglieder des Moduls zu implementieren: require.js

define(['module1', 'module2'], function(m1, m2) {
  let x = 1;
  function add() {
    x += 1;
    return x;
  }
  return { add };
})

4 , CMD

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

empfiehlt Abhängigkeiten im Vordergrund, AMD empfiehlt Abhängigkeiten in der Nähe. CMD

define(function(require, exports, module) {
  //  同步加载模块
  var a = require('./a');
  a.doSomething();
  // 异步加载一个模块，在加载完成时，执行回调
  require.async(['./b'], function(b) {
    b.doSomething();
  });
  // 对外暴露成员
  exports.doSomething = function() {};
});
// 使用模块
seajs.use('path');

CMD integriert die Funktionen von CommonJS und AMD und unterstützt das synchrone und asynchrone Laden von Modulen. CMD führt ein abhängiges Modul nicht aus, sondern lädt es einfach herunter. Nachdem alle abhängigen Module geladen wurden, wird das entsprechende Modul nur dann ausgeführt, wenn die erforderliche Anweisung auftritt Die Module stimmen vollständig mit der Schreibreihenfolge überein. Daher gibt es keinen HTTP-Anforderungsprozess, wenn die Anforderungsfunktion in CMD das Modul synchron lädt.

5. ES6-Modul

ES6-Modularität ist keine Spezifikation mehr, sondern ein Merkmal der JS-Sprache. Mit der Einführung von ES6 sind

und AMD Geschichte. Im Vergleich zur modularen Spezifikation weist das ES6-Modul zwei Hauptmerkmale auf: CMD

• Die modulare Spezifikation gibt eine Kopie des Werts aus, während das ES6-Modul eine Referenz auf den Wert ausgibt.

• Die Modularisierungsspezifikation wird zur Laufzeit geladen und das ES6-Modul ist eine Ausgabeschnittstelle zur Kompilierungszeit.

Die Ausgabe der modularen Spezifikation ist ein Objekt, das erst nach Ausführung des Skripts generiert wird. Das ES6-Modul ist kein Objekt. Das ES6-Modul ist ein Multi-Objekt-Ausgabe- und Multi-Objekt-Lademodell. Im Prinzip handelt es sich bei der modularen Spezifikation um eine Kapselung des Selbstaufrufs anonymer Funktionen, während das ES6-Modul zum Aufrufen von Ausgabemitgliedern den Selbstaufruf anonymer Funktionen verwendet.

Das obige ist der detaillierte Inhalt vonWie versteht man die JavaScript-Modularität?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!