1 Was ist modulare Programmierung
2 Warum sollten wir modularisieren
3 AMD
4 CommonJS
5 Zusammenfassung
Um eine Technologie zu verstehen, müssen Sie zunächst den Hintergrund der Technologie und die Probleme verstehen, die sie löst, und nicht nur wissen, wie man sie nutzt. Der vorherige Zustand bestand möglicherweise darin, nur um des Verständnisses willen zu verstehen, ohne die tatsächlichen Ursachen und Vorteile zu kennen. Fassen wir ihn also heute zusammen.
1 Was ist modulare Programmierung? In mehrere kleine Programmmodule unterteilt, erfüllt jedes kleine Programmmodul eine bestimmte Funktion, stellt die erforderlichen Verbindungen zwischen diesen Modulen her und vervollständigt die gesamte Funktion durch die gegenseitige Zusammenarbeit der Module.
Zum Beispiel Javas Import, C#s Verwendung. Mein Verständnis ist, dass durch modulare Programmierung verschiedene Funktionen getrennt werden können und die Änderung einer Funktion keine Auswirkungen auf andere Funktionen hat.
2 Warum Modularisierung? B.js wird ebenfalls zitiert. Wenn die Person, die C.js schreibt, nur weiß, dass B.js zitiert wird, wird sie A.js nicht zitieren, was zu einem Programmfehler führt und die Referenzreihenfolge der Dateien nicht falsch sein kann. Dies führt zu Unannehmlichkeiten beim Debuggen und Ändern des gesamten Codes.
Es gibt ein weiteres Problem, das zwei globale Variablen offenlegt, die leicht zu einer Verschmutzung globaler Variablen führen können
3 AMD
AMD ist Asynchronous Module Definition (asynchrone Moduldefinition). ). Das Modul wird asynchron geladen. Das Laden des Moduls hat keinen Einfluss auf die Ausführung nachfolgender Anweisungen.
Nehmen Sie die folgende Situation an:
// A.jsfunction sayWord(type){
if(type === 1){
console.log("hello");
}else if(type === 2){
console.log("world");
}
}// B.jsfunction Hello(){
sayWord(1);
}// C.jsHello()Nach dem Login kopieren
druckt zuerst
und dann
. Daher hat das Laden von AMD keinen Einfluss auf die nachfolgende Ausführung der Anweisung.
Was passiert, wenn es nicht asynchron geladen wird?
// util.jsdefine(function(){
return {
getFormatDate:function(date,type){
if(type === 1){ return '2018-08-9'
} if(type === 2){ return '2018 年 8 月 9 日'
}
}
}
})// a-util.jsdefine(['./util.js'],function(util){
return {
aGetFormatDate:function(date){
return util.getFormatDate(date,2)
}
}
})// a.jsdefine(['./a-util.js'],function(aUtil){
return {
printDate:function(date){
console.log(aUtil.aGetFormatDate(date))
}
}
})// main.jsrequire(['./a.js'],function(a){
var date = new Date()
a.printDate(date)
})
console.log(1);// 使用// <script src = "/require.min.js" data-main="./main.js"></script>Nach dem Login kopieren
Die folgenden Anweisungen müssen warten, bis sie geladen werden, bevor sie ausgeführt werden können Das Programm bleibt hier hängen. Daher kann der Browser Ressourcen nicht synchron laden, was auch der Hintergrund von AMD ist.
AMD ist eine Spezifikation für die modulare Entwicklung auf der Browserseite. Da diese Spezifikation ursprünglich nicht von JavaScript unterstützt wird, müssen bei der Entwicklung mithilfe der AMD-Spezifikation Bibliotheksfunktionen von Drittanbietern, nämlich RequireJS, eingeführt werden.
1Hauptprobleme, die durch RequireJS gelöst werden2018 年 8 月 9 日
Aktivieren Sie das asynchrone Laden von JS, um Seitenantwortverluste zu vermeiden
Abhängigkeiten zwischen verwalten Codes, was dem Schreiben und Warten von Code förderlich ist
Abhängigkeiten: ist ein Array von Modulen, von denen das definierte Modul abhängt
- factory: Initialisiert die Funktion oder das Objekt, die für das Modul ausgeführt werden sollen. Wenn es sich um eine Funktion handelt, sollte sie nur einmal ausgeführt werden. Wenn es sich um ein Objekt handelt, sollte dieses Objekt der Ausgabewert des Moduls sein. Spezifische Spezifikationen finden Sie bei AMD (chinesische Version)
Erstellen Sie beispielsweise ein Modul mit dem Namen „Alpha“, verwenden Sie require, exports und ein Modul mit dem Namen „Beta“:// ? 代表该参数可选
define(id?, dependencies?, factory);Nach dem Login kopieren
define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
exports.verb = function() {
return beta.verb(); //Or:
return require("beta").verb();
}
});Nach dem Login kopieren
Ein Modul ohne Abhängigkeiten, das Objekte direkt definieren kann:
define(["alpha"], function (alpha) {
return {
verb: function(){
return alpha.verb() + 2;
}
};
});Nach dem Login kopieren
Verwendung
AMD verwendet die require-Anweisung, um Module zu laden define({
add: function(x, y){
return x + y;
}
});Nach dem Login kopieren
Modul: ist ein Array, die darin enthaltenen Mitglieder sind die zu ladenden Module
Rückruf: Laden Sie die Rückruffunktion nach Erfolg
Das obige Beispiel zeigt die einfachste Möglichkeit, ein Hauptmodul zu schreiben. Standardmäßig geht require.js davon aus, dass sich Abhängigkeiten im selben Verzeichnis wie das Hauptmodul befinden.
Verwenden Sie die Methode
, um das Ladeverhalten des Moduls anzupassen.
steht an der Spitze des Hauptmoduls (main.js). Das paths-Attribut dieses Objekts gibt den Ladepfad jedes Moduls an das Basisverzeichnis (baseUrl)
// util.jsdefine(function(){
return {
getFormatDate:function(date,type){
if(type === 1){ return '2018-08-09'
} if(type === 2){ return '2018 年 8 月 9 日'
}
}
}
})// a-util.jsdefine(['./util.js'],function(util){
return {
aGetFormatDate:function(date){
return util.getFormatDate(date,2)
}
}
})// a.jsdefine(['./a-util.js'],function(aUtil){
return {
printDate:function(date){
console.log(aUtil.aGetFormatDate(date))
}
}
})// main.jsrequire(['./a.js'],function(a){
var date = new Date()
a.printDate(date)
})// 使用// Nach dem Login kopieren
4 CommonJS
commonJS ist die modulare Spezifikation von nodejs und wird aufgrund des hohen Automatisierungsgrads des Build-Tools mittlerweile häufig verwendet Die Kosten für die Verwendung von npm sind sehr gering. commonJS lädt JS nicht asynchron, sondern lädt alles auf einmal synchron
In commonJS gibt es eine globale Methode require(), die zum Laden von Modulen wie
require.config({
paths:{ "a":"src/a.js", "b":"src/b.js"
}
})Nach dem Login kopieren
require.config() verwendet wird. Dann Sie können einfach die von util bereitgestellten Methoden aufrufen
require.config()require.config({
baseUrl: "src",
paths: {
"a": "a.js",
"b": "b.js",
}
});Nach dem Login kopieren
commonJS verfügt über drei Definitionen von Modulen: Moduldefinition (Exporte), Modulreferenz (erforderlich) und Modulidentifikation (Modul)
exports()-Objekt Wird zum Exportieren von Variablen oder Methoden des aktuellen Moduls verwendet, dem einzigen Exportport. require() wird verwendet, um externe Module einzuführen. Das Modulobjekt repräsentiert das Modul selbst.
Gib mir ein Beispiel
const util = require('util');
Nach dem Login kopieren
oder hier entlang
// foobar.js
// 定义行为
function foobar(){
this.foo = function(){
console.log('Hello foo');
}
this.bar = function(){
console.log('Hello bar');
}
} // 把 foobar 暴露给其它模块
exports.foobar = foobar;// main.js//使用文件与模块文件在同一目录var foobar = require('./foobar').foobar,
test = new foobar();
test.bar(); // 'Hello bar'Nach dem Login kopieren
5 总结
CommonJS 则采用了服务器优先的策略，使用同步方式加载模块，而 AMD 采用异步加载的方式。所以如果需要使用异步加载 js 的话建议使用 AMD，而当项目使用了 npm 的情况下建议使用 CommonJS。
相关推荐：
论JavaScript模块化编程
requireJS框架模块化编程实例详解
Das obige ist der detaillierte Inhalt vonWas ist modulare Programmierung? Zusammenfassung der modularen js-Programmierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
