Welche Methoden gibt es, um die JS-Modularität zu implementieren? Erläuterung der js-Modularisierung

In diesem Artikel erfahren Sie, welche Implementierungsmethoden für die JS-Modularisierung gelten. Die Erklärung der js-Modularisierung hat einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich ist.

1. Hintergrund von CommonJS
: Am Anfang dachten alle, dass JS ein Kinderspiel sei und nutzlos sei. Die offiziell definierte API könne nur browserbasierte Anwendungen erstellen ist, dass ich es nicht länger ertragen kann, CommonJS API definiert viele APIs, die von gängigen Anwendungen (hauptsächlich Nicht-Browser-Anwendungen) verwendet werden, und schließt so diese Lücke. Das ultimative Ziel besteht darin, eine Standardbibliothek bereitzustellen, die Python, Ruby und Java ähnelt. In diesem Fall können Entwickler CommonJS verwenden API zum Schreiben von Anwendungen, die dann auf verschiedenen JavaScript-Interpretern und verschiedenen Hostumgebungen ausgeführt werden können. Im Jahr 2009 gründete der amerikanische Programmierer Ryan Dahl hat das Projekt node.js erstellt, das die JavaScript-Sprache für die serverseitige Programmierung verwendet. Dies markiert die offizielle Geburtsstunde der „modularen Javascript-Programmierung“. Denn um ehrlich zu sein: In einer Browserumgebung ist das Fehlen von Modulen kein großes Problem. Schließlich ist die Komplexität von Webprogrammen begrenzt, aber auf der Serverseite müssen Module vorhanden sein, um mit dem Betriebssystem und anderen Anwendungen zu interagieren. sonst gibt es keine Möglichkeit.

Spezifische Vertreter: nodeJs, webpack
Prinzip: Der grundlegende Grund, warum Browser nicht mit CommonJS kompatibel sind, ist der Fehlen von vier Node.js-Umgebungsvariablen (Modul, Exporte, Require, Global). Solange diese vier Variablen bereitgestellt werden können, kann der Browser das CommonJS-Modul laden.
Einfache Implementierung:

var module = {  
exports: {}
};
(function(module, exports) {  
exports.multiply = function (n) { 
return n * 1000 
};
}(module, module.exports))
var f = module.exports.multiply;
f(5) // 5000

Der obige Code stellt zwei externe Variablen, module und exports, für eine Funktion zur sofortigen Ausführung bereit. Der Ausgabewert des Moduls wird in module.exports platziert , wodurch das Modul realisiert wird.

2 Aufgrund einer großen Einschränkung wurden jedoch serverseitige Module erstellt Die Spezifikation gilt nicht für Browserumgebungen. var math = require('math'); math.add(2, 3);require ist synchron. Dies stellt für die Serverseite kein Problem dar, da alle Module auf der lokalen Festplatte gespeichert sind und synchron geladen werden können. Die Wartezeit ist die Lesezeit der Festplatte. Für Browser stellt dies jedoch ein großes Problem dar, da die Module auf der Serverseite platziert sind und die Wartezeit von der Geschwindigkeit des Netzwerks abhängt. Es kann lange dauern und der Browser befindet sich in einem „angehaltenen“ Zustand . Module auf der Browserseite können kein „synchrones Laden“ (synchron), sondern nur „asynchrones Laden“ (asynchron) verwenden. Dies ist der Hintergrund für die Geburt der AMD-Spezifikation.

Spezifische Darstellung: RequireJS

Verwendungsbeispiel: require([dependencies], function(){}); Die Funktion require() akzeptiert zwei Parameter.
Der erste Parameter ist ein Array, das die Module angibt, von denen es abhängt. Der zweite Parameter ist eine Rückruffunktion. Wenn alle zuvor angegebenen Module erfolgreich geladen wurden, wird dies der Fall sein aufgerufen werden. Die geladenen Module werden als Parameter an die Funktion übergeben, sodass diese Module innerhalb der Rückruffunktion

// 定义模块 myModule.js
define(['dependency'], function(){    
var name = 'Byron';    
function printName(){        
console.log(name);    
}
    return {        
    printName: printName    
    };
    });
// 加载模块
require(['myModule'], function (my){　 
my.printName();
});

verwendet werden können, um Hintergrund zu generieren : CMD ist die Common Module Definition. Die CMD-Spezifikation wurde in China entwickelt. Genau wie AMD die Browser-Implementierung SeaJS hat, sind die Probleme, die SeaJS lösen muss, jedoch in der Moduldefinition . Der Zeitpunkt des Ladens von Methoden und Modulen (man kann sagen, dass sie ausgeführt und analysiert werden) ist unterschiedlich
Spezifische Darstellung: Sea.js
Verwendungsbeispiel: Factory ist eine Funktion Es gibt drei Parameter: function(require, exports, module)require ist eine Methode, die die Modul-ID als einzigen Parameter akzeptiert und zum Abrufen der von anderen Modulen bereitgestellten Schnittstellen verwendet wird: require(id)
exports ist ein Objekt, das zum Exportieren verwendet wird. Stellt eine Modulschnittstelle bereit. Modul ist ein Objekt, das einige Attribute und Methoden speichert, die mit dem aktuellen Modul verknüpft sind.

// 定义模块  myModule.js
define(function(require, exports, module) {  
var $ = require('jquery.js')  
$('p').addClass('active');});
// 加载模块
seajs.use(['myModule.js'], 
function(my){
});

Befolgen Sie die Spezifikationen: RequireJS folgt der AMD-Spezifikation (Asynchronous Module Definition) und Sea.js folgt der CMD ( (Common Module Definition)-Spezifikation. Der Unterschied in den Spezifikationen führt zu unterschiedlichen APIs zwischen den beiden
4

Hintergrund: Vor Es6* gab es in JavaScript kein Modulsystem. Es war unmöglich, ein großes Programm in kleine, voneinander abhängige Dateien aufzuteilen und diese dann auf einfache Weise zusammenzusetzen Entwicklung Große und komplexe Projekte stellen erhebliche Hürden dar. Um das Problem des Ladens von Modulabhängigkeiten zu lösen, werden AMD, CMD und COMMONJS für den Client verwendet (es gibt auch Unterschiede zwischen den beiden, die später erläutert werden), und COMMONJS wird für den Server verwendet Nach dem Aufkommen von es6 ist das Modul eine definierte Funktion und die Implementierung ist recht einfach. Es kann die vorhandenen CommonJS- und AMD-Spezifikationen vollständig ersetzen und zu einer universellen Modullösung für Browser und Server werden.
Verwendungsbeispiele: export (throw) import (introduction) export default (wenn andere Module dieses Modul laden, kann der Importbefehl einen beliebigen Namen für die anonyme Funktion angeben)

Verwandte Empfehlungen :

JS-Modularisierung-RequireJS

Javascript-Modularprogrammierung (Nachdruck), Javascript-Modularisierung_PHP-Tutorial

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es, um die JS-Modularität zu implementieren? Erläuterung der js-Modularisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!