Modularisierung ist eine gängige Best Practice für die Programmierung. Die Modularisierung von Programmen macht es für uns einfacher, den Code anderer Leute zu verwenden und beliebige Module für beliebige Funktionen zu laden, wodurch die Effizienz der Codenutzung verbessert und die Entwicklungsgeschwindigkeit erhöht wird.
Module sind wie Bausteine, mit denen wir Programme mit verschiedenen Funktionen und Stilen erstellen können. Was sind die Eigenschaften von Bausteinen? Klein und einfach. Ebenso sollten die Module in unserem Programm dies tun und sicherstellen, dass die von Ihnen erstellten Funktionen jeweils nur einen Auftrag ausführen, sodass andere Entwickler Ihren Code einfach debuggen und ändern können, ohne den gesamten Code durchsuchen zu müssen, um jeden Schritt herauszufinden. Welche Funktion erfüllt ein Codeblock? Nur wenn es so klein und einfach ist, kann es seine universelle Funktion erfüllen.
1. JavaScript-Modularisierungsmethode
1. Funktionskapselung
Der Umfang von JavaScript basiert auf Funktionen, sodass wir Funktionen als Module verwenden können.
function fn1(){
//code
}
function fn2(){
//code
}
Nachteile: Globale Variablen werden „verschmutzt“, es gibt keine Garantie dafür, dass Variablennamen nicht mit anderen Modulen in Konflikt geraten
2. Objekt
var myModule1 = {
fn1: function(){
//code
},
fn2: function(){
//code
}
}
Nachteile: Alle Modulmitglieder werden offengelegt und der interne Status kann von außen überschrieben werden
Sofort selbstausführende Funktion – empfohlen
var myModule = (function(){
function fn1(){
//code
},
function fn2(){
//code
},
return {
fn1: fn1,
fn2: fn2
};
})();
2. Klein und einfach
Schauen wir uns zum Thema „Klein und Einfach“ ein Beispiel an. Wir wollen nun beispielsweise eine Funktion schreiben, die einen neuen Link erstellt und eine Klasse für den Typ „mailto“-Hyperlink hinzufügen. Sie können dies tun:
function addLink(text, url, parentElement) {
var newLink = document.createElement('a');//创建a标签
newLink.setAttribute('href', url);//为a标签设置href属性
newLink.appendChild(document.createTextNode(text));//为a标签添加文本
if(url.indexOf("mailto:")==-1){
newLink.className = 'mail';
}
parentElement.appendChild(newLink);//将a标签添加到页面
}
Auf diese Weise zu schreiben funktioniert möglicherweise, Sie stellen jedoch möglicherweise fest, dass Sie keine anderen Funktionen hinzufügen dürfen, sodass diese Funktion nicht anwendbar ist. Je spezialisierter die Funktion ist, desto schwieriger ist es, sie auf verschiedene Situationen anzuwenden.
Die Art und Weise, wie die Funktionen hier geschrieben sind, entspricht nicht den Anforderungen der Modularität – eine Funktion macht nur eine Sache. Passen wir die Funktion an:
function createLink(text,url) {
var newLink = document.createElement('a');
newLink.setAttribute('href', url);
newLink.appendChild(document.createTextNode(text));
return newLink;
}
Die Funktion „createLink“ hat hier nur eine Aufgabe: Sie erstellt ein Tag, das der Seite hinzugefügt werden soll (klein und einfach), und gibt es zurück, damit wir eine solche Funktion immer dann aufrufen können, wenn wir einen Hyperlink erstellen müssen.
3. CommonJS
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 funktioniert die Programmierung nicht überhaupt möglich sein. Obwohl JavaScript schon seit so vielen Jahren im Web entwickelt wird, wurde die erste populäre modulare Spezifikation von serverseitigen JavaScript-Anwendungen eingeführt. Die CommonJS-Spezifikation wurde von NodeJS übernommen, was den offiziellen Auftritt der modularen JavaScript-Programmierung markierte.
Das Modulsystem von node.js ist gemäß der CommonJS-Spezifikation implementiert. In CommonJS gibt es eine globale Methode require() zum Laden von Modulen.
Modul laden:
var math = require('math');
Aufrufmodul:
math.add(2,3)
Die CommonJS-Spezifikation ist nicht auf die Browserumgebung anwendbar, da sie eine wesentliche Einschränkung aufweist. Im obigen Beispiel muss die zweite Zeile von math.add(2, 3) ausgeführt werden, nachdem math.js geladen wurde. und Da die Module alle auf der Serverseite platziert sind, kann es lange dauern, bis die Wartezeit von der Geschwindigkeit des Netzwerks abhängt.
Für die Serverseite gilt die CommonJS-Spezifikation, denn für die Serverseite werden alle Module auf der lokalen Festplatte gespeichert und können synchron geladen werden. Die Wartezeit ist die Lesezeit der Festplatte
4. Wie soll das Modul definiert und geladen werden?
AMD
Asynchrone Moduldefinition Asynchrone Moduldefinition, Hauptvertreter: require.js
Zweck:
(1) Implementieren Sie das asynchrone Laden von js-Dateien, um zu verhindern, dass die Webseite nicht mehr reagiert
(2) Verwalten Sie Abhängigkeiten zwischen Modulen, um das Schreiben und Warten von Code zu erleichtern.
1. Modul definieren
define(["./cart", "./inventory"], function(cart, inventory) {
//通过[]引入依赖
return {
color: "blue",
size: "large",
addToCart: function() {
inventory.decrement(this);
cart.add(this);
}
}
}
);
2. Modul laden
require( ["some/module", "my/module", "a.js", "b.js"],
function(someModule, myModule) {
//This function will be called when all the dependencies
//listed above are loaded. Note that this function could
//be called before the page is loaded.
//This callback is optional.
}
);
CMD
Gemeinsame Moduldefinition: Gemeinsame Moduldefinition, CMD-Spezifikation wird im Inland entwickelt. Hauptvertreter: sea.js
1. Modul definieren
define(function(require, exports, module) {
// 通过 require 引入依赖
var $ = require('jquery');
var Spinning = require('./spinning');
// 通过 exports 对外提供接口
exports.doSomething = ...
// 或者通过 module.exports 提供整个接口
module.exports = ...
});2. Modul laden
seajs.use("../static/hello/src/main")
Unterschied:
Bei abhängigen Modulen wird AMD im Voraus und CMD verzögert ausgeführt. Ab RequireJS 2.0 wurde es jedoch auch geändert, um die Ausführung verzögern zu können (die Verarbeitungsmethode ist je nach Schreibmethode unterschiedlich). CMD empfiehlt so faul wie möglich.
CMD fördert Abhängigkeiten in der Nähe, während AMD Abhängigkeiten im Vordergrund fördert.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.
