一、為什么使用RequireJS？

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

上述多個(gè)js文件加載的時(shí)候，瀏覽器會(huì)停止網(wǎng)頁(yè)渲染(JS阻塞瀏覽器渲染)，加載文件越多，網(wǎng)頁(yè)失去響應(yīng)的時(shí)間就會(huì)越長(zhǎng)；另外各文件的依賴(lài)關(guān)系很難管理。

RequireJs的作用：

（1）實(shí)現(xiàn)js文件的異步加載，避免網(wǎng)頁(yè)失去響應(yīng)；

（2）管理模塊之間的依賴(lài)性，便于代碼的編寫(xiě)和維護(hù)。

（3）定義了一個(gè)作用域來(lái)避免全局名稱(chēng)空間污染。

二、require.js的加載

1.從官網(wǎng)下載最新版本的require，放在js目錄下，使用script引入頁(yè)面：

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

為了不阻塞頁(yè)面渲染，可以把它放在HTML的最底部或改為如下方式：

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

async屬性表明該文件需異步加載（defer屬性兼容IE）。

2.加載頁(yè)面邏輯代碼：

假定代碼文件是main.js，也放在js目錄下，則用如下幾種方式引入：

方式1：

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

data-main屬性指定網(wǎng)頁(yè)程序的主入口，這個(gè)文件會(huì)第一個(gè)被requirejs加載。requirejs默認(rèn)所依賴(lài)的資源都是js，所以可以把main.js簡(jiǎn)寫(xiě)成main。

方式2：

在加載require.js后，通過(guò)requirejs加載config配置文件（如有），最后加載主模塊：

require([‘configUrl'],function () { //config.js必須通過(guò)requirejs加載才能注冊(cè)
 require([moduleAName],function(moduelA){
 //邏輯代碼
 })
});

三、主模塊的寫(xiě)法

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

require()函數(shù)接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是一個(gè)數(shù)組，表示當(dāng)前模塊所依賴(lài)的模塊；第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，當(dāng)前面指定的模塊都加載成功后，它將被調(diào)用。加載的模塊會(huì)以參數(shù)形式傳入該回調(diào)函數(shù)，從而在回調(diào)函數(shù)內(nèi)部就可以使用這些模塊（被依賴(lài)的模塊有return的值）。

require()異步加載moduleA，moduleB和moduleC，瀏覽器不會(huì)失去響應(yīng)；它指定的回調(diào)函數(shù)，只有當(dāng)前面依賴(lài)的模塊全部下載并執(zhí)行對(duì)應(yīng)的回調(diào)之后，才會(huì)運(yùn)行。

四、模塊的配置

require.config()方法可以定義模塊的路徑，并以短模塊名的形式進(jìn)行依賴(lài)的定義。該方法可以寫(xiě)在每個(gè)主模塊（main.js）的前面，配合主模塊一起使用。

參數(shù)是一個(gè)對(duì)象，這個(gè)對(duì)象的paths屬性指定各個(gè)模塊的加載路徑。paths可以配置多個(gè)路徑，如果遠(yuǎn)程cdn庫(kù)沒(méi)有加載成功，則加載本地的庫(kù)。

如果不定義模塊的配置，則在主模塊中的依賴(lài)需要寫(xiě)完整路徑。

在每個(gè)頁(yè)面按需配置路徑：

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

或者將config配置作為一個(gè)單獨(dú)的js文件，然后

require([“configJsUrl”],function(){  //需要在main文件中通過(guò)require先異步加載模塊配置
 require([‘ModuleName'],function(Name){
 …other code
 })
})

為了避免每個(gè)頁(yè)面都要嵌套require，還可以用如下方式：

先創(chuàng)建單獨(dú)的config.js文件：

require.config({ //注冊(cè)模塊的配置，供后面的代碼使用
 baseUrl: "/js/app/", //其他依賴(lài)都是對(duì)于此位置的相對(duì)路徑
 // 路徑配置
 paths: {
underscore: 'vender/underscore.min',   backbone:'vender/backbone.min'
 jquery: ‘cdnUrl','vender/jquery/jquery-1.12.0.min',
 “模塊短名”:”相對(duì)于baseUrl的路徑地址，省略模塊文件的后綴.js”
 },
 // 非AMD模式編寫(xiě)的類(lèi)庫(kù)需要重新配置
 shim: {
 underscore: {
  exports:'_'
 },
 backbone（短模塊名仍需要定義路徑）: {
  exports: 'Backbone',  　　　　//類(lèi)庫(kù)輸出的變量名，表明這個(gè)模塊被外部調(diào)用時(shí)的名稱(chēng)
  deps:['jquery','underscore'] //該模塊的依賴(lài)
 }
 },
 urlArgs: "bust=" + document.getElementById('publishDate').attributes['value'].value　　//js資源的參數(shù)，控制版本刷新緩存
});
define([ 'marionette'], function () { }); //仍是會(huì)被執(zhí)行的js代碼，會(huì)依次加載需要的模塊

然后通過(guò)如下方式使用：

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

通過(guò)主入口直接將模塊配置注冊(cè)到requirejs命名空間中，頁(yè)面中后續(xù)的require方法無(wú)需再注冊(cè)，可以直接使用短模塊名進(jìn)行依賴(lài)加載。

如果沒(méi)有顯式指定config及data-main，則默認(rèn)的baseUrl為加載RequireJS的HTML頁(yè)面所在目錄。如果指定了data-main而沒(méi)有在config中指定根路徑，則該路徑被設(shè)為baseUrl。

若想避開(kāi)"baseUrl + paths"的解析過(guò)程，而是直接指定加載某一個(gè)目錄下的腳本。可以這樣做：如果一個(gè)module ID符合下述規(guī)則之一，其ID解析會(huì)避開(kāi)常規(guī)的"baseUrl + paths"配置，而是直接將其加載為一個(gè)相對(duì)于當(dāng)前HTML文檔路徑的腳本：

•    以 ".js" 結(jié)束.

•    以 "/" 開(kāi)始.

•    包含 URL 協(xié)議, 如 "http:" or "https:".

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

require.js要求，每個(gè)模塊是一個(gè)單獨(dú)的js文件。加載多個(gè)模塊就會(huì)發(fā)出多次HTTP請(qǐng)求，影響網(wǎng)頁(yè)的加載速度。因此require.js提供了一個(gè)優(yōu)化工具(r.js)，當(dāng)模塊部署完畢以后，可以用這個(gè)工具將多個(gè)模塊合并在一個(gè)文件中，減少HTTP請(qǐng)求數(shù)，但又需要和緩存之間進(jìn)行取舍。

六、AMD模塊的寫(xiě)法

require.js加載的模塊，必須按照AMD的規(guī)定來(lái)寫(xiě)。即模塊必須采用特定的define()函數(shù)來(lái)定義，通常返回一個(gè)對(duì)象，該對(duì)象具有供別的模塊使用的方法或?qū)傩?；或只?zhí)行相關(guān)邏輯而無(wú)輸出。

七、require.js的相關(guān)插件

text插件，允許require.js異步加載txt、css或html等文本資源供js使用，而不需要在script內(nèi)構(gòu)建Html字符串。

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

注意：

模塊的依賴(lài)既可以通過(guò)[]引入，也可以在回調(diào)函數(shù)里通過(guò)require()方法引入，效果一樣。因?yàn)閐efine方法會(huì)通過(guò)正則先掃描回調(diào)函數(shù)中require方法的依賴(lài)并下載，然后才執(zhí)行該回調(diào)函數(shù)。但此時(shí)需要傳入依賴(lài)require本身，否則會(huì)報(bào)錯(cuò)：

define(function(require){
 var helper=require(‘helpModuleUrI');//也會(huì)提前加載該依賴(lài)
 …
})

多個(gè)模塊先后多次依賴(lài)同一個(gè)模塊時(shí)，該模塊只會(huì)被下載并初始化一次，之后require會(huì)保持對(duì)其的引用供別的模塊再次使用。

區(qū)分require方法的執(zhí)行和回調(diào)的執(zhí)行：

require('config',callBack1);
require('b',callBack2);
// 兩個(gè)require方法會(huì)立即執(zhí)行，但callBack的執(zhí)行順序不確定，取決于下載的順序。
//不同于以下代碼，會(huì)嚴(yán)格按順序執(zhí)行
require('config',function(){
 require('b',callBack2)
})

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

最新評(píng)論