Vorheriger Artikel: Wir haben RequestJs auf eine sehr einfache Weise zum Modular Tool JS eingeführt. In diesem Artikel werden Ihnen einige Grundkenntnisse in Anforderungskenntnissen erfahren, einschließlich der Verwendung von APIs.
Grundlegende API
Fordern definieren drei Variablen: Definieren Sie, erfordern, fordernjs, wobei Anforderung === ForderungJs im Allgemeinen kürzer verwendet wird
Definieren Sie aus dem Namen, Sie können sehen, dass diese API zum Definieren eines Moduls verwendet wird
Erfordern Sie das abhängige Modul und führt die geladene Rückruffunktion aus
A.js im vorherigen Artikel:
define (function () {function fun1 () {alert ("es funktioniert");} fun1 ();})Ein Modul wird durch die Define -Funktion definiert und dann in der Seite verwendet:
erfordern (["js/a"]);
Zum Laden des Moduls (beachten Sie, dass die Abhängigkeit in Anforderung ein Array ist. Auch wenn nur eine Abhängigkeit vorhanden ist, müssen Sie ein Array verwenden, um es zu definieren). Der zweite Parameter der Forderungs -API ist Rückruf, eine Funktion, mit der die Logik nach dem Laden verarbeitet wird, z. B.:
fordern (["js/a"], function () {alert ("load fertig");})Laden Sie die Datei
In den vorherigen Beispielen waren die Lademodule alle lokale JS, aber in den meisten Fällen kann die JS, die die Webseite laden muss, möglicherweise vom lokalen Server, anderen Websites oder CDNs stammen, sodass dieser Weg nicht geladen werden kann. Nehmen wir als Beispiel das Laden einer JQuery -Bibliothek:
required.config ({paths: {"jQuery": ["http://libs.baidu.com/jquery/2.0.3/jquery"]}} uswess (["jQuery", "js/a"], function ($) {$ (function () {alert ("load fassion";Dies beinhaltet die Anforderung.Config. benötigt.config wird verwendet, um den Ladeort des Moduls zu konfigurieren. Einfach gesagt, es soll dem Modul einen kürzeren und besser erinnerten Namen geben. Markieren Sie beispielsweise die Adresse der JQuery -Bibliothek von Baidu als JQuery, damit Sie nur ["JQuery"] schreiben müssen, wenn Sie die JS laden müssen. Wir können auch lokale Js wie folgt konfigurieren:
Required.config ({Pfade: {"jQuery": ["http://libs.baidu.com/jquery/2.0.3/jquery"], "a": "js/a"}}) Erforderliche (["jQuery", "A"], Funktion ($) {$ () () () {) {) {{Alert ("{" {{Alert ("{").Die Konfiguration der Pfade macht unseren Modulnamen raffinierter. Die Pfade haben auch eine wichtige Funktion, bei der mehrere Pfade konfiguriert werden. Wenn die Remote -CDN -Bibliothek nicht erfolgreich geladen wird, kann die lokale Bibliothek geladen werden, wie 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 dieser Konfiguration wird die Jquery im lokalen JS -Verzeichnis geladen, wenn Baidus JQuery nicht erfolgreich geladen wird
Bei Verwendung von RequiredJs müssen Sie beim Laden des Moduls nicht das Suffix des JS schreiben, und natürlich können Sie nicht das Suffix schreiben.
In der Rückruffunktion im obigen Beispiel gibt es einen $ Parameter. Dies ist die Ausgangsvariable des Abhängigkeits -JQuery -Moduls. Wenn Sie sich auf mehrere Module verlassen, können Sie wiederum mehrere Parameter schreiben, um zu verwenden:
fordern (["jQuery", "Unterstrich"], Funktion ($, _) {$ (function () {_.each ([1,2,3], alert);})})Wenn ein Modul keine Variablenwerte ausgibt, gibt es niemanden. Versuchen Sie also, das Ausgabemodul vor dem Ausgangsmodul zu schreiben, um Missverständnisse durch Missverständnisse aufgrund von Missverständnissen aufgrund von Missverständnissen aufgrund von Missverständnissen zu verhindern, wenn die Position verwirrt ist.
Globale Konfiguration
Die Request.Config -Konfiguration wird im obigen Beispiel wiederholt. Wenn jeder Seite eine Konfiguration hinzugefügt wird, erscheint sie zwangsläufig sehr unanständig. RequestJS bietet eine Funktion namens "Hauptdaten". Wir erstellen zuerst ein main.js:
fordern.config ({paths: {"jQuery": ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jQuery"], "a": "JS/A"}})Verwenden Sie dann die folgende Methode auf der Seite, um RequestJs zu verwenden:
<script data-main = "js/main" src = "js/required.js"> </script>
Erklären Sie, dass das Skript-Tag des SCRIDS-Ladens von RequiredJS das Data-Main-Attribut hinzufügt. Das in diesem Attribut angegebene JS wird nach dem Laden von reeuqire.js verarbeitet. Nachdem wir die erforderliche Konfiguration der erforderlichen. Konfiguration zu Data-Main hinzugefügt haben, können wir jede Seite für diese Konfiguration verwenden. Anschließend kann die Seite direkt zum Laden aller kurzen Modulnamen verwendet werden.
Data-Main hat auch eine wichtige Funktion. Wenn das Skript-Tag das Data-Main-Attribut angibt, wird die Forderung standardmäßig die von Data-Main als Root-Pfad angegebene JS ausgewählt. Was bedeutet es? Beispielsweise lädt nach der Verwendung von Data-Main = "JS/Main" oben, nachdem wir den Anforderungen verwendet haben (['JQuery']) (keine Pfade von JQuery sind konfiguriert). Erfordert automatisch die Datei js/jQuery.js anstelle von jQuery.js, was der Default-Konfiguration entspricht:
fordern.config ({Basisurl: "js"})Module von Drittanbietern
Module, die durch die durchladenden Module geladen werden müssen, müssen im Allgemeinen AMD-Spezifikationen einhalten, dh Define zum Deklarieren von Modulen. In einigen Fällen müssen Sie jedoch nicht-AMD-Spezifikationen js laden. Zu diesem Zeitpunkt müssen Sie eine andere Funktion verwenden: Shim. Shim ist schwer zu verstehen. Shim wird direkt als "Pad" übersetzt, was tatsächlich diese Bedeutung hat. Derzeit benutze ich es hauptsächlich an zwei Stellen
1. Non-AMD-Modulausgang, "PAD" -Modul mit nicht standardmäßigem AMD in verfügbare Module. Zum Beispiel: In der alten Version von JQuery wird die AMD -Spezifikation nicht vererbt, sodass wir ["JQuery" nicht direkt erfordern können. Zu diesem Zeitpunkt wird Shim benötigt. Wenn ich beispielsweise die Unterstrichklassenbibliothek verwende, aber die AMD -Spezifikation nicht implementiert, können wir sie so konfigurieren.
Required.config ({Shim: {"Unterstrich": {exportiert: "_";}}})Nach dieser Konfiguration können wir uns auf das Unterstrich in anderen Modulen beziehen:
fordern (["unterstrich"], function (_) {_.each ([1,2,3], alert);})Bei Nicht-AMD-Modulen in Plug-in-Form verwenden wir häufig JQuery-Plug-Ins, und diese Plug-Ins entsprechen im Grunde genommen nicht den AMD-Spezifikationen, wie z. B. jQuery.Form-Plug-In. Zu diesem Zeitpunkt müssen Sie das Formular Plug-In in JQuery "pad":
Required.config ({Shim: {"Underscore": {Exports: "_";}, "jQuery.form": {deps: ["jQuery"]}}})Es kann auch abgekürzt werden wie:
fordern.config ({shim: {"unterstrich": {exports: "_";}, "jQuery.form": ["jQuery"]}})Nach dieser Konfiguration können wir JQuery nach dem Laden des Plugins verwenden
fordern.config (["jQuery", "jQuery.form"], function ($) {$ (function () {$ ("#Form"). AjaxSubmit ({...});})})Okay, es gibt ungefähr so viele grundlegende Konfigurationen von Anforderungen, und einige erweiterte Funktionen werden in Zukunft erwähnt. Verpassen Sie sie nicht!