由于瀏覽器的是單線程的,在加載script標簽時會打斷,模塊的加載.同時,模塊間的依賴需要按順序加載才能正常執行.為了解決這些問題,可以通過使用AMD模塊中的requireJS使模塊和它的依賴可以被異步的加載,并且按照正確的順序.
使用requireJS的步驟
1.新建一個項目
2.在index.html中導入require.js文件,
在其script標簽中使用data-main屬性,
指定main.js,即設置全局變量配置文件的js文件
<script defer async="true" type="text/javascript" src="./require.js" data-main="./main.js">
</script>
/*
html中的script標簽在加載和執行過程中會阻塞網頁的渲染，
所以一般要求盡量將script標簽放置在body元素的底部，以便加快頁面顯示的速度，
還有一種方式就是通過異步加載的方式來加載js，這樣可以避免js文件對html渲染的阻塞。
defer和async，defer這個屬性在IE瀏覽器和早起的火狐瀏覽器中支持，
async在支持html5的瀏覽器上都支持，
只要有這兩個屬性，script就會以異步的方式來加載
data-main需要給所有的腳本文件設置一個根路徑。
根據這個根路徑，RequireJS將會去加載所有相關的模塊
*/
3.對main.js進行配置
require.config({
baseUrl:"",
paths:"",
})
/*
baseUrl——用于加載模塊的根路徑。
paths——用于映射不同根路徑下面的模塊路徑。
RJ默認采用一種baseUrl + moduleID的解析方式，這個解析方式后續會舉例說明。
這個baseUrl非常重要，RJ對它的處理遵循如下規則：
在沒有使用data-main和config的情況下，baseUrl默認為當前頁面的目錄
在有data-main的情況下，main.js前面的部分就是baseUrl
在有config的情況下，baseUrl以config配置的為準
上述三種方式，優先級由低到高排列。
RJ默認按baseUrl + module ID的規則，解析文件，并且它默認要加載的文件都是js，
所以你的module ID里面可以不包含.js的后綴，
這就是為啥你看到的module ID都是lib/foo, app/bar這種形式了。
有三種module ID，不適用這種規則：
以/開頭，如/lib/jquey.js
以.js結尾，如test.js
包含http或https，如[http://cdn.baidu.com/js/jquery.js](http://cdn.baidu.com/js/jquery.js)
這三個module 都不會根據baseUrl + module ID的規則來解析,而是直接用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")//自定義依賴模塊的調用
module.exports={
"a":a;
"b":function(){}
}
}
define(id?, dependencies?, factory);
其中：
id: 模塊標識，可以省略。
dependencies: 所依賴的模塊，可以省略。
factory: 模塊的實現，或者一個JavaScript對象
RJ建議所有模塊都不要使用第一個參數，
如果使用第一個參數定義的模塊成為命名模塊，
不適用第一個參數的模塊成為匿名模塊，
命名模塊如果更名，
所有依賴它的模塊都得修改！
第二個參數是依賴數組，
跟require一樣，如果沒有這個參數，
那么定義的就是一個無依賴的模塊；
最后一個參數是回調或者是一個簡單對象，
在模塊加載完畢后調用，
當然沒有第二個參數，最后一個參數也會調用。
5.調用backbone.js underscore.js
配置路由文件
define(["backbone"],function(backbone){
var Router = backbone.Router.extend=function(){
routes = {
"a":"a1", // ID為a的標簽對應的名a1的方法
"b":"b1",
"*action": "defaultAction"
},
a:function(){}
})
/*
創建一個路由對象
*/
new router();
6.在main.js中啟動路由
require(['jquery','backbone','./router.js'],function($,Backbone){
Backbone.history.start();
})
PS:循環依賴：
當一個模塊foo的依賴數組中存在bar，bar模塊的依賴數組中存在foo，就會形成循環依賴
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);
}
}
});
