Detaillierte Erklärung der Verwendung von RequireJs

一、为什么使用RequireJS？

　 <script src="a.js"></script>
　　<script src="b.js"></script>
　　<script src="c.js"></script>

上述多个js文件加载的时候，浏览器会停止网页渲染(JS阻塞浏览器渲染)，加载文件越多，网页失去响应的时间就会越长；另外各文件的依赖关系很难管理。

RequireJs的作用：

(1)实现js文件的异步加载，避免网页失去响应；

(2)管理模块之间的依赖性，便于代码的编写和维护。

(3定义了一个作用域来避免全局名称空间污染。

Zweiter Abschnitt, Laden von require.js

1.VonWebseiteLaden Sie die neueste Version von require, legen Sie sie im Verzeichnis js ab und verwenden Sie script, um die Seite einzubinden:

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

Um die Seitendarstellung nicht zu blockieren, kann es am unteren Ende des HTML platziert oder in der folgenden Weise geändert werden:

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

Die Eigenschaft async zeigt an, dass die Datei asynchron geladen werden muss (die Eigenschaft defer ist mit IE kompatibel).

2.Lade Seitenlogikcode:

Angenommen, die Code-Datei ist main.js und sich im Verzeichnis js befindet, können sie auf folgende Weise eingebunden werden:

Art1:

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

Daten-Die Eigenschaft main gibt den Hauptentrypunkt der Webanwendung an, diese Datei wird zuerst von requirejs geladen. Da requirejs standardmäßig alle abhängigen Ressourcen als js betrachtet, kann main.js in main verkürzt werden.

Art2:

Nach dem Laden von require.js wird die Konfigurationsdatei (falls vorhanden) durch requirejs geladen und schließlich das Hauptmodul geladen:

require(['configUrl'], function () { //config.js muss durch requirejs geladen werden, um registriert zu werden
 require([moduleAName], function(moduelA){
 //Logikcode
 )
});

Dritter Abschnitt, Schreibweise des Hauptmoduls

// main.js
　　require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　　　// Einige Code hier
　　});

Die Funktion require() akzeptiert zwei Parameter, den ersten ist ein Array, der die Module angibt, die das aktuelle Modul abhängig macht; der zweite Parameter ist eine Callback-Funktion, die aufgerufen wird, wenn alle angegebenen Module erfolgreich geladen wurden. Die geladenen Module werden als Parameter an die Callback-Funktion übergeben, sodass diese Module (Module mit return-Werten) im Inneren der Callback-Funktion verwendet werden können.

require() lädt moduleA, moduleB und moduleC asynchron und der Browser verliert keine Reaktion; der angegebene Callback-Funktion wird nur ausgeführt, wenn alle abhängigen Module vollständig heruntergeladen und die entsprechenden Callbacks ausgeführt wurden.

Viertel, Modulkonfiguration

Die Methode require.config() kann Pfade für Module definieren und Abhängigkeiten in Form kurzer Modulnamen spezifizieren. Diese MethodeEs kann vor jedem Hauptmodul (main.js) geschrieben werden und wird zusammen mit dem Hauptmodul verwendet.

Der Parameter ist ein Objekt, das das Attribut paths enthält und die Ladepfade der verschiedenen Module spezifiziert.可以配置多个路径，如果远程cdn库没有加载成功，则加载本地的库。

如果不定义模块的配置，则在主模块中的依赖需要写完整路径。

在每个页面按需配置路径：

require.config({  //注册模块的配置，供后面的代码使用
　　　　baseUrl: '/js/', 
 paths: {
 　　"jquery":”cdnUrl”, "Jquery/jquery-1.12.0.min"
  "fixheight": "login/fixheight"
 }
 });
 require(['jquery', 'fixheight'], function ($, fixHeight) {
 ...other code; 
 fixHeight.init();
});

或者将config配置作为一个单独的js文件，然后

require([“configJsUrl”],function(){  //需要在main文件中通过require先异步加载模块配置
 require([‘ModuleName’],function(Name){
 …other code
 )
)

为了避免每个页面都要嵌套require，还可以用如下方式：

先创建单独的config.js文件：

require.config({ //注册模块的配置，供后面的代码使用
 baseUrl: "/js/app/", //其他依赖都是对于此位置的相对路径
 // 路径配置
 paths: {
underscore: 'vender/underscore.min',   backbone:'vender/backbone.min'
 jquery: ‘cdnUrl','vender/jquery/jquery-1.12.0.min',
 “模块短名”:”相对于baseUrl的路径地址，省略模块文件的后缀.js”
 },
 // 非AMD模式编写的类库需要重新配置
 shim: {
 underscore: {
  exports:'_'
 },
 backbone（短模块名仍需要定义路径）: {
  exports: 'Backbone',  　　　　//类库输出的变量名，表明这个模块被外部调用时的名称
  deps:['jquery','underscore'] //该模块的依赖
 }
 },
 urlArgs: "bust=" + document.getElementById('publishDate').attributes['value'].value　　//js资源的参数，控制版本刷新缓存
});
define([ 'marionette'], function () { }); //仍是会被执行的js代码，会依次加载需要的模块

然后通过如下方式使用：

通过主入口直接将模块配置注册到requirejs命名空间中，页面中后续的require方法无需再注册，可以直接使用短模块名进行依赖加载。

如果没有显式指定config及data-main，则默认的baseUrl为加载RequireJS的HTML页面所在目录。如果指定了data-main而没有在config中指定根路径，则该路径被设为baseUrl。

若想避开"baseUrl + paths"的解析过程，而是直接指定加载某一个目录下的脚本。可以这样做：如果一个module ID符合下述规则之一，其ID解析会避开常规的"baseUrl + paths"配置，而是直接将其加载为一个相对于当前HTML文档路径的脚本：

•　　　 以 ".js" 结束.

•　　　 以 "/" 开始.

•　　　 包含 URL 协议, 如 "http:" or "https:".

eg. require(['/www/js/app/vender/underscore.min.js'], function (_) {…})

require.js要求，每个模块是一个单独的js文件。加载多个模块就会发出多次HTTP请求，影响网页的加载速度。因此require.js提供了一个优化工具(r.js)，当模块部署完毕以后，可以用这个工具将多个模块合并在一个文件中，减少HTTP请求数，但又需要和缓存之间进行取舍。

六、AMD模块的写法

require.js加载的模块，必须按照AMD的规定来写。即模块必须采用特定的define()函数来定义，通常返回一个对象，该对象具有供别的模块使用的方法或属性；或只执行相关逻辑而无输出。

七、require.js的相关插件

text插件，允许require.js异步加载txt、css或html等文本资源供js使用，而不需要在script内构建Html字符串。

define(['text!components/multiple/template.html', 'image!cat.jpg'],
 function(template,cat){
 $('body').append($(template));
 document.body.appendChild(cat);
　}
); 

Hinweis:

Die Abhängigkeiten des Moduls können sowohl durch [] als auch durch das require()-Method im Callback-Funktionseintrag eingeführt werden, was dasselbe Ergebnis hat. Da die define-Methode die Abhängigkeiten der require-Methode im Callback-Funktionseintrag zuerst durch ein reguläres Muster scannt und herunterlädt, bevor sie den Callback-Funktionseintrag ausführt, muss require selbst als Abhängigkeit übergeben werden, andernfalls wird ein Fehler ausgegeben:

define(function(require){
 var helper=require(‘helpModuleUrI');//Diese Abhängigkeit wird auch vorgeladen
 ...
)

Wenn mehrere Module denselben Modul mehrmals abhängig sind, wird dieses Modul nur einmal heruntergeladen und initialisiert und danach wird require eine Referenz auf es behalten, um es anderen Modulen zur erneuten Verwendung zur Verfügung zu stellen.

Unterschied zwischen der Ausführung der require-Methode und der Ausführung des Callbacks:

require('config',callBack1);
require('b',callBack2);
// Die beiden require-Methoden werden sofort ausgeführt, aber die Ausführungsreihenfolge von callBack ist unbestimmt und hängt von der Downloadreihenfolge ab.
//Unterschiedlich von folgendem Code, wird dies streng in der Reihenfolge ausgeführt
require('config',function(){
 require('b',callBack2)
)

Das ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels Ihnen bei Ihrem Lernen oder Ihrer Arbeit hilft. Ich hoffe auch, dass Sie die Anleitung 'Rufen' mehr unterstützen!

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrechtsinhaber. Der Inhalt wurde von Internetbenutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie Inhalte finden, die möglicherweise urheberrechtlich geschützt sind, senden Sie bitte eine E-Mail an: notice#w3Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrechtsinhaber. Der Inhalt wurde von Internetbenutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie Inhalte finden, die möglicherweise urheberrechtlich geschützt sind, senden Sie bitte eine E-Mail an: notice#w