Die meisten Projekte verwenden die modulare Entwicklung. Erfordernde Js ist ein Modell für die Entwicklung von AMD -Modul, daher ist es notwendig, es zu lernen. Durch die Verwendung von RequestJS Schritt für Schritt können wir den Gesamtentwicklungsprozess von ReformenJs und einige der Gefühle der Verwendung von ReformenJs selbst lernen.
AMD: Ein Mechanismus für asynchrone Laden von JavaScript -Code basierend auf Modulen. Es empfiehlt Entwickler, Javascript -Code in Module zu integrieren, und die Abhängigkeit von globalen Objekten wird zu einer Abhängigkeit von anderen Modulen, ohne viele globale Variablen zu erklären. Lösen Sie die Abhängigkeiten einzelner Module durch Verzögerung und Nachdarstellung. Die Vorteile des modularen JavaScript -Codes sind offensichtlich. Die lockere Kopplung verschiedener funktioneller Komponenten kann die Wiederverwendbarkeit und Wartbarkeit des Codes erheblich verbessern. Dieses nicht blockierende gleichzeitige Laden von JavaScript-Code ermöglicht andere UI-Elemente auf der Webseite, die nicht auf JavaScript-Code beruhen, z. B. Bilder, CSS und andere DOM-Knoten, um zuerst zu laden, die Webseite lädt schneller und Benutzer erhalten auch eine bessere Erfahrung.
1. Laden Sie Requiejs herunter
Vor der modularen Entwicklung mit RequieJs müssen wir etwas vorbereiten. Das muss die Datei fordern.js, hahaha, herunterladen, weil sie basierend darauf entwickelt wurde.
2. Erstellen Sie eine HTML -Datei
Nach dem Erstellen einer HTML -Datei muss das Importieren von Forderung das <Skript> -Tag verwenden, es besteht kein Zweifel daran. Dann gibt es in diesem Tag ein Data-Main-Attribut. Seine Funktion besteht darin, als Eingang und Ausgang zu fungieren, dh nach dem Laden von Forderung jüngst vom Data-Main-Attribut einzugeben.
Zum Beispiel ist Folgendes:
<! DocType html> <kopf> <titels> Erfordert </title> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8"/> </head> <body> <! src = "js/required.js"> </script> </body> </html>
Wenn ich JS/fordert.js lade, gehe ich zur JS/Main -JS -Datei aus. Main ist auch eine JS -Datei. Wir können sein .js -Suffix weglassen und erfordern es.
3. Data-Main
Nachdem das Programm ausgeführt wurde, geben Sie <Script data-main = 'JS/Main' src = 'js/required.js'> </script> main.js über Data-Main ein und führen Sie Main.js. aus. Was ist also in Main.js?
Bitte beachten Sie den Code:
/* fordert.config baseUrl als 'js' ausführen, bezieht sich Baseurl auf das Stammverzeichnis der Moduldatei, der ein absoluter Path oder ein relativer Pfad sein kann. die anonyme Funktion wie Monkey-> mk*/fordert (['Monkey'], Funktion (mk) {mk.init ();});Aus dem obigen Code können Sie sehen, dass Main.js zwei Module enthält: fordert.config und fordern.
Die Funktion von Required.Config besteht darin, einige Parameter von RequestJs zu konfigurieren und dann öffentlich darauf zu verweisen.
Beispielsweise besteht die Funktion der obigen Baseurl darin, sie als Basispfad zu verwenden und nach Dateien unter diesem Pfad zu suchen. Ich stelle alle .js -Dateien in den JS -Ordner ein. Nach der Konfiguration dieser Eigenschaft suchen die nachfolgenden Dateien daher im JS -Pfad nach Inhalten.
wie folgt:
erfordern (['Monkey'], Funktion (Monkey) {ende.init ();});Wenn es sich auf Affen bezieht, ist es der Referenz Monkey, nicht JS/Affen.
Welche Rolle spielt die Pfade? Es soll einige häufig verwendete JS -Dateien durch gebräuchliche Namen ersetzen. Zum Beispiel können wir dies nicht jedes Mal schreiben, wenn wir es nennen, so dass wir JQuery-1.8.2.min.js ersetzen können. In Zukunft können wir JQuery direkt verwenden, was schnell und bequem ist.
Okay, fordert. CONfig ist im Grunde genommen vertraut damit. Mit einem Wort ist seine Funktion, RequestJs zu konfigurieren.
Was ist mit erforderlich?
Die Funktion von Forderungen ist auszuführen. Zum Beispiel brauche ich hier nur Monkey.js auszuführen. Deshalb habe ich Affen importiert und dann den Rückgabewert nach der Affenausführung über den MK -Parameter erhalten. Wenn es einen Rückgabewert gibt, können wir die entsprechende Verarbeitung von MK durchführen.
Hey, was ist im Affen?
Schauen wir uns an:
/* Parameter Define ist eine anonyme Funktion, die ein Objekt zurückgibt*/define (['jQuery'], Funktion ($) {var init = function () {console.log ($. Browser);}; return {init: init};});definieren! Seine Funktion besteht darin, ein JS -Modul für die Verwendung durch andere Module oder Forderungen zu definieren. Seine Methode, sich auf andere JS -Module zu verweisen, ähnelt der des Forderung. Es führt die erforderlichen JS -Dateien ein und entspricht dann den Parametern nacheinander. Es ist wichtig zu beachten, dass andere Module nicht auf die in Define definierten Methoden oder Variablen zugreifen können. Wenn Sie also möchten, dass andere Module auf sie zugreifen können, können Sie die entsprechende Methode (Rückkehr) Objekte oder Funktionen auswerfen. Hier bin ich zurück, was ich zurückgehe, das andere Module anrufen kann.