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.
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(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
// some code here
});
require.config({
paths: {
"jquery": "jquery.min",
"underscore": "underscore.min",
"backbone": "backbone.min"
}
});
require.config({
baseUrl: "js/lib",
paths: {"jquery": "jquery.min", "underscore": "underscore.min", "backbone": "backbone.min"}
});require.config({ baseUrl: "js/lib",
paths: { "jquery": "jquery.min", "underscore": "underscore.min", "backbone": "backbone.min"
}
});
require.config({
paths: {
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
}
});每个模块是一个单独的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中文网。
相关推荐：
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!
