Vorheriger Artikel: Modulares JS-Tool Wir haben Requirejs auf sehr einfache Weise eingeführt: http://www.jb51.net/article/82527.htm, in diesem Artikel geht es um Requirejs Einige Grundkenntnisse, einschließlich der Verwendung der API usw.
Basis-API
require definiert drei Variablen: define, require, requirejs, wobei require === requirejs, im Allgemeinen ist die Verwendung von require kürzer
define Wie Sie am Namen erkennen können, wird diese API zum Definieren eines Moduls
verwendet
erfordern Abhängige Module laden und nach dem Laden die Rückruffunktion ausführen
a.js im vorherigen Artikel:
define(function(){
function fun1(){
alert("it works");
}
fun1();
})
Nach dem Login kopieren
Definieren Sie ein Modul über die Definitionsfunktion und verwenden Sie es dann auf der Seite:
require(["js/a"]);
Um das Modul zu laden (beachten Sie, dass die Abhängigkeit in require ein Array ist. Auch wenn nur eine Abhängigkeit vorhanden ist, müssen Sie ein Array verwenden, um sie zu definieren. Der zweite Parameter der require-API ist Callback, eine Funktion, die zur Verarbeitung verwendet wird.) die Logik nach dem Laden, wie zum Beispiel:
require(["js/a"],function(){
alert("load finished");
})Nach dem Login kopieren
Datei laden
In den vorherigen Beispielen waren die geladenen Module alle lokale JS, aber in den meisten Fällen kann das JS, das von der Webseite geladen werden muss, vom lokalen Server, anderen Websites oder dem CDN stammen, sodass es hier nicht geladen werden kann Wir können als Beispiel eine JQuery-Bibliothek laden:
require.config({
paths : {
"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"]
}
})
require(["jquery","js/a"],function($){
$(function(){
alert("load finished");
})
})
Nach dem Login kopieren
Hierzu wird require.config verwendet, um den Speicherort des Moduls zu konfigurieren. Vereinfacht ausgedrückt dient es dazu, dem Modul einen kürzeren und leichter zu merkenden Namen zu geben. Markieren Sie beispielsweise die Jquery-Bibliotheksadresse von Baidu , also Bei Bedarf müssen Sie nur ["jquery"] schreiben, um die js zu laden. Wir können lokale js auch wie folgt konfigurieren:
require.config({
paths : {
"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"],
"a" : "js/a"
}
})
require(["jquery","a"],function($){
$(function(){
alert("load finished");
})
})
Nach dem Login kopieren
Durch das Konfigurieren von Pfaden werden unsere Modulnamen verfeinert. Pfade haben auch eine wichtige Funktion: Wenn die Remote-CDN-Bibliothek nicht erfolgreich geladen wird, können Sie die lokale Bibliothek laden, z. B.:
require.config({
paths : {
"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
"a" : "js/a"
}
})
require(["jquery","a"],function($){
$(function(){
alert("load finished");
})
})
Nach dem Login kopieren
Wenn nach dieser Konfiguration die JQuery von Baidu nicht erfolgreich geladen werden konnte, wird die JQuery im lokalen JS-Verzeichnis geladen
Wenn Sie requirejs verwenden, müssen Sie beim Laden des Moduls nicht das Suffix .js schreiben, und natürlich können Sie das Suffix
nicht schreiben
Der $-Parameter befindet sich in der Callback-Funktion im obigen Beispiel. Dies ist die Ausgabevariable des abhängigen JQuery-Moduls. Wenn Sie von mehreren Modulen abhängig sind, können Sie mehrere Parameter nacheinander schreiben, um sie zu verwenden:
require(["jquery","underscore"],function($, _){
$(function(){
_.each([1,2,3],alert);
})
})
Nach dem Login kopieren
Wenn ein Modul keine Variablenwerte ausgibt, dann gibt es auch keine. Versuchen Sie daher, das Ausgabemodul voranzustellen, um Missverständnisse durch falsche Positionen zu vermeiden
Globale Konfiguration
Die require.config-Konfiguration erscheint im obigen Beispiel wiederholt. Wenn die Konfiguration zu jeder Seite hinzugefügt wird, sieht sie definitiv sehr unelegant aus. requirejs stellt zunächst eine main.js bereit 🎜>
require.config({
paths : {
"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
"a" : "js/a"
}
})Nach dem Login kopieren
Verwenden Sie dann die folgende Methode, um requirejs auf der Seite zu verwenden:
Zur Erläuterung: Das Skript-Tag, das das Skript „requirejs“ lädt, fügt das durch dieses Attribut angegebene js hinzu, nachdem reuqire.js geladen wurde. Nachdem wir die Konfiguration „require.config“ zu „data-main“ hinzugefügt haben, können wir Folgendes vornehmen: Jede Seite verwendet diese Konfiguration und kann dann direkt auf der Seite verwendet werden, um alle kurzen Modulnamen zu laden
data-main hat auch eine wichtige Funktion. Wenn das Skript-Tag das data-main-Attribut angibt, verwendet require standardmäßig das von data-main angegebene js als Stammpfad. Nachdem wir beispielsweise data-main="js/main" oben festgelegt haben und wir require(['jquery']) verwenden (ohne den Jquery-Pfad zu konfigurieren), lädt require automatisch die Datei js/jquery.js anstelle von jquery. js, entspricht der Standardkonfiguration:
require.config({
baseUrl : "js"
})Nach dem Login kopieren
Module von Drittanbietern
Module, die über geladen werden, müssen im Allgemeinen den AMD-Spezifikationen entsprechen, d. h. zum Deklarieren des Moduls müssen manchmal Nicht-AMD-Standard-JS geladen werden Shim ist auch schwer zu erklären, Shim wird direkt mit „Pad“ übersetzt, was tatsächlich diese Bedeutung hat. Derzeit verwende ich es hauptsächlich an zwei Stellen
1. Nicht-AMD-Modulausgabe, nicht standardmäßige AMD-Module in verfügbare Module „auffüllen“. Beispiel: In der alten Version von jquery wird die AMD-Spezifikation nicht geerbt, sodass Sie [„jquery“] nicht direkt anfordern können Dieses Mal ist ein Shim erforderlich. Wenn ich beispielsweise die Underscore-Klassenbibliothek verwende, diese jedoch nicht die AMD-Spezifikation implementiert, können wir sie wie folgt konfigurieren
require.config({
shim: {
"underscore" : {
exports : "_";
}
}
})
Nach dem Login kopieren
Nachdem wir diese Konfiguration vorgenommen haben, können wir in anderen Modulen auf das Unterstrichmodul verweisen:
require(["underscore"], function(_){
_.each([1,2,3], alert);
})
Nach dem Login kopieren
Für Nicht-AMD-Module in Form von Plug-Ins verwenden wir häufig JQuery-Plug-Ins, und diese Plug-Ins entsprechen grundsätzlich nicht den AMD-Spezifikationen, wie zum Beispiel das JQuery.form-Plug-In , müssen Sie das Formular-Plug-in in jquery „auffüllen“:
require.config({
shim: {
"underscore" : {
exports : "_";
},
"jquery.form" : {
deps : ["jquery"]
}
}
})
Nach dem Login kopieren
kann auch abgekürzt werden als:
这样配置之后我们就可以使用加载插件后的jquery了
require.config(["jquery", "jquery.form"], function($){
$(function(){
$("#form").ajaxSubmit({...});
})
})
Nach dem Login kopieren
好了，requirejs的基本配置大致就是这么多，还有一些扩展的功能会在之后的篇幅中提到，大家不要错过呀！
