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();
})
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");
})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");
})
})
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");
})
})
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");
})
})
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);
})
})
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"
}
})
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
require.config({
baseUrl : "js"
})
Module von Drittanbietern
require.config({
shim: {
"underscore" : {
exports : "_";
}
}
})
require(["underscore"], function(_){
_.each([1,2,3], alert);
})
require.config({
shim: {
"underscore" : {
exports : "_";
},
"jquery.form" : {
deps : ["jquery"]
}
}
})
这样配置之后我们就可以使用加载插件后的jquery了
require.config(["jquery", "jquery.form"], function($){
$(function(){
$("#form").ajaxSubmit({...});
})
})
好了，requirejs的基本配置大致就是这么多，还有一些扩展的功能会在之后的篇幅中提到，大家不要错过呀！
