Verständnis für das effektive JavaScript -Modul Laden

Modulare Programmierung unterteilt große Anwendungen in kleinere, einfach zu verwaltende Codeblöcke. Die modulbasierte Codierung vereinfacht die Wartung und verbessert die Wiederverwendbarkeit des Codes. Die Abhängigkeiten zwischen Managementmodulen sind jedoch ein großes Problem, mit dem Entwickler während des gesamten Anwendungsentwicklungsprozesses konfrontiert sind. RequestJS ist eines der beliebtesten Frameworks für die Verwaltung von Abhängigkeiten zwischen Modulen. In diesem Tutorial wird die Anforderungen des modularen Code untersucht und zeigt, wie ReformenJs helfen kann.

Schlüsselpunkte

• fordertJS ist ein beliebtes Framework für die Verwaltung von Abhängigkeiten zwischen JavaScript -Modulen, die die Geschwindigkeit und Qualität Ihres Codes, insbesondere in großen Projekten, verbessert.
• fordertJS verwendet das Laden von asynchronem Modul (AMD) zum Laden von Dateien, mit denen Skripte Module und deren Abhängigkeiten auf nicht blockierende Weise laden können.
• In Anforderung ist der gesamte Code in require() oder define() -Funktionen eingewickelt. Die require() -Funktion wird für Funktionen verwendet, die sofort ausgeführt werden, während die define() -Funktion verwendet wird, um Module zu definieren, die an mehreren Stellen verwendet werden können.
• fordertJs verbessert die Codequalität, indem sie die Modularität und die Trennung von Bedenken fördert, das Risiko reduziert, Konflikte zu benennen, indem der globale Geltungsbereich ordentlich gehalten wird und einen leistungsstarken Mechanismus zur Fehlerbehandlung bietet.

Laden Sie die JavaScript -Datei

Große Anwendungen erfordern normalerweise viele JavaScript -Dateien. Normalerweise verwenden sie <p> <code>credits.js

Hier erfolgt die Initialisierung vor dem Laden

. Dies führt zu einem Fehler, wie unten gezeigt. In diesem Beispiel sind nur drei JavaScript -Dateien erforderlich. In einem größeren Projekt können die Dinge leicht außer Kontrolle geraten. Hier kommt RefordyJs ins Spiel.

fordertJS Einführung

fordertJs ist ein bekanntes JavaScript-Modul und einen Dateiload, der von den neuesten Versionen beliebter Browser unterstützt wird. In RequestJs trennen wir den Code in Module, von denen jede eine einzige Verantwortung übernimmt. Zusätzlich müssen Abhängigkeiten beim Laden der Datei konfiguriert werden. Beginnen wir mit dem Herunterladen von Anforderungen. Kopieren Sie nach Abschluss des Downloads die Datei in Ihren Projektordner. Nehmen wir an, dass die Verzeichnisstruktur des Projekts nun der folgenden Abbildung ähnelt:

scripts main.js

<script> 标签逐个加载。此外，每个文件都可能依赖于其他文件。最常见的例子是 jQuery 插件，它们都依赖于核心 jQuery 库。因此，必须在加载任何 jQuery 插件之前加载 jQuery。让我们来看一个在实际应用程序中加载 JavaScript 文件的简单示例。假设我们有以下三个 JavaScript 文件： <p><code>purchase.js &lt;div class=&quot;code&quot; style=&quot;position:relative; padding:0px; margin:0px;&quot;&gt;&lt;pre class='brush:php;toolbar:false;'&gt;function purchaseProduct(){ console.log(&amp;quot;Function : purchaseProduct&amp;quot;); var credits = getCredits(); if(credits &amp;gt; 0){ reserveProduct(); return true; } return false; }&lt;/pre&gt;&lt;div class=&quot;contentsignin&quot;&gt;Nach dem Login kopieren&lt;/div&gt;&lt;/div&gt; &lt;p&gt;&lt;code&gt;products.js</code></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function reserveProduct(){ console.log(&quot;Function : reserveProduct&quot;); return true; }</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p><code>credits.js</code></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function getCredits(){ console.log(&quot;Function : getCredits&quot;); var credits = &quot;100&quot;; return credits; }</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p>在这个例子中，我们试图购买一个产品。首先，它检查是否有足够的积分可以购买产品。然后，在验证积分后，它预订产品。另一个脚本 <code>main.js</code> 通过调用 <code>purchaseProduct()</code> 来初始化代码，如下所示：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>var result = purchaseProduct();</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p><strong>可能出错的地方？</strong></p> <p>在这个例子中，<code>purchase.js</code> 依赖于 <code>credits.js</code> 和 <code>products.js</code>。因此，在调用 <code>purchaseProduct()</code> 之前需要加载这些文件。那么，如果我们按以下顺序包含 JavaScript 文件会发生什么情况呢？</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;script src=&quot;products.js&quot;&gt;&lt;/script&gt; Alle JavaScript -Dateien (einschließlich Anforderungsdateien) befinden sich im Ordner &lt;script src=&quot;purchase.js&quot;&gt;&lt;/script&gt;. &lt;script src=&quot;main.js&quot;&gt;&lt;/script&gt; Dateien werden für die Initialisierung verwendet, und andere Dateien enthalten Anwendungslogik. Lassen Sie uns sehen, wie Skripte in HTML -Dateien einbezogen werden. &lt;script src=&quot;credits.js&quot;&gt;&lt;/script&gt;&lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;&lt;code class=&quot;html&quot;&gt;&lt;🎜&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p> Dies ist der einzige Code, den Sie die Datei mit RequiredJs einfügen müssen. Sie fragen sich vielleicht, was mit anderen Dateien los ist und wie sie enthalten sind. Das Attribut <code>data-main</code> definiert den Initialisierungspunkt der Anwendung. In diesem Fall ist es <code>main.js</code>. RequiredJS verwendet <code>main.js</code>, um andere Skripte und Abhängigkeiten zu finden. In diesem Fall befinden sich alle Dateien im selben Ordner. Mit Logic können Sie Dateien in einen beliebigen Ordner verschieben. Schauen wir uns nun einen Blick auf <code>main.js</code> an. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>require([&quot;purchase&quot;],function(purchase){ purchase.purchaseProduct(); });</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <p> In Anforderung ist der gesamte Code in <code>require()</code> oder <code>define()</code> -Funktionen eingewickelt. Das erste Argument dieser Funktionen gibt die Abhängigkeit an. Im vorherigen Beispiel hängt die Initialisierung von <code>purchase.js</code> ab, da sie <code>purchaseProduct()</code> definiert. Bitte beachten Sie, dass die Dateierweiterung weggelassen wurde. Dies liegt daran, dass Anforderung nur <code>.js</code> Dateien berücksichtigt. Das zweite Argument für <code>require()</code> ist eine anonyme Funktion, die ein Objekt akzeptiert, das die in der abhängigen Datei enthaltenen Funktionen aufruft. In diesem Fall haben wir nur eine Abhängigkeit. Mehrere Abhängigkeiten können mit der folgenden Syntax geladen werden: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>require([&quot;a&quot;,&quot;b&quot;,&quot;c&quot;],function(a,b,c){ });</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p> <strong> Erstellen Sie eine Anwendung mit RequiredJS </strong> </p> <p> In diesem Abschnitt werden wir das im vorherige Abschnitt erörterte reine JavaScript -Beispiel in fordernjs konvertieren. Wir haben <code>main.js</code> behandelt, also gehen wir weiter, um andere Dokumente zu besprechen. <code>purchase.js</code> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>define([&quot;credits&quot;,&quot;products&quot;], function(credits,products) { console.log(&quot;Function : purchaseProduct&quot;); return { purchaseProduct: function() { var credit = credits.getCredits(); if(credit &gt; 0){ products.reserveProduct(); return true; } return false; } } });</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p> Erstens erklären wir, dass die Kauffunktion von <code>credits</code> und <code>products</code> abhängt. In der Aussage <code>return</code> können wir die Funktionen jedes Moduls definieren. Hier haben wir die Funktionen <code>getCredits()</code> und <code>reserveProduct()</code> auf dem übergebenen Objekt bezeichnet. <code>product.js</code> ähnelt <code>credits.js</code>, wie unten gezeigt. <code>products.js</code> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>define(function(products) { return { reserveProduct: function() { console.log(&quot;Function : reserveProduct&quot;); return true; } } });</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p> <code>credits.js</code> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>define(function() { console.log(&quot;Function : getCredits&quot;); return { getCredits: function() { var credits = &quot;100&quot;; return credits; } } });</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p> Beide Dateien sind als eigenständige Module konfiguriert - was bedeutet, dass sie nicht von irgendetwas abhängen. Das Wichtigste ist, dass <code>define()</code> anstelle von <code>require()</code> verwendet wird. Die Auswahl von <code>require()</code> oder <code>define()</code> hängt von der Struktur des Codes ab und wird im nächsten Abschnitt erörtert. </p> <p> <strong> Verwenden Sie <code>require()</code> mit <code>define()</code> </strong> </p> Ich habe bereits erwähnt, dass wir <p> und <code>require()</code> verwenden können, um Abhängigkeiten zu laden. Das Verständnis des Unterschieds zwischen diesen beiden Funktionen ist für die Verwaltung von Abhängigkeiten von wesentlicher Bedeutung. Die <code>define()</code> -Funktion wird verwendet, um die Funktion sofort auszuführen, während die <code>require()</code> -Funktion verwendet wird, um Module zu definieren, die an mehreren Stellen verwendet werden können. In unserem Beispiel müssen wir die <code>define()</code> -Funktion sofort ausführen. Daher wird <code>purchaseProduct()</code> in <code>require()</code> verwendet. Andere Dateien sind jedoch wiederverwendbare Module, verwenden Sie also <code>main.js</code>. <code>define()</code> </p> <p> Warum ReforntureJs so wichtig ist <strong> </strong><p> In reinen JavaScript -Beispielen wird ein Fehler aufgrund der falschen Ladereihenfolge von Dateien generiert. Löschen Sie nun die Datei <code>credits.js</code> im Beispiel für Anforderung und sehen Sie, wie sie funktioniert. Die folgende Abbildung zeigt die Ausgabe des Browser -Check -Tools. </p> <p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174036404874237.jpg" class="lazy" alt="Understanding RequireJS for Effective JavaScript Module Loading " /> </p> <p> Der Unterschied besteht darin, dass in dem Beispiel für Anforderungskörper kein Code ausgeführt wird. Wir können dies bestätigen, weil auf der Konsole nichts gedruckt wird. Im Beispiel des reinen JavaScript -Beispiels drucken wir eine Ausgabe auf der Konsole, bevor wir den Fehler generieren. RequiredJS wartet, bevor er alle abhängigen Module laden, bevor die Funktion ausgeführt wird. Wenn ein Modul verloren geht, wird kein Code ausgeführt. Dies hilft uns, die Integrität unserer Daten aufrechtzuerhalten. </p> <p> <strong> Sequenz der Verwaltung von Abhängigkeitsdateien </strong> </p> <p> fordertJS verwendet das Laden von asynchronem Modul (AMD) zum Laden von Dateien. Jedes abhängige Modul beginnt in der angegebenen Reihenfolge mit asynchronen Anforderungen. Selbst mit der Dateibestellung können wir nicht garantieren, dass die erste Datei aufgrund der asynchronen Natur vor der zweiten Datei geladen wird. Daher ermöglicht uns bei ReformenJs die Shim -Konfiguration, um die Abfolge von Dateien zu definieren, die in der richtigen Reihenfolge geladen werden müssen. Sehen wir uns an, wie Sie Konfigurationsoptionen in RequestJs erstellen. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;🎜&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p> fordertJs ermöglicht es uns, Konfigurationsoptionen mithilfe der Funktion <code>config()</code> bereitzustellen. Es akzeptiert einen Parameter mit dem Namen <code>shim</code>, mit dem wir eine obligatorische Abhängigkeit von Abhängigkeiten definieren können. Sie finden eine vollständige Konfigurationshandbuch in der Dokumentation von RequiredJS -API. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>require([&quot;purchase&quot;],function(purchase){ purchase.purchaseProduct(); });</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <p> Unter normalen Umständen werden diese vier Dateien in der angegebenen Reihenfolge geladen. Hier hängt <code>source2 von <code>source1 ab. Sobald <code>source1 geladen ist, wird <code>source2 alle Abhängigkeiten geladen. <code>dependency1 und <code>dependency2 können jedoch weiterhin geladen werden. Unter Verwendung der Shim -Konfiguration müssen Abhängigkeiten vor <code>source1 geladen werden. Daher wird kein Fehler erzeugt. <p> <strong> Schlussfolgerung <p> Ich hoffe, dieses Tutorial hilft Ihnen beim Einstieg mit Reformenjs. Obwohl es einfach aussieht, ist es wirklich leistungsfähig, Abhängigkeiten in großen JavaScript -Anwendungen zu verwalten. Allein dieses Tutorial reicht nicht aus, um alle Aspekte von Anforderungen zu behandeln. Ich hoffe, Sie können alle erweiterten Konfigurationen und Techniken mithilfe der offiziellen Website lernen. <p> <strong> (Folgendes ist eine pseudooriginale Erstellung des FAQs-Teils im Originaltext, bei der die ursprüngliche Bedeutung aufrechterhalten und die Sätze angepasst und neu geschrieben) <p> <strong> FAQs über das Lademodul des JavaScript -Moduls mit RequiredJS <p> <strong> Was wird die Hauptanforderungen in JavaScript verwendet? <p> fordertJS ist eine JavaScript -Datei und einen Modulloader, der für die Verwendung von Browser optimiert ist, aber auch für andere JavaScript -Umgebungen geeignet ist. Der Hauptzweck für die Verwendung von RequiredJs besteht darin, die Geschwindigkeit und Qualität Ihres Codes zu verbessern. Sie können Abhängigkeiten zwischen Codemodulen und Skripten effizient verwalten. Dies ist besonders in großen Projekten nützlich, bei denen einzelne Skripte komplex werden können. RequestJs hält auch den globalen Bereich sauber, indem er die Verwendung globaler Variablen verringert. <p> <strong> Wie kann man mit Abhängigkeiten umgehen? <p> fordertJs behandelt Abhängigkeiten über einen Mechanismus, der als AMD (Asynchronous Modul Definition) bezeichnet wird. Dadurch kann das Skript nicht blockierende Module und ihre Abhängigkeiten laden. Wenn Sie ein Modul definieren, geben Sie seine Abhängigkeiten an und stellt sicher, dass diese Abhängigkeiten vor dem Modul selbst geladen werden. Auf diese Weise können Sie sicherstellen, dass bei der Ausführung des Moduls alle erforderlichen Code verfügbar sind. <p> <strong> Kann Js mit node.js benötigt werden? <p> Ja, RequiredJs können mit node.js verwendet werden, obwohl es häufiger in Browsern verwendet wird. Bei Verwendung mit node.js können Sie mit BedarfJS den serverseitigen JavaScript-Code in Module organisieren, genau wie in Ihrem Browser. Node.js verfügt jedoch über ein eigenes Modulsystem (CommonJS), sodass die Verwendung von RequestJS weniger häufig ist. <p> <strong> Wie verbessert man die Codequalität? <p> fordertJs verbessert die Codequalität, indem sie die Modularität und die Trennung von Bedenken fördert. Durch das Organisieren des Code in Module, jeweils mit seiner spezifischen Funktionalität, können Sie Code schreiben, der leichter zu warten und zu testen ist. Es verringert auch das Risiko, Konflikte zu benennen, indem der globale Bereich ordentlich bleibt. <p> <strong> Was ist der Unterschied zwischen Anforderungen und CommonJs? <p> fordertJs und CommonJs sind beide JavaScript -Modulsysteme, aber sie haben einige wichtige Unterschiede. RequiredJS verwendet das AMD -Format (Asynchronous Modul Definition), mit dem Module und deren Abhängigkeiten asynchron im Browser geladen werden. Andererseits synchronisiert CommonJs, die von Node.js verwendet werden. <p> <strong> Wie definieren Sie Module in forderjs? <p> In RequiredJs können Sie die Funktion <code>define verwenden, um Module zu definieren. Diese Funktion erfordert zwei Parameter: ein Abhängigkeitsarray und eine Fabrikfunktion. Sobald alle Abhängigkeiten geladen sind, wird die Fabrikfunktion aufgerufen und der Wert des Moduls sollte zurückgegeben werden. <p> <strong> Wie lädt man Module in RefordeJs? <p> Um ein Modul in fordernJs zu laden, können Sie die Funktion <code>require verwenden. Diese Funktion akzeptiert zwei Parameter: ein Abhängigkeitsarray und eine Rückruffunktion. Sobald alle Abhängigkeiten geladen sind, wird die Rückruffunktion aufgerufen. <p> <strong> Kann ich RequiredJs mit anderen JavaScript -Bibliotheken verwenden? <p> Ja, RequiredJs können mit anderen JavaScript -Bibliotheken wie JQuery, Backbone und Angular verwendet werden. Es kann diese Bibliotheken als Module laden und ihre Abhängigkeiten verwalten. <p> <strong> Wie kann ich Fehler umgehen? <p> fordertJs hat einen leistungsstarken Fehlerbehandlungsmechanismus. Wenn das Skript nicht geladen werden kann, löst RequiredJS ein Fehlerereignis aus. Sie können auf dieses Ereignis zuhören und Fehler in Ihrem Code angemessen behandeln. <p> <strong> Kann ich RequiredJs für die Produktion verwenden? <p> Ja, RequiredJs eignet sich für Entwicklungs- und Produktionsumgebungen. Für Produktionsumgebungen bietet RequestJS ein Optimierungstool, das Ihre JavaScript -Dateien kombiniert und komprimiert, um die Ladezeit zu verbessern. </script>

Das obige ist der detaillierte Inhalt vonVerständnis für das effektive JavaScript -Modul Laden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!