Eine kurze Analyse des modularen Schreibens von js require.js

requirejs ist ein JavaScript-Datei- und Modullader. Mit requireJS können Sie Ihren JavaScript-Code in Dateien und Module aufteilen und gleichzeitig die Abhängigkeiten zwischen den einzelnen Modulen verwalten.

Das Ziel von RequireJS besteht darin, die Modularisierung von Code zu fördern, und es verwendet einen anderen Skriptladeschritt als das herkömmliche „Skript“-Tag. Die Verwendung von RequireJS zum Laden modularer Skripte verbessert die Ladegeschwindigkeit und Qualität Ihres Codes.

1. Warum require.js verwenden?

In den Anfängen wurden alle Javascript-Codes in einer Datei geschrieben, und es reichte aus, diese eine Datei zu laden. Später gab es immer mehr Codes und eine Datei reichte nicht mehr aus. Sie musste in mehrere Dateien aufgeteilt und nacheinander geladen werden. Ich glaube, viele Leute haben den folgenden Webseitencode gesehen:

<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>
<script src="5.js"></script>
<script src="6.js"></script>

Dieser Code lädt mehrere JS-Dateien nacheinander.

Diese Schreibweise hat große Nachteile.

Erstens stoppt der Browser beim Laden das Rendern der Webseite. Je mehr Dateien geladen werden, desto länger verliert die Webseite die Reaktion

Aufgrund der Abhängigkeiten zwischen js-Dateien. Es muss die Ladereihenfolge strikt sicherstellen (z. B. muss 1.js im obigen Beispiel vor 2.js stehen), und das Modul mit der größten Abhängigkeit muss zuletzt geladen werden. Wenn die Abhängigkeiten komplex sind, wird das Schreiben und Warten von Code schwierig . .

require.js wurde geboren, um diese beiden Probleme zu lösen:

Erzielen Sie ein asynchrones Laden von JS-Dateien, um zu vermeiden, dass Webseiten die Reaktion verlieren.

Abhängigkeiten zwischen Modulen verwalten Das macht es einfacher Code schreiben und pflegen.

2. Laden von require.js

Der erste Schritt zur Verwendung von require.js besteht darin, die neueste Version von der offiziellen Website herunterzuladen.

Nach dem Herunterladen wird davon ausgegangen, dass es im Unterverzeichnis js abgelegt wird und geladen werden kann.

7c439788e166f531c8ad0b30265c71032cacc6d41bbb37262a98f745aa00fbf0

Einige Leute denken möglicherweise, dass das Laden dieser Datei auch dazu führen kann, dass die Webseite nicht mehr reagiert. Es gibt zwei Lösungen:

Eine besteht darin, es unten auf der Webseite zu laden, die andere darin, es wie folgt zu schreiben: ​

54f7568560515ab893b925017f5d99022cacc6d41bbb37262a98f745aa00fbf0

async-Attribut gibt an, dass diese Datei asynchron geladen werden muss, um zu verhindern, dass die Webseite nicht mehr reagiert. Der IE unterstützt dieses Attribut nicht und unterstützt nur die Verzögerung, sodass auch die Verzögerung geschrieben wird.

Nach dem Laden von require.js besteht der nächste Schritt darin, unseren eigenen Code zu laden. Angenommen, unsere eigene Codedatei ist main.js und befindet sich ebenfalls im js-Verzeichnis. Dann schreiben Sie es einfach wie folgt: 　

35be17e58c59207c30045b58673f385a2cacc6d41bbb37262a98f745aa00fbf0

Die Daten Das Attribut -main wird verwendet, um das Hauptmodul des Webprogramms anzugeben.

Im obigen Beispiel ist es main.js im js-Verzeichnis. Diese Datei wird zuerst von require.js geladen. Da die Standarddateierweiterung von require.js js ist, kann main.js mit main abgekürzt werden.

3. So schreiben Sie das Hauptmodul

Die main.js im vorherigen Abschnitt nenne ich das „Hauptmodul“, was den Eintragscode der gesamten Webseite bedeutet. Es ist ein bisschen wie die main()-Funktion in der C-Sprache, der gesamte Code beginnt hier zu laufen.

Werfen wir einen Blick darauf, wie man main.js schreibt.

Wenn unser Code nicht von anderen Modulen abhängt, können wir Javascript-Code direkt schreiben. ​

// main.js
 alert("加载成功！");
但这样的话，就没必要使用require.js了。真正常见的情况是，主模块依赖于其他模块，这时就要使用AMD规范定义的的require()函数。 　　// main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
 // some code here
});

require()-Funktion akzeptiert zwei Parameter. Der erste Parameter:

Ein Array, das die Module angibt, von denen es abhängt. Das obige Beispiel ist ['moduleA', 'moduleB', 'moduleC'], das heißt, das Hauptmodul hängt von diesen drei Modulen ab

Eine Rückruffunktion, die aufgerufen wird, wenn alle zuvor angegebenen Module erfolgreich geladen wurden. Geladene Module werden als Parameter an diese Funktion übergeben, sodass diese Module innerhalb der Callback-Funktion verwendet werden können.

require() lädt ModulA, ModulB und ModulC asynchron, und die von ihm angegebene Rückruffunktion wird erst ausgeführt, nachdem die vorherigen Module erfolgreich geladen wurden, wodurch das Abhängigkeitsproblem gelöst wird.

Nachfolgend sehen wir uns ein praktisches Beispiel an.

Angenommen, das Hauptmodul hängt von den drei Modulen jquery, underscore und backbone ab, kann main.js wie folgt geschrieben werden:

require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
    // some code here
});

require.js lädt zuerst jQuery, underscore und Backbone und führen Sie dann die Rückruffunktion erneut aus. Der Code des Hauptmoduls wird in die Callback-Funktion geschrieben.

4. Modulladen

Im letzten Beispiel des vorherigen Abschnitts sind die abhängigen Module des Hauptmoduls ['jquery', 'underscore', 'backbone']. Standardmäßig geht require.js davon aus, dass sich diese drei Module im selben Verzeichnis wie main.js befinden und die Dateinamen jquery.js, underscore.js und backbone.js lauten, und lädt sie dann automatisch.

Mit der Methode require.config() können wir das Ladeverhalten des Moduls anpassen. require.config() wird an den Kopf des Hauptmoduls (main.js) geschrieben. Der Parameter ist ein Objekt und das paths-Attribut dieses Objekts gibt den Ladepfad jedes Moduls an. ​

require.config({
 paths: {
 "jquery": "jquery.min",
 "underscore": "underscore.min",
 "backbone": "backbone.min"
 }
});

Der obige Code gibt die Dateinamen der drei Module an. Standardmäßig befindet sich der Pfad im selben Verzeichnis wie main.js (js-Unterverzeichnis). Wenn sich diese Module in anderen Verzeichnissen befinden, beispielsweise im Verzeichnis js/lib, gibt es zwei Möglichkeiten, sie zu schreiben.

Eine besteht darin, die Pfade einzeln anzugeben. ​

require.config({
 baseUrl: "js/lib",
 paths: {"jquery": "jquery.min", "underscore": "underscore.min", "backbone": "backbone.min"}
});

Die andere besteht darin, das Basisverzeichnis (baseUrl) direkt zu ändern.

require.config({
 baseUrl: "js/lib",
 paths: {
  "jquery": "jquery.min",
  "underscore": "underscore.min",
  "backbone": "backbone.min"
 }
});

Wenn sich ein Modul auf einem anderen Host befindet, können Sie dessen URL auch direkt angeben, z. B.:

require.config({
　　　paths: {
　　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
　　　}
});

require.js要求:

每个模块是一个单独的js文件。这样的话，如果加载多个模块，就会发出多次HTTP请求，会影响网页的加载速度。因此，require.js提供了一个优化工具，当模块部署完毕以后，可以用这个工具将多个模块合并在一个文件中，减少HTTP请求数。

五、AMD模块的写法

require.js加载的模块，采用AMD规范。也就是说，模块必须按照AMD的规定来写。

具体来说，就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。

假定现在有一个math.js文件，它定义了一个math模块。那么，math.js就要这样写： 　　

// math.js
　define(function (){
　　　var add = function (x,y){
　　　　　return x+y;
　　　};
　　　return {
　　　　　add: add
　　　};
　});

加载方法如下： 　

// main.js
require(['math'], function (math){
　　alert(math.add(1,1));
});

如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。 　　

define(['myLib'], function(myLib){
　　　function foo(){
　　　　　myLib.doSomething();
　　　}
　　　return {
　　　　　foo : foo
　　　};
　});

当require()函数加载上面这个模块的时候，就会先加载myLib.js文件。

六、加载非规范的模块

理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合。那么，require.js是否能够加载非规范的模块呢？

回答是可以的。

这样的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。

举例来说，underscore和backbone这两个库，都没有采用AMD规范编写。如果要加载它们的话，必须先定义它们的特征。 　　

require.config({
 shim: {
  'underscore': {
   exports: '_'
  },
  'backbone': {
   deps: ['underscore', 'jquery'],
   exports: 'Backbone'
  }
 }
});

require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。

比如，jQuery的插件可以这样定义：

shim: {
　　'jquery.scroll': {
　　　　deps: ['jquery'],
　　　　exports: 'jQuery.fn.scroll'
　　}
}

七、require.js插件

require.js还提供一系列插件，实现一些特定的功能:

domready插件，可以让回调函数在页面DOM结构加载完成后再运行。

require(['domready!'], function (doc) {
 // called once the DOM is ready
});

text和image插件，则是允许require.js加载文本和图片文件。 　　

define([
   'text!review.txt',
   'image!cat.jpg'
  ],
  function (review, cat) {
   console.log(review);
   document.body.appendChild(cat);
  }
);

类似的插件还有json和mdown，用于加载json文件和markdown文件。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，同时也希望多多支持PHP中文网！

更多浅析js的模块化编写 require.js相关文章请关注PHP中文网！