So modularisieren Sie require.js mit Front-End-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.

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:

Implementieren Sie das asynchrone Laden von JS-Dateien, um zu vermeiden, dass Webseiten die Reaktion verlieren.

Verwalten Sie Abhängigkeiten zwischen Modulen. Dies 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

Manche 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:

Das 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.

Das data-main-Attribut 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.

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 so:
　

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

Eine besteht darin, es unten auf der Webseite zu laden, und die andere darin, es so zu schreiben:

<script src="js/require.js" defer async="true" ></script>

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 Funktion main() 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("加载成功！");

Aber in diesem Fall besteht keine Notwendigkeit, require.js zu verwenden. Eine wirklich häufige Situation besteht darin, dass das Hauptmodul von anderen Modulen abhängt. In diesem Fall muss die in der AMD-Spezifikation definierte Funktion require() verwendet werden.
　

// main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// some code here
});

> Die Funktion require() 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, nachdem 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 jQuery und unterstreichen Sie zuerst und backbone, bevor Sie die Rückruffunktion ausführen. 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. Der Pfad ist standardmäßig das gleiche 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 Möglichkeit 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, wie zum Beispiel:

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

require.js-Anforderung:

每个模块是一个单独的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文件

本篇介绍了用前端js模块化编写require.js，想要更多相关学习内容请关注php中文网。

相关推荐：

关于AJAX ASP/PHP 请求实例的相关知识

关于AJAX中 XML 的实例讲解

关于 AJAX 投票的演示

Das obige ist der detaillierte Inhalt vonSo modularisieren Sie require.js mit Front-End-JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!