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

Sie können ein Tag in

RequireJS asynchroner Ladetest

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);