Detaillierte Erläuterung der Verwendung von require.js_javascript-Fähigkeiten-js-Tutorial-php.cn

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>

Nach dem Login kopieren

Dieser Code lädt mehrere JS-Dateien nacheinander.

Diese Schreibweise hat große Nachteile. Erstens stoppt der Browser beim Laden das Rendern der Webseite Wie im obigen Beispiel sollte 1.js 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:

(1) Implementieren Sie das asynchrone Laden von JS-Dateien, um zu vermeiden, dass Webseiten ihre Reaktion verlieren

(2) Verwalten Sie Abhängigkeiten zwischen Modulen, um das Schreiben und Warten von Code zu erleichtern.

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.

<script src="js/require.js"></script>

Nach dem Login kopieren

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

Nach dem Login kopieren

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.

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>

Nach dem Login kopieren

Das data-main-Attribut wird verwendet, um das Hauptmodul des Webprogramms anzugeben. Im obigen Beispiel befindet sich 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 Eingabecode der gesamten Webseite bedeutet. Es ist ein bisschen wie die main()-Funktion in der C-Sprache, der gesamte Code beginnt hier zu laufen.

Sehen wir uns an, wie man main.js schreibt.

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

// main.js

alarm("Laden erfolgreich!");

In diesem Fall besteht jedoch 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
　　});

Nach dem Login kopieren

Die Funktion require() akzeptiert zwei Parameter. Der erste Parameter ist 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 Funktion Derzeit wird sie aufgerufen, nachdem alle oben 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.

Schauen wir uns unten 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
　　});

Nach dem Login kopieren

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

4. Modul laden

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 bzw. 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"
　　　　}
　　});

Nach dem Login kopieren

上面的代码给出了三个模块的文件名，路径默认与main.js在同一个目录（js子目录）。如果这些模块在其他目录，比如js/lib目录，则有两种写法。一种是逐一指定路径。

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

Nach dem Login kopieren

另一种则是直接改变基目录（baseUrl）。

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

Nach dem Login kopieren

如果某个模块在另一台主机上，也可以直接指定它的网址，比如：

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

Nach dem Login kopieren

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
　　　　};
　　});

Nach dem Login kopieren

加载方法如下：

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

当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'
　　　　　　}
　　　　}
　　});

Nach dem Login kopieren

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

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

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

Nach dem Login kopieren

七、require.js插件

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

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

以上就是本文的全部所述，希望本文分享对大家有所帮助。