Einführung in RequireJS
RequireJS ist ein JavaScript-Modullader. Es eignet sich hervorragend für die Verwendung im Browser. Die Verwendung von RequireJS zum Laden modularer Skripte verbessert die Ladegeschwindigkeit und Qualität Ihres Codes.
Kompatibilität
Vorteile
Erzielen Sie ein asynchrones Laden von JS-Dateien, um den Verlust der Webseitenantwort zu vermeiden
Verwaltungsmodul Abhängigkeiten untereinander erleichtern das Schreiben und Warten von Code
Schnell loslegen
Schritt 1
require.js einführen
Die Abhängigkeiten in require() sind An Array, auch wenn nur eine Abhängigkeit vorhanden ist, müssen Sie zum Definieren ein Array verwenden
Der zweite Parameter ist die Rückruffunktion (Callback), mit der Abhängigkeiten zwischen Modulen aufgelöst werden können
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="require.js"></script>
<script type="text/javascript">
require(["js/a"], function(){
alert("load finished");
});
</script>
</head>
<body>
body
</body>
</html>
Schritt 2
require.config wird zum Konfigurieren des Modulladeorts verwendet
Wenn der feste Speicherort relativ lang ist, können Sie ihn verwenden baseUrl: „js“, dann ist es nicht nötig, js in Pfade zu schreiben
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="require.js"></script>
<script type="text/javascript">
require.config({
paths : {
"jquery" : ["http://vs.thsi.cn/js/jquery-1.7.2.min", "js/jquery"],
"a" : "js/a"
}
});
require(["jquery", "a"], function(){
alert("load finished");
});
</script>
</head>
<body>
body
</body>
</html>
Schritt 3
Die require.config-Konfiguration erscheint wiederholt in Schritt 2. Wenn zu jeder Seite eine Konfiguration hinzugefügt wird, ist dies nicht möglich. requirejs bietet eine Funktion namens „Master Data“
Erstellen Sie eine main.js und fügen Sie die require.config in Schritt 2 ein main.js Medium
<script data-main="js/main" src="js/require.js"></script>
Schritt 4
Module, die über require geladen werden, müssen im Allgemeinen den AMD-Spezifikationen entsprechen, d. h. die Definition verwenden um das Modul zu deklarieren, aber manchmal müssen Sie Nicht-AMD-Standard-JS laden, dann müssen Sie eine andere Funktion verwenden: shim
require.config({
shim: {
"underscore" : {
exports : "_";
},
"jquery.form" : ["jquery"]
}
});
require(["jquery", "jquery.form"], function($){
$(function(){
$("#form").ajaxSubmit({...});
})
});
