Schlüsselpunkte

• fordertJS ist ein AMD -Modulloader für Browser, der asynchron Skripte und CSS -Dateien laden, Abh?ngigkeiten verwalten und Codestrukturen erstellen. Es enth?lt auch ein Optimierungstool für Produktionsumgebungen.
• Bei der Verwendung von RequiredJs muss der Code in die Moduldefinition eingewickelt werden. Module k?nnen in anderen Modulen verwiesen werden, und alle Abh?ngigkeiten werden geladen, bevor das Modul selbst geladen wird.
• fordertJS Optimizer R.Js kann so konfiguriert werden, dass alle Module in eine einzelne Datei erstellt werden. Diese Konfiguration kann das Modul auch zu einer unabh?ngigen globalen Bibliothek sowohl als AMD -Modul als auch als globaler Export im Browser machen.
• fordertJs k?nnen verwendet werden, um Bibliotheken und Anwendungen zu erstellen, die sie verwenden. Dieser Prozess beinhaltet das Definieren und Verwenden von AMD-Modulen, das Konfigurieren von R.JS-Optimierer und das Konfigurieren von RequestJs im Browser, um gut strukturiertes und organisiertes Code zu generieren.

fordertJS ist ein AMD -Modulloader für Browser, mit dem Skripte und CSS -Dateien asynchron geladen werden k?nnen. Sie müssen die Reihenfolge der Skriptdateien in einer einzelnen Datei (z. B. index.html) nicht mehr verarbeiten. Stattdessen wickeln Sie Ihren Code einfach in eine Moduldefinition ein. Erforderlich ist für das Abh?ngigkeitsmanagement verantwortlich, sodass Ihre Codestruktur klarer und organisierter wird. Es verfügt au?erdem über ein Optimierungstool, das Dateien für Produktionsumgebungen komprimiert und verbindet.

Die offizielle Website enth?lt detaillierte Dokumentation zu ihrer API, und es gibt viele Beispielcode -Grundlagen, die Ihnen helfen. Es verfügt jedoch über viele Konfigurationen, und die Verwendung von RequestJs wird zu Beginn schwierig sein.

In diesem Artikel werden wir lernen, wie man ReformenJs verwendet, indem wir eine Bibliothek mit AMD -Modulen erstellen, sie optimieren und als eigenst?ndiges Modul mit dem Optimierer von RequestJS exportieren. Sp?ter erstellen wir die Anwendung mit RequiredJs und verwenden unsere Bibliothek.

Dieses Tutorial geht davon aus, dass Sie ein gewisses Verst?ndnis für Anforderungen haben. Wenn Sie nach einem Get-Start-Leitfaden suchen, lesen Sie: Verst?ndnis für ein effizientes JavaScript-Modul.

Installation erfordert

fordertJs kann über Bower installiert werden:

bower install requirejs --save

Oder Sie k?nnen die Datei von GitHub erhalten.

Es gibt auch einen grunzenbasierten Yeoman-Generator für Anforderungsprojekte.

AMD -Modul

Wir wickeln den Code in define() ein, was ihn zu einem AMD -Modul macht.

Datei: Mylib.js

define(['jquery'], function($) {
    // $現(xiàn)在是jquery。

    return 'mylib';
});

Das war's. Beachten Sie, dass define() einen optionalen ersten Parameter, das Abh?ngigkeitsarray, in diesem Fall ['jquery'] akzeptiert. Es ist die Abh?ngigkeitsliste für dieses Modul. Alle Module im Array werden vor diesem Modul geladen. Bei der Ausführung dieses Moduls sind die Parameter das entsprechende Modul im Abh?ngigkeitsarray.

In diesem Fall wird JQuery zuerst geladen und dann als Parameter $ in die Funktion übergeben, und dann k?nnen wir sie sicher im Modul verwenden. Schlie?lich gibt unser Modul eine Zeichenfolge zurück. Der Rückgabewert ist das, was an den Funktionsparameter übergeben wird, wenn dieses Modul erforderlich ist.

andere Module zitieren

Lassen Sie uns sehen, wie es funktioniert, indem wir das zweite Modul definieren und auf unser erstes Modul mylib.js beziehen.

Datei: main.js

bower install requirejs --save

Sie k?nnen auf eine beliebige Anzahl von Abh?ngigkeiten im Abh?ngigkeitsarray verweisen, und alle Module werden durch Funktionsparameter in derselben Reihenfolge bereitgestellt. In diesem zweiten Modul verweisen wir auf die JQuery- und Mylib -Module und geben einfach zurück, dass ein Objekt bestimmte Variablen enth?lt. Benutzer dieser Bibliothek verwenden dieses Objekt als Ihre Bibliothek.

Konfigurieren Sie RequiredJS Optimierer: R.JS

Sie fragen sich vielleicht, woher wissen Anforderungen, welche Datei geladen werden soll, indem Sie sich nur die Zeichenfolgen im Abh?ngigkeitsarray ansehen? In unserem Beispiel stellen wir JQuery und Mylib als Saiten zur Verfügung und wissen, wo sich diese Module befinden. Mylib ist sehr einfach, es ist Mylib.js, die .js weglassen.

Wo ist JQuery? Dies ist, wofür die Konfiguration von ReforningJS ist. Sie k?nnen eine breite Palette von Konfigurationen über die Anforderungskonfiguration bereitstellen. Es gibt zwei M?glichkeiten, diese Konfiguration bereitzustellen, da wir den Optimierer von RequestJS verwenden und ich Ihnen die R.JS -Methode zeigen werde. R.JS ist der Anforderungsoptimierer.

Wir werden R.JS eine Konfiguration zur Verfügung stellen, die alle Module in einer einzelnen Datei optimiert. Die von uns bereitgestellte Konfiguration erm?glicht es R.Js, Module in unabh?ngige globale Bibliotheken sowohl als AMD -Module als auch als globale Exporte im Browser aufzubauen.

R.Js k?nnen über die Befehlszeile oder als Knotenmodul ausgeführt werden. Es gibt auch eine Grunzaufgabe, um den Optimierer-Grunz-Requirejs auszuführen.

Wenn dies gesagt wird, sehen wir sehen, wie unsere Konfiguration aussieht:

Datei: Tools/Build.js

define(['jquery'], function($) {
    // $現(xiàn)在是jquery。

    return 'mylib';
});

Konfigurationsdateien sind tats?chlich der Kern von RequiredJs. Sobald Sie verstanden haben, wie diese Parameter funktionieren, k?nnen Sie RequestJs wie ein Profi verwenden.

Sie k?nnen unterschiedliche Aktionen ausführen und Projektbusten mithilfe von Konfigurationsdateien anpassen. Um mehr über Konfiguration und Forderung zu erfahren, empfehlen wir Ihnen, sich auf die Dokumentation und das Wiki zu beziehen. Es gibt auch eine Beispielkonfigurationsdatei, die demonstriert, wie das Build -System verwendet wird. Verweisen Sie daher auch darauf.

Schlie?lich haben wir den Optimierer tats?chlich geleitet. Wie ich bereits sagte, k?nnen Sie es durch die Befehlszeile oder den Knoten und die Grunzenaufgabe ausführen. In der R.JS ReadMe -Datei finden Sie, wie Sie den Optimierer in verschiedenen Umgebungen ausführen.

define(['jquery', 'mylib'], function($, mylib) {
    // $照常是jquery
    // mylib是字符串`mylib`，因為這是第一個模塊的返回值
    //

    return {
        version: '0.0.1, jQuery版本：' + $.fn.jquery,
        mylibString: mylib
    }
});

Dies generiert die Build -Datei in dist/mylib.js

build.js

Als n?chstes sehen wir, was diese Parameter tats?chlich bedeuten.

BaseURL - Der Wurzelpfad für alle Module, nach denen man suchen kann.

Pfade - Pfadkarte relativ zum Modulnamen von Baseurl.

In unserem Beispiel "Mylib" kartiert auf "../main", was relativ zu Baseurl ist. Wenn wir also auf "Mylib" verweisen, l?dt es die Datei "../lib/../mylib/main. JS ”. Beachten Sie, dass wir BaseURL, dann Pfadeeinstellungen, dann den Modulnamen gefolgt von .JS -Suffix anh?ngen. Dort k?nnen Sie angeben, wie das Modul auf Dateien wie JQuery und Mylib zugeordnet ist.

Include - das Modul, das wir in den Optimierungsprozess aufnehmen m?chten. Die erforderlichen Abh?ngigkeiten für das mitgelieferte Modul sind implizit enthalten. In unserem Beispiel h?ngt das Hauptmodul von Mylib und JQuery ab, die ebenfalls enthalten sein werden, sodass es nicht explizit einbeziehen muss. Wir schlie?en auch Mandel ein, das sp?ter erw?hnt wird.

Modul ausschlie?en, m?chten wir aus dem Optimierungsprozess ausschlie?en. In unserem Fall haben wir JQuery ausgeschlossen. Der Benutzer, der die Bibliothek erstellt, stellt eine JQuery -Bibliothek bereit. Wir werden das sp?ter sehen.

OUT - Der Name der optimierten Ausgabedatei.

Wrap - Wrap das Build -Paket in den von Wrap angegebenen Start- und Endtext. Die optimierte Ausgabedatei lautet wie folgt: Wrap.start das darin enthaltene Modul. Wrap.Start und Wrap.end sind die Dateinamen, deren Inhalt in der Ausgabe enthalten ist.

mandel

Die erstellte Bibliothek enth?lt nicht die Datei fordern.js, sondern verwendet Mandel. Mandel ist eine kleine AMD -API -Implementierung, die fordert.js ersetzt.

Packen Sie unsere Bibliothek

In der R.JS -Konfiguration wickeln wir unsere Bibliothek mit Wrap.start- und Wrap.end -Dateien ein. Wir nehmen auch Mandeln in die Bibliothek ein, die unsere Bibliothek unabh?ngig machen, sodass sie über die globalen Browser -Variablen oder als AMD -Modul über RequiredJs verwendet werden k?nnen.

Datei: Wrap.Start

bower install requirejs --save

Die Module, die wir Main, Mylib und Mandel enthalten, befinden sich in der Mitte des Wraps.Start und Wrap.end.

Datei: Wrap.end

define(['jquery'], function($) {
    // $現(xiàn)在是jquery。

    return 'mylib';
});

Wenn der Benutzer den AMD -Loader verwendet, fordert die erstellte Datei "jQuery" als AMD -Abh?ngigkeit an. Wenn der Verbraucher nur Browser Global Variablen verwendet, erh?lt die Bibliothek die $ Global Variable und verwendet sie für die Jquery -Abh?ngigkeit.

Verwenden der Bibliothek mit Anforderungen

Unsere Bibliothek ist fertig, nun verwenden wir sie tats?chlich, indem wir einen Antragsantrag erstellen.

Datei: app.js

define(['jquery', 'mylib'], function($, mylib) {
    // $照常是jquery
    // mylib是字符串`mylib`，因為這是第一個模塊的返回值
    //

    return {
        version: '0.0.1, jQuery版本：' + $.fn.jquery,
        mylibString: mylib
    }
});

nichts Besonderes hier, es ist nur ein weiteres Modul, das sich auf JQuery und Mylib bezieht. Wenn ein Modul mit define definiert ist, wird es nicht sofort ausgeführt, dh seine Rückruffunktion (übergeben nach einem Array von Abh?ngigkeiten) wird nicht sofort ausgeführt. Dies bedeutet, dass unsere Anwendung nicht einfach durch Definieren dieses Moduls gestartet wird. Lassen Sie uns nun sehen, wie Sie Anforderungen konfigurieren und dieses Modul, unsere Anwendung, tats?chlich ausführen.

Konfigurieren Sie Anforderungen für den Browser

Wir konfigurieren Anforderungen in einer Datei und führen unser App -Modul aus. Es gibt jedoch verschiedene M?glichkeiten, dies zu tun.

Datei: Common.js

{
  "baseUrl": "../lib",
  "paths": {
    "mylib": "../main"
  },
  "include": ["../tools/almond", "main"],
  "exclude": ["jquery"],
  "out": "../dist/mylib.js",
  "wrap": {
    "startFile": "wrap.start",
    "endFile": "wrap.end"
  }
}

BaseURL und Pfadekonfigurationen sind die gleichen wie zuvor. Der zus?tzliche Konfigurationswert hier ist:

Shim: Konfigurieren Sie Abh?ngigkeiten und Exporte herk?mmlicher "Browser -Global" -Skripts, die nicht define() verwenden, um Abh?ngigkeiten zu deklarieren und Modulwerte festzulegen. Zum Beispiel ist Backbone kein AMD -Modul, aber es ist eine globale Browser -Variable, die das Backbone in den globalen Namespace exportiert, den wir in Exporten angegeben haben. In unserem Beispiel stützt sich das Modul auch auf JQuery und Unterstrich, sodass wir es mit DEPs angeben. Das Skript im DEPS -Array wird vor dem Laden des Rückgrats geladen, und nach dem Laden wird der Exportewert als Modulwert verwendet.

Bitte beachten Sie, dass Sie in diesem Anwendungsprojekt auch R.Js verwenden k?nnen, für die eine separate Konfiguration erforderlich ist. Aber sei nicht verwirrt darüber. Ich werde nicht auf Details eingehen, wie es geht, aber das ?hnelt dem, was wir mit der Bibliothek gemacht haben. Weitere Informationen finden Sie in der Konfiguration des Beispielbuilds.

ben?tigen und definieren Sie

Wir laden das Modul mit der Request und führen Sie es sofort aus. Manchmal definieren und erfordern, kann verwechselt, welche man benutzt werden soll. Definieren definieren ein Modul, führen aber nicht aus, erfordert ein Modul und führen es aus - dh, l?dt und führt ein abh?ngiges Modul aus, bevor es sich selbst ausführt. In der Regel haben Sie eine Forderung als Haupteingangsmodul, die von anderen Modulen abh?ngt, die per Define definiert sind.

Laden Skript

Normalerweise fügen Sie alle Skriptdateien in index.html ein. Nachdem wir fordertJS verwenden, müssen wir nur Anforderungen anjs einbeziehen und unsere Datenmarke angeben, was der Einstiegspunkt für unsere Anwendung ist. Es gibt viele M?glichkeiten, Konfigurationsoptionen festzulegen oder das in index.html verwendete Hauptmodul zu l?sen. Weitere Informationen finden Sie hier.

bower install requirejs --save

Schlussfolgerung

In diesem Artikel haben wir eine Bibliothek und eine Anwendung erstellt, die die Bibliothek mit RequestJs verwendet. Wir haben gelernt, wie man den R.JS -Optimierer konfiguriert und wie man RequestJs im Browser konfiguriert. Schlie?lich haben wir gelernt, wie man AMD -Module unter Verwendung von RequestJs definiert und verwendet. Dies macht unseren Code gut strukturiert und organisiert.

In der ersten H?lfte dieses Tutorials (Konfigurationsoptimierer) habe ich dieses Beispiel-Libglobal-Repository verwendet, die zweite H?lfte ist nicht kompliziert, sodass Sie es jetzt selbst tun k?nnen.

Die offizielle Forderungswebsite ist die endgültige Dokumentation. Schauen Sie sich jedoch unbedingt das Beispiel -Repository auf GitHub und die Beispielprojekte in diesem Repository an, die die Verwendung der Anforderung von RequiresJS demonstrieren.

FAQs (FAQs) zum Erstellen von Bibliotheken mit Anforderungsverforderung

Was ist der Hauptzweck von Anforderungen in der JavaScript -Entwicklung?

fordertJs ist eine JavaScript -Datei und einen Modulloader. Es ist für die Verwendung von Browser optimiert, kann aber auch in anderen JavaScript -Umgebungen verwendet werden. Der Hauptzweck von Anforderungen ist es, die Verwendung modularer Programmierung in JavaScript zu f?rdern. Es hilft Entwicklern, Abh?ngigkeiten zwischen JavaScript -Dateien zu verwalten und ihren Code zu modularisieren. Dies führt zu einer besseren Codeorganisation, Wartbarkeit und Wiederverwendbarkeit. Es verbessert auch die Geschwindigkeit und Qualit?t des Codes.

Wie handelt es sich bei Reformenjs um JavaScript -Dateiabh?ngigkeiten handelt?

fordertJs verwendet die AMD -API (Asynchronous Modul Definition), um JavaScript -Module zu verarbeiten. Diese Module k?nnen asynchron geladen werden, was bedeutet, dass sie beim Laden nicht andere Skripte ausführen. Wenn Sie ein Modul mit RequiredJs definieren, geben Sie seine Abh?ngigkeiten an. Anforderungswiedergabe stellt dann sicher, dass diese Abh?ngigkeiten vor dem Modul selbst geladen werden.

Wie definieren Sie Module mit RequiredJs?

Um ein Modul in forderJS zu definieren, k?nnen Sie die Funktion define() verwenden. Diese Funktion erfordert zwei Parameter: ein Abh?ngigkeitsarray und eine Fabrikfunktion. Eine Abh?ngigkeit ist der Pfad zur Datei, von der das Modul abh?ngt. In den Werksfunktionen schreiben Sie Modulcode. Diese Funktion wird aufgerufen, sobald alle Abh?ngigkeiten geladen sind.

Wie verwendet ich Module, die mit Anforderungen in Ihrem Code definiert sind?

Um ein mit RequestJS definierter Modul zu verwenden, k?nnen Sie die Funktion require() verwenden. Diese Funktion akzeptiert zwei Parameter: ein Abh?ngigkeitsarray und eine Rückruffunktion. Abh?ngigkeiten sind der Pfad zum Modul, den Sie verwenden m?chten. In der Rückruffunktion werden Sie das Modul verwenden. Diese Funktion wird aufgerufen, sobald alle Module geladen sind.

Kann ich RequiredJs mit anderen JavaScript -Bibliotheken wie JQuery verwenden?

Ja, Sie k?nnen RequestJs mit anderen JavaScript -Bibliotheken wie JQuery verwenden. RequiredJS verfügt über eine integrierte Funktion zum Laden herk?mmlicher nicht modularer Skripte, die define() nicht verwenden, um Abh?ngigkeiten zu deklarieren und Modulwerte zu setzen, die als "Shim" bezeichnet werden. Mit Shim k?nnen Sie Abh?ngigkeiten und Exporte für Skripte angeben, die define() nicht verwenden, um Abh?ngigkeiten zu deklarieren und Modulwerte festzulegen.

Wie optimieren Sie meinen Code mit ReformeJs?

fordertJS wird mit einem Optimierungstool namens R.Js. geliefert. Dieses Tool kombiniert und komprimiert Ihre JavaScript -Dateien und ihre Abh?ngigkeiten in eine einzige Datei. Dies reduziert die Anzahl der HTTP -Anforderungen und die Dateigr??e, die die Ladezeit der Webseite erheblich verbessern k?nnen.

Was ist der Unterschied zwischen Define () und fordert () in forderjs?

define() -Funktion wird verwendet, um ein Modul zu definieren, w?hrend die require() -Funktion zum Laden des Moduls verwendet wird. Beide Funktionen akzeptieren eine Reihe von Abh?ngigkeiten und eine Funktion als Parameter. Die an define() übergebene Funktion wird jedoch verwendet, um Modulwerte zu erstellen, w?hrend die an require() übergebene Funktion verwendet wird, um den Code nach dem Laden des Moduls auszuführen.

Kann ich RequestJs in node.js verwenden?

Ja, Sie k?nnen RequestJs in node.js. Node.js hat jedoch ein eigenes Modulsystem, daher ben?tigen Sie wahrscheinlich keine Anforderungen. Wenn Sie denselben Code sowohl in Ihrem Browser als auch in Ihrem Node.js verwenden m?chten oder wenn Sie die AMD -API bevorzugen, ist FordernJS m?glicherweise eine gute Wahl.

Wie kann man mit Fehlern in forderjs umgehen?

fordertJs bietet einen onError Rückruf, um Fehler zu behandeln. Dieser Rückruf wird aufgerufen, wenn beim Laden des Moduls ein Fehler auftritt. Sie k?nnen diesen Rückruf verwenden, um den Fehler zu protokollieren oder wiederherzustellen.

Kann ich CSS -Dateien mit RequiredJs laden?

Ja, Sie k?nnen das Request-CSS-Plugin verwenden, um CSS-Dateien mit RequiredJS zu laden. Mit diesem Plugin k?nnen Sie CSS -Dateien laden und warten, wie Sie es bei JavaScript -Modulen tun würden.

Das obige ist der detaillierte Inhalt vonErstellen einer Bibliothek mit Anforderungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!