Dieser Artikel stellt hauptsächlich die Analyse der JS-Modularisierung vor, die einen gewissen Referenzwert hat. Jetzt können Freunde in Not darauf zurückgreifen.

1. Was sind Module und Modularisierung?

2. Warum modularisieren?

3. Vorteile der Modularität

• Vermeiden Sie Namenskonflikte (Namespace-Verschmutzung reduzieren)

• Bessere Trennung, bedarfsgesteuertes Laden

• Höhere Wiederverwendbarkeit

• Hohe Wartbarkeit

4. Skript zum Laden der Seiteneinführung

2. Modular Spezifikation

1. CommonJS (Knoten wird gemäß dieser Spezifikation geschrieben)

Hinweis:

Auf der Serverseite: Das Modul wird zur Laufzeit synchron geladen

Auf der Browserseite: Das Modul muss vorab kompiliert und gepackt werden Verarbeitung

Grundlegende Syntax:

Moduleinführung: require(xxx)

Modul von Drittanbietern: xxx ist der Modulname

Benutzerdefiniertes Modul: xxx ist der Moduldateipfad

Offengelegtes Modul: exports.xxx = value und module.exports = value

Das Wesentliche des exponierten Moduls ist das Exports-Objekt

Exports selbst ist ein leeres Objekt exports.xxx = Wert besteht darin, dem Exports-Objekt Attribute oder Methoden hinzuzufügen

Module.exports = value überschreibt direkt das ursprüngliche leere Objekt mit dem neuen Wertobjekt

Implementierung:

Serverseitig Implementierung: Node .js

Browserseitige Implementierung: Browserify (CommonJS browserseitiges Paketierungstool)

Browserify herunterladen und installieren

Global: npm install browserify -g

Lokal: npm install browserify --save-dev

Definieren Sie den Modulcode (js-Dateicode und stellen Sie den entsprechenden Inhalt bereit)

Einführung von Modulen Verwenden Sie require in app.js, um Module einzuführen, aber der Browser erkennt die require-Methode nicht, sodass js benötigt wird gepackt und verarbeitet werden

Geben Sie browserify js/src/app.js -o js/dist/bundle.js im Terminal im Stammverzeichnis (js/src/app.js) ein Die Quelldatei js/dist/bundle.js wird gepackt und ausgegeben /javascript" src="js/dist/bundle.js "> (Was der Browser tatsächlich ausführt, ist die vom Paket generierte Datei)

2. AMD

Speziell Wird für browserseitige Modularisierungsspezifikationen verwendet, das Laden des Moduls erfolgt asynchron

Grundlegende Syntax:

Definieren Sie exponierte Module:

　//定义没有依赖的模块：
　　define(function(){
　　　　return 模块
　　})
　　//定义有依赖的模块：
　　define(['module1','module2'],function(m1,m2){
　　　　return 模块
　　})

require(['module1','module2'],function(m1,m2){
　　　　使用m1/m2
　　})

Nach dem Login kopieren

Implementierung (Browserseite):

Require.js

3. CMD (verstehen)

Hinweis: Speziell auf der Browserseite verwendet, erfolgt das Laden des Moduls asynchron , und das Modul wird nur geladen und ausgeführt, wenn es verwendet wird

Grundlegende Syntax:

Exponiertes Modul definieren:

　//定义没有依赖的模块：
　　define(function(require,exports,module){
　　　　exports.xxx = value
　　　　module.exports = value
　　})
　　//定义有依赖的模块：
　　define(function(require,exports,module){
　　　　//引入依赖模块(同步)
　　　　var module2 = require("./module2")
　　　　//引入依赖模块（异步）
　　　　require.async("./module3",function(m3){
　　　　})
　　　　//暴露模块
　　　　exports.xxx = value
　　})

Nach dem Login kopieren

Einführung mit Modul:

require(function(require){
　　　　var m1 = require('./module1')
　　　　var m4 = require('./module4')
　　　　m1.show()
　　　　m4.show()
　　})

Nach dem Login kopieren

Implementierung (Browserseite): Sea.js

4, ES6

Hinweis: Abhängige Module müssen kompiliert und gepackt werden

Syntax:

Modul exportieren: export xxx

Importmodul: xxx von „URL“ importieren

Seiteneinführung

Implementierung (Browserseite):

Verwenden Sie Babel, um ES6 in ES5-Code zu kompilieren

Verwenden Sie Browserify, um js zu kompilieren und zu verpacken

Das Obige ist Ich hoffe, dass der gesamte Inhalt dieses Artikels für das Lernen aller hilfreich ist. Weitere verwandte Inhalte finden Sie im PHP Chinese Net.

Analyse des Javascript-Ladens

Analyse der sofortigen Ausführungsfunktion von Javascript

Das obige ist der detaillierte Inhalt vonAnalyse der JS-Modularität. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!