Heim >Web-Frontend >js-Tutorial >Was ist modulare Programmierung? Zusammenfassung der modularen js-Programmierung
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.
Es gibt ein weiteres Problem, das zwei globale Variablen offenlegt, die leicht zu einer Verschmutzung globaler Variablen führen können3 AMDAMD 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: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.
// A.jsfunction sayWord(type){ if(type === 1){ console.log("hello"); }else if(type === 2){ console.log("world"); } }// B.jsfunction Hello(){ sayWord(1); }// C.jsHello()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>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.
1
Hauptprobleme, die durch RequireJS gelöst werden2018 年 8 月 9 日
var a = require('a'); console.log(1)
// ? 代表该参数可选 define(id?, dependencies?, factory);
define("alpha", ["require", "exports", "beta"], function (require, exports, beta) { exports.verb = function() { return beta.verb(); //Or: return require("beta").verb(); } });
Ein Modul ohne Abhängigkeiten, das Objekte direkt definieren kann:
define(["alpha"], function (alpha) { return { verb: function(){ return alpha.verb() + 2; } }; });
Verwendung
define({ add: function(x, y){ return x + y; } });Modul: ist ein Array, die darin enthaltenen Mitglieder sind die zu ladenden Module Rückruf: Laden Sie die Rückruffunktion nach Erfolg
require([module],callback);Die spezifische Verwendungsmethode ist wie folgt
require(['./a.js'],function(a){ var date = new Date() a.printDate(date) })
, 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) })// 使用//4 CommonJScommonJS 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" } })
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", } });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');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'
CommonJS 则采用了服务器优先的策略,使用同步方式加载模块,而 AMD 采用异步加载的方式。所以如果需要使用异步加载 js 的话建议使用 AMD,而当项目使用了 npm 的情况下建议使用 CommonJS。
相关推荐:
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!