Erstellen einer Bibliothek mit Anforderungen

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

definieren

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

Datei: Mylib.js

define(['jquery'], function($) {
    // $现在是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($) {
    // $现在是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

ein

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($) {
    // $现在是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?

Die

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!