JS-Modularität-RequireJS

Heute präsentiere ich Ihnen die JS-Modularisierung – RequireJS. Was sind die Vorsichtsmaßnahmen zur JS-Modularisierung und wie sollten Sie RequireJS verwenden? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Ich habe schon immer von RequireJS gehört, aber ich hatte noch nie die Gelegenheit, etwas darüber zu erfahren. Ich weiß nur, dass es sich um eine API zur Modularisierung von js handelt. Ich arbeite kürzlich an React und seine Komponentisierungsideen stimmen mit den js-Modularisierungsideen überein. Ich möchte einfach RequireJS zum Projekt hinzufügen, während ich React anwende, um zu sehen, ob es einen guten Effekt auf das Laden oder die Entwicklung der Seite hat.

Was ist RequireJS?

Bevor ich erkläre, was RequireJS ist, muss ich den Hintergrund der modularen Geschichte von Javascript erwähnen. Tatsächlich entwickelte sich JavaScript in den Anfängen zu einer aufstrebenden Skriptsprache mit einer großen Vision. Es war keine Sprache, die nur für den Kunden entwickelt wurde. Mit der späteren Popularität von Webanwendungen verbreitete sich JavaScript jedoch schnell als browserseitige Skriptsprache und wurde durch die Konkurrenz zwischen Netscape und Microsoft vorzeitig standardisiert. Dies hat zu vielen Mängeln von JS geführt, darunter die Modularität (aber Sie werden überrascht sein, dass Javascript tatsächlich Import, Export usw. als reservierte Wörter verwendet, was zeigt, dass dies tatsächlich beim Entwurf berücksichtigt wurde. Der neue Standard es6 ermöglicht auch native Unterstützung der Modularisierung. Da Webanwendungen dann immer komplexer werden, werden immer mehr JavaScript-Codes eingebettet, und mit dem Aufkommen von Knoten wird die modulare Programmierung zu einem Muss.

Es gab also das Modulsystem, das später vom Dojo-Toolkit und der Closure-Bibliothek von Google unterstützt wurde. Es gibt auch zwei sehr gängige Standardspezifikationen, CommonJS und AMD. Ich werde hier nicht auf Details eingehen. Wir müssen nur wissen, dass die API, die die CommonJS-Spezifikation implementiert, Module synchron lädt, während die API, die die AMD-Spezifikation implementiert, Module asynchron lädt.
Theoretisch ist das nicht blockierende Laden von AMD-Spezifikationen also besser für den Browser geeignet. RequireJS ist die beste Implementierung der AMD-Spezifikation. Kopieren Sie eine Beschreibung von RequireJS aus einem offiziellen Dokument:

RequireJS ist ein JavaScript-Modullader. Es eignet sich hervorragend für die Verwendung im Browser, kann aber auch in anderen Skriptumgebungen wie Rhino und Node verwendet werden. Durch die Verwendung von RequireJS zum Laden modularer Skripte werden die Ladegeschwindigkeit und die Qualität Ihres Codes verbessert.

Warum RequireJS?

Da wir nun wissen, was RequireJS tut, wissen wir fast auch, warum wir RequireJS verwenden. Aber lassen Sie uns die Vorteile der Verwendung von RequireJS zusammenfassen.

Asynchrones „Laden“. Wir wissen, dass Websites das Skript normalerweise am Ende des HTML-Codes platzieren, um Seitenblockierungen zu vermeiden, die durch die Ausführung von js durch den Browser verursacht werden. Bei Verwendung von RequireJS wird die -Rückruffunktion ausgeführt, nachdem das entsprechende js geladen wurde. Dieser Prozess ist asynchron, sodass die Seite nicht blockiert wird.

Laden nach Bedarf. Über RequireJS können Sie das entsprechende js-Modul laden, wenn Sie die js-Logik laden müssen, wodurch eine große Anzahl von Anfragen und Datenübertragungen beim Initialisieren der Webseite vermieden werden. Möglicherweise sind einige Module für einige Leute überhaupt nicht verfügbar es ist nötig, dann erscheint es unnötig.

Bequemere Modulabhängigkeitsverwaltung. Ich glaube, Sie müssen auf Abhängigkeitsfehler aufgrund von Problemen mit der Skript-Tag-Reihenfolge gestoßen sein. Diese Funktion ist undefiniert, diese Variable ist undefiniert und so weiter. Durch den Mechanismus von RequireJS können Sie sicherstellen, dass verwandte Dateien ausgeführt werden, nachdem alle abhängigen Module geladen wurden, sodass sie eine Rolle bei der Abhängigkeitsverwaltung spielen können.

Effizientere Versionsverwaltung. Denken Sie darüber nach, wenn Sie noch ein Skript verwenden, um jQuery2 einzuführen. Ändern Sie diese 100 Seiten. Wenn Ihr requireJS jedoch über eine jQuery-Pfadzuordnung in der Konfiguration verfügt, müssen Sie nur eine Stelle ändern.

Natürlich gibt es noch andere Vorteile, wie z. B. dass CDN keine JS-Dateien laden kann, lokale Dateien angefordert werden können usw., die ich hier nicht auflisten werde.

RequireJS Verwenden Sie

Dateien, die auf der Seite eingeführt werden müssen

<script data-main="js/main" src="xxx/xxxx/require.js"></script>

Verwenden Sie RequireJS, Sie müssen nur eine require.js einführen. Es ist zu beachten, dass es besser ist, dieses JS nur über das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag einzuführen. Dann muss nur noch die gesamte Geschäftslogik Ihrer Seite in main.js geschrieben werden (die Rolle des data-main-Attributs wird später besprochen). Was tun mit anderen referenzierten Abhängigkeiten? Natürlich wird es bei Bedarf über require eingeführt!

Grundlegende Übersicht über Require

Tatsächlich hat die gesamte Quelldatei von Requirejs, einschließlich Kommentaren, nur 2000 Zeilen, und die extern bereitgestellten Variablen sind tatsächlich drei: requirejs, require und define.

Requirejs ist nur ein Alias ​​von require. Der Zweck besteht darin, dass Sie die requireJS-API weiterhin verwenden können, indem Sie requirejs verwenden (in diesem Artikel gibt es keinen relevanten Konflikt, also require). wird noch verwendet).

Das bedeutet also, dass Sie zum Einstieg nur „require“, „require.config“ und „define“ beherrschen müssen.

本文将以介绍require,require.config,data-main,define的顺序来介绍RequireJS。让比较简单的RequireJS更加简单，争取让大家只看这篇文章就能用好RequireJS。至于RequireJS是如何解决循环依赖,对于没有实现amd的模块如何通过shim来导出，如何在node中使用等问题。本文并没有提及，详细有需要可以去官方查阅。

require.js可以通过npm下载或者在官网获得。jquery同理，jquery需要下载1.7.0或以上的版本。然后把对应的代码拷入对应的文件中，给出余下两个文件的代码:

//  js/script/index.html<!DOCTYPE html><html><head>
    <title>Require Demo 1</title></head><body>
    <div>
        <h1>Require Demo 1 -- usage of Require()</h1>
        <button id="contentBtn">Click me</button>
    <p id="messagebox"></p>
    </div>
    <script data-main="js/script/main" src="js/lib/require.js" type="text/javascript"></script> </body></html>      
    //  js/script/main.js
    require.config(
        {            paths: {                &#39;jquery&#39;: &#39;../lib/jquery-1.7.2&#39;
            }
        }
    );    require([&#39;jquery&#39;],function ($) {
             $(document).on(&#39;click&#39;,&#39;#contentBtn&#39;,function(){
                $(&#39;#messagebox&#39;).html(&#39;You have access Jquery by using require()&#39;);
             });
    });

先看index.html的代码，其实比较简单，页面上在js中会用到的就是一个button和一个p标签。然后整个页面就只是一个js文件是通过3f1c4e4b6b16bbbd69b2ee476dc4f83a标签加载的，就是require.js。注意到标签中有一个data-main属性，你现在只需要了解require.js会在加载完成以后通过回调方法去加载这个data-main里面的js文件，所以这个js文件被加载的时候，RequireJS已经加载执行完毕。

然后接着看main.js文件,里面被一个匿名立即执行函数所包括。在require.config(...)中，可以配置许多配置项，后面会有详细说明。上面在config中添加了一个path，在path配置了一个模块ID和路径的映射，这样在后续的所有函数中就可以直接通过模块ID来引入依赖，而不用再多次引入依赖多次输入路径带来的麻烦。

然后接着就是我们的require(...)函数了。上面的语法中require函数接受的第一个参数是，所依赖模块的一个数组。即使你只需要传入一个依赖，也需要把这个依赖放进数组中传入。如果你有如本例子中设置了模块ID和路径的映射，那你在传入依赖的时候就可以使用模块ID来代替路径，如果没有配置模块ID你当然也可以通过路径来引进对应的模块。接着是传入回调函数，当引入的依赖加载完毕后，这个回调函数就会被触发。如果你传入的依赖有注入变量（函数）,然后在回调函数中需要用到，你就需要按照顺序在回调函数的参数中添加别名，在本例子中可以通过别名$来使用jQuery的相关API。所以有注入的模块需要放在无注入或者不需要调用模块的模块前面，方便回调函数传入别名。例子中在回调函数中为id为contentBtn的button注册监听事件，如果触发，则往id为messagebox的p标签添加相应的内容。

另外还需要额外说明的是路径，不管是在配置中写路径还是直接在require函数中写路径，你都需要了解requireJS在不同情况下的相对路径。

以下是相对路径的规则:

1.如果3f1c4e4b6b16bbbd69b2ee476dc4f83a标签引入require.js时没有指定data-main属性，则以引入该js的html文件所在的路径为根路径。

2.如果有指定data-main属性，也就是有指定入口文件，则以入口文件所在的路径为根路径。在本例子中也就是main.js所在的script文件夹就是根路径，这也是为什么配置jQuery的时候需要返回上层目录再进入lib目录才能找到jQuery文件。

3.如果再require.config()中有配置baseUrl，则以baseUrl的路径为根路径。
以上三条优先级逐级提升，如果有重叠，后面的根路径覆盖前面的根路径。

define

讲完了如何引入模块，现在讲如何定义一个模块,require定义一个模块是通过 define = function (name, deps, callback)完成的,第一个参数是定义模块名，第二个参数是传入定义模块所需要的依赖，第三个函数则是定义模块的主函数，主函数和require的回调函数一样，同样是在依赖加载完以后再调用执行。
先看个例子:

当你没有任何依赖的时候,你可以这么写:

//   js/script/desc.jsdefine(function(){    return{        decs : 'this js will be request only if it is needed',    };})      
//   然后在main.js的添加如下代码//   js/script/main.js
    $('#messagebox').html('You have access Jquery by using require()');
＋  require(['script/desc'],function(desc){
＋       alert(JSON.stringify(desc));

再次打开网页，打开network视图，点击按钮，通过require获得的desc模块就会alert出来，同时你会发现，desc.js是按需请求的，并不是在页面一开始的时候就请求的。

总结

以上就是关于关于RequireJS简单使用的介绍了，大家有需要可以直接看源码，大概就2000多行，不看具体实现，看它对几个函数声明的描述，对使用起来也是很有帮助的，你会发现有一些连官方文档都没提及到的一些特性(比如require()方法可以直接传入config配置作为第一个参数)。

Wenn Sie außerdem die offizielle API von RequireJS überprüfen müssen, wird empfohlen, nach Möglichkeit direkt die offizielle englische Dokumentation zu besuchen. Wenn die offizielle chinesische Dokumentation immer noch in der alten Version steckt, vergessen Sie sie, denn die Übersetzung ist ruckelig und schwer verständlich. Manche Beschreibungen, die offensichtlich falsch sind, sind tatsächlich eine Frage der Haftung. Als ich das chinesische Dokument las, war es für mich wirklich schwer zu verstehen. Als ich später das englische Dokument las, wurde es viel flüssiger.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Verwenden von Video.js zur Implementierung der H5-Liveübertragungsschnittstelle

So merken Sie sich Konto und Passwort mit JS-Code

JavaScript grundlegender mentaler Datentyp

Das obige ist der detaillierte Inhalt vonJS-Modularität-RequireJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!