Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung des JavaScript-Modulladers – RequireJS
Detaillierte Erläuterung des JavaScript-Modulladers – RequireJS
- 青灯夜游nach vorne
- 2021-02-18 23:04:042990Durchsuche
Verwandte Empfehlungen: „Javascript-Video-Tutorial“
RequireJS ist ein JavaScript-Modullader. Es eignet sich hervorragend für die Verwendung im Browser, kann aber auch in anderen Skriptumgebungen wie Rhino und Node verwendet werden. Die Verwendung von RequireJS zum Laden modularer Skripte verbessert die Ladegeschwindigkeit und Qualität Ihres Codes.
Werfen wir zunächst einen Blick auf das Laden einer normalen js-Seite
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/index02.js" ></script>
</head>
<body>
<h1>this is a page.</h1>
</body>
</html>Das laufende Ergebnis:
Wenn wir zu diesem Zeitpunkt das Popup-Feld nicht bedienen, wird die Seite nicht angezeigt Laden Sie weiter und es wird kein Seiteninhalt angezeigt. Dies ist nicht das Ergebnis, das wir erreichen möchten.
Als nächstes verwenden wir require.js für den Betrieb:
index.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/require2.1.11.js"></script>
<script type="text/javascript">
require(["js/index","js/index01"],function(){
console.log("当js加载成功后会执行的函数");
},function(){
console.log("当js加载失败后会执行的函数");
});
</script>
</head>
<body>
</body>
</html>index.js
define(function(){
console.log("this is a test!");
function test(){
console.log("haha,i am a test!");
}
test();
});Erstens wird test02.js nicht mehr auf der Seite importiert, sondern nur requireJS. In Javascript verwenden wir die Methode require(), in der ein Array von Parametern übergeben wird und der eigentliche Parameter der [Pfad + Dateiname der JS-Datei ist, die wir importieren möchten.
Das laufende Ergebnis zu diesem Zeitpunkt:
Es ist ersichtlich, dass der Inhalt der Seite zu diesem Zeitpunkt angezeigt wurde. Anstatt wie zuvor darauf zu warten, dass die Seite nach Abschluss des JS geladen wird, wird der JS-Code erst ausgeführt, nachdem die Seite geladen wurde, was die Betriebseffizienz erheblich verbessert.
Anhand des obigen Codes können wir die grundlegende API von requirejs analysieren:
requireJS definiert drei Variablen: define, require, requirejs
require==requirejs, im Allgemeinen ist die Verwendung von require kürzer.
define wird verwendet, um ein Modul zu definieren.
require, um das abhängige Modul zu laden (das auf das definierte Modul verweist) und die Rückruffunktion nach dem Laden auszuführen. Definieren Sie die Abhängigkeiten in require. Die Parameter müssen in Array-Form vorliegen. Auch wenn nur eine Abhängigkeit vorhanden ist, müssen die Parameter in Array-Form übergeben werden.
Der zweite Parameter: Es handelt sich um eine Rückruffunktion, die zur Handhabung der Logik nach dem Laden verwendet wird. Sie wird ausgelöst, wenn alle Module geladen sind.
Der dritte Parameter: Es ist ebenfalls eine Rückruffunktion, die zur Bearbeitung der Situation nach dem Modul verwendet wird Das Laden schlägt fehl. Wie im obigen Code gezeigt, ist die Datei index01.js nicht in js definiert, daher wird diese Rückruffunktion nicht aufgerufen.
Netzwerkdateien ladenBevor wir lokale JS-Dateien geladen haben, müssen wir manchmal Dateien im Netzwerk laden. Wie sollen wir sie also laden? Lassen Sie uns nun vorstellen, wie man js-Dateien im Internet lädt.
Nehmen wir das Laden einer jquery.js-Datei als Beispiel: require(["js/index","js/index01"],function(){
console.log("当js加载成功后会执行的函数");
},function(){
console.log("当js加载失败后会执行的函数");
});
1. Parameter der Konfiguration Methode Es ist ein Objekt
2. Der Wert von Pfaden ist auch ein Objekt3. Wenn wir einen Namen für eine Bibliothek im Internet auswählen, wird empfohlen, einen aussagekräftigen Namen zu wählen Was sind Ihre Netzwerkressourcen durch den Namen? Der Ressourcenpfad darf keinen Suffixnamen haben, sonst kann nicht darauf zugegriffen werden.
6 zur Projektoptimierung).
//百度cdn公共库jQuery地址： http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js
//jQuery官方地址： https://code.jquery.com/jquery-3.1.1.js
//注意：网络上去取时不能加后缀，否则取不到
require.config({
paths : {
//为网络上的库去一个名字：jquery
"jquery" : ["https://code.jquery.com/jquery-3.1.1"]
}
});
//
require(["jquery","js/test01","js/test02"],function(){
alert("页面加载成功~~");
},function(){
alert("页面加载失败~~")
});Ähnlich können wir auch lokale Konfigurationen zu Pfaden hinzufügen:
require.config({
paths : {
//这样配置，减轻本地服务器的压力
"jquery" : ["https://code.jquery.com/jquery-3.1.1.js","js/jquery-1.8.3"]
}
});
//
require(["jquery","js/test01","js/test02"],function(){
alert("页面加载成功~~");
},function(){
alert("页面加载失败~~")
});Die Konfiguration „require.config“ wird im obigen Beispiel wiederholt angezeigt. Wenn die Konfiguration zu jeder Seite hinzugefügt wird, sieht sie auf jeden Fall sehr unelegant aus Mit der Funktion „Stammdaten“ erstellen wir zunächst eine main.js:
require.config({
paths : {
//这样配置，减轻本地服务器的压力
"jquery" : ["https://code.jquery.com/jquery-3.1.1","js/jquery-1.8.3"],
//将本地的js文件同样配置，之后引用
"test01" : ["js/test01"],
"test02" : ["js/test02"]
}
});
//
require(["jquery","test01","test02"],function(){
alert("页面加载成功~~");
},function(){
alert("页面加载失败~~")
});und verwenden dann die folgende Methode, um requirejs auf der Seite zu verwenden:
require.config({
paths : {
//这样配置，减轻本地服务器的压力
"jquery" : ["https://code.jquery.com/jquery-3.1.1","js/jquery-1.8.3"],
//将本地的js文件同样配置，之后引用
"test01" : ["js/test01"],
"test02" : ["js/test02"]
}
});Die offizielle Methode stellt eine Methode bereit, die auf Tag-Attributen basiert:
<script type="text/javascript" src="js/require2.1.11.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
<script type="text/javascript">
require(["jquery","t1","t2"],function(){
alert("页面加载成功~~");
},function(){
alert("页面加载失败~~")
});
</script>Alle Konfigurationen und importierte js werden in main.js platziert, sodass auf der Seite nur ein solches Tag benötigt wird.
代码演示如下：
//test01.js--定义一个js模块
define(function(){
function test(){
console.log("this is test01.js");
}
test();
$("p").css("color","#DB7093");
});main.js--requirejs的全局配置
require.config({
paths:{
"jquery":["jquery-1.8.3"],
"test":["test01"]
},
shim:{
"test":["jquery"]
}
});
require(["test"],function(){
console.log("success!");
});index.html--此时，引入js文件只需一行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" data-main = "js/main" src="js/require2.1.11.js" >
</script>
</head>
<body>
<p>i am liyanan and this is a testn Page.</p>
</body>
</html>更多编程相关知识，请访问：编程视频！！
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des JavaScript-Modulladers – RequireJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!