Einführung in RequireJS – Implementierung der ersten example_javascript-Kenntnisse

Warum RequireJS lernen?

Ein Neuling wie ich wird AMD, die modulare JS-Programmierung, die asynchrone Programmierung usw. erwähnen, die in unzähligen Artikeln erwähnt wird

Mit RequireJS können Sie JavaScript anders als gewöhnlich schreiben. Sie werden keine Skript-Tags mehr verwenden, um JS-Dateien in HTML einzuführen und Abhängigkeiten über die Reihenfolge der Skript-Tags zu verwalten.

RequireJS ist ein Javascript-Datei- und Modul-Framework, das uns bei der Verwaltung von JS-Code helfen kann (so wie ich es verstehe).

Bei eingehender Untersuchung werden wir gezwungen sein, eine Reihe von Substantiven zu akzeptieren: data-main, require, define, baseUrl, paths, shims, deps. . . Warten Sie;

Kurz gesagt, viele Artikel verkaufen uns Begriffe und Konzepte, die wir nicht einmal verstehen.

Halten Sie es einfach, jetzt müssen wir eine einfache Anforderung stellen, RequireJS verwenden, um unseren JS-Code zu verwalten, und in der Lage sein, JQuery zu verwenden!

1. Erstellen Sie ein Webprojekt und führen Sie es aus!

Die darin enthaltenen Dateien sind wie folgt:

Da es hier viele Fallstricke gibt, lege ich zunächst alle Dateien in das Dateistammverzeichnis, um diese kleinen Probleme zu beseitigen!

Unter anderem müssen jquery.js und require.js von der Website Bitte Baidu heruntergeladen werden.

2. Skript-Tag

in index.jsp hinzufügen

Sie können ein Tag in

RequireJS asynchroner Ladetest

hinzufügen.

3. Ergänzen Sie die Datei main.js

require.config({
　　paths: {
　　  jquery: 'jquery-2.1.1'
　　}
});
require(['jquery'], function($) {
　　alert($().jquery);
});

4. Lauf~

Sie sehen ein Popup-Fenster und die Seite wurde mit der Meldung „RequireJS Asynchronous Loading Test“ gerendert.

Zusammenfassung:

a. RequireJS wurde von James Burke erstellt, der auch der Begründer der AMD-Spezifikation war. Es handelt sich um eine Toolbibliothek für die clientseitige Modulverwaltung.

Aus diesem Beispiel:

1. Wenn die Warnung angezeigt wird, wird die Seite auch gerendert, was die asynchrone Ladefunktion widerspiegelt. Die Seite kann erst gerendert werden, nachdem auf OK geklickt wurde.

2. Die Seite muss nur eine require.js einführen, und es ist nicht erforderlich, andere komplizierte js-Codes einzuführen. Der Rest der Arbeit wird dem RequireJS-Framework überlassen!

b. Verstehen Sie zunächst die AMD-Spezifikationen, indem Sie den Grundmodus definieren: define("id",[deps1,deps2,...],callback);

Warum kann dieses Beispiel ohne Definition ausgeführt werden? Weil jquery Unterstützung für AMD bietet. Das Pfadobjekt wird zur Einführung verschiedener Module verwendet.

Kann gewöhnlicher JS-Code von RequireJS verwaltet werden? Ja, verwenden Sie Shims, um diese Ressourcen zu laden!

c. Fassen Sie zukünftige Codierungsideen zusammen:

                  Funktionen und Variablen in jedem Modul.

d. Implementieren Sie es selbst: Fügen Sie der Seite eine Schaltfläche hinzu; fügen Sie das Click-Listening-Ereignis von juqery zu main.js hinzu und testen Sie, ob die Überwachung erfolgreich ist!

e. Verbleibende Probleme: Pfadproblem, es kann definitiv nicht im Stammverzeichnis liegen, aber das ist kein Problem!

Dieser Artikel ist die vollständige Beschreibung des ersten Beispiels für den Einstieg in RequireJS. Ich hoffe, dass er für alle hilfreich sein wird.