由于瀏覽器的是單線程的,在加載script標(biāo)簽時(shí)會打斷,模塊的加載.同時(shí),模塊間的依賴需要按順序加載才能正常執(zhí)行.為了解決這些問題,可以通過使用AMD模塊中的requireJS使模塊和它的依賴可以被異步的加載,并且按照正確的順序.

使用requireJS的步驟
1.新建一個(gè)項(xiàng)目
2.在index.html中導(dǎo)入require.js文件,
在其script標(biāo)簽中使用data-main屬性,
指定main.js,即設(shè)置全局變量配置文件的js文件

<script defer async="true" type="text/javascript" src="./require.js" data-main="./main.js">
</script>
/*
html中的script標(biāo)簽在加載和執(zhí)行過程中會阻塞網(wǎng)頁的渲染，
所以一般要求盡量將script標(biāo)簽放置在body元素的底部，以便加快頁面顯示的速度，
還有一種方式就是通過異步加載的方式來加載js，這樣可以避免js文件對html渲染的阻塞。

defer和async，defer這個(gè)屬性在IE瀏覽器和早起的火狐瀏覽器中支持，
async在支持html5的瀏覽器上都支持，
只要有這兩個(gè)屬性，script就會以異步的方式來加載

data-main需要給所有的腳本文件設(shè)置一個(gè)根路徑。
根據(jù)這個(gè)根路徑，RequireJS將會去加載所有相關(guān)的模塊
*/

3.對main.js進(jìn)行配置

require.config({
  baseUrl:"",
  paths:"",
})
/*
baseUrl——用于加載模塊的根路徑。
paths——用于映射不同根路徑下面的模塊路徑。

RJ默認(rèn)采用一種baseUrl + moduleID的解析方式，這個(gè)解析方式后續(xù)會舉例說明。
這個(gè)baseUrl非常重要，RJ對它的處理遵循如下規(guī)則：

在沒有使用data-main和config的情況下，baseUrl默認(rèn)為當(dāng)前頁面的目錄
在有data-main的情況下，main.js前面的部分就是baseUrl


在有config的情況下，baseUrl以config配置的為準(zhǔn)
上述三種方式，優(yōu)先級由低到高排列。


RJ默認(rèn)按baseUrl + module ID的規(guī)則，解析文件，并且它默認(rèn)要加載的文件都是js，
所以你的module ID里面可以不包含.js的后綴，
這就是為啥你看到的module ID都是lib/foo, app/bar這種形式了。
有三種module ID，不適用這種規(guī)則：
以/開頭，如/lib/jquey.js
以.js結(jié)尾，如test.js
包含http或https，如[http://cdn.baidu.com/js/jquery.js](http://cdn.baidu.com/js/jquery.js)
這三個(gè)module 都不會根據(jù)baseUrl + module ID的規(guī)則來解析,而是直接用module ID來解析
<script src="/lib/foo.js"></script>
<script src="test.js"></script>
<script src="http://cdn.baidu.com/js/jquery.js"></script>
*/

4.配置main,或者其他文件的define,(js模塊的使用)

define([dependencies], function(id){
})

或者
define(funciton (require, exports, module)){
  require("ccs!./a.css")
  var a = require("text!./a.html")//自定義依賴模塊的調(diào)用
module.exports={
  "a":a;
  "b":function(){}
}
}

define(id?, dependencies?, factory);
其中：
id: 模塊標(biāo)識，可以省略。
dependencies: 所依賴的模塊，可以省略。
factory: 模塊的實(shí)現(xiàn)，或者一個(gè)JavaScript對象

RJ建議所有模塊都不要使用第一個(gè)參數(shù)，
如果使用第一個(gè)參數(shù)定義的模塊成為命名模塊，
不適用第一個(gè)參數(shù)的模塊成為匿名模塊，
命名模塊如果更名，
所有依賴它的模塊都得修改！
第二個(gè)參數(shù)是依賴數(shù)組，
跟require一樣，如果沒有這個(gè)參數(shù)，
那么定義的就是一個(gè)無依賴的模塊；
最后一個(gè)參數(shù)是回調(diào)或者是一個(gè)簡單對象，
在模塊加載完畢后調(diào)用，
當(dāng)然沒有第二個(gè)參數(shù)，最后一個(gè)參數(shù)也會調(diào)用。

5.調(diào)用backbone.js underscore.js
配置路由文件

 define(["backbone"],function(backbone){
 var Router = backbone.Router.extend=function(){
      routes = {
      "a":"a1",    // ID為a的標(biāo)簽對應(yīng)的名a1的方法
      "b":"b1",
      "*action": "defaultAction"  
    },
    a:function(){}
})

/*
創(chuàng)建一個(gè)路由對象
*/
 new router();

6.在main.js中啟動路由

require(['jquery','backbone','./router.js'],function($,Backbone){
    Backbone.history.start();
})

PS:循環(huán)依賴：

當(dāng)一個(gè)模塊foo的依賴數(shù)組中存在bar，bar模塊的依賴數(shù)組中存在foo，就會形成循環(huán)依賴

define(['require', 'foo'], function(require, foo) {
    return {
        name: 'bar',
        hi: function() {
         foo = require('foo');
            console.log('Hi! ' + foo.name);
        }
    }
});


define(['require', 'app/bar'], function(require, bar) {
    return {
        name: 'foo',
        hi: function() {
         bar = require('app/bar');
            console.log('Hi! ' + bar.name);
        }
    }
});