require.js的使用

剛剛接手的新項目中應用了require.js，本身就花了點時間瞭解了一下，這裏給你們推薦一個教學視頻 《阿當大話西遊之Web組件》 ，視頻我是看了前邊幾節介紹又結合了新的項目，所學的知識就已經夠用了。

require.js 具體是什麼？

RequireJS是一個工具庫，主要用於客戶端的模塊管理。它可讓客戶端的代碼分紅一個個模塊，實現異步或動態加載，從而提升代碼的性能和可維護性。它的模塊管理遵照AMD規範，模塊與模塊之間能夠互相依賴，固然可能會有人會想，模塊之間的依賴，要是無法正確地去按照特定順序加載，會出現錯誤，AMD規範能夠處理這種問題，AMD就是這樣一種對模塊的定義，使模塊和它的依賴能夠被異步的加載，但又按照正確的順序。

AMD是"Asynchronous Module Definition"的縮寫，意思就是"異步模塊定義"。它採用異步方式加載模塊，模塊的加載不影響它後面語句的運行。全部依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成以後，這個回調函數纔會運行。

如何使用 require.js？

下載require.js，引入網站的首頁，

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

這裏首先會執行src中的require.js 的加載，隨後require.js會查找data-main所指的文件路徑，找到入口的js文件，注意這裏能夠去掉.js 的後綴名。

RequireJS有兩種最主要的方法，define()是用來定義一個模塊的，而require()方法是 用來加載模塊的。

---

define 方法

使用define方法，能夠將一個js文件寫在此方法中，define(function(){ /*代碼內容*/ });做爲一個獨立的模塊。以下，新建一個模塊名爲mod1的js文件（mod1.js）：

define(function(){
    return {
        a:3
    }
})

這是一個很簡單的模塊，mod1經過 return一個對象，向外暴露一個變量 a=3 ；若是咱們在建立一個mod2的模塊（mod2.js），要依賴mod1中的變量啊，則能夠這麼來：

define(['mod1'],function(m1){
    var a,
        b=2,
        c=3;
        a=c*m1.a;
      return {
        a:a,
        b:b
    }
})

分析上面的代碼，咱們將mod1模塊引入到mod2模塊中，而function的參數 m1 就是mod1模塊的返回值，也是mod1模塊。m1.a就是mod1的return 對象a的值，爲3，這樣mod1和mod2的變量雖然存在a變量名同樣的問題，可是互不影響，不衝突，這也是模塊化的一個好處，不會擔憂變量衝突問題。

---

require方法

接下來，咱們即可以經過require方法來使用前面咱們定義好的模塊，，見其寫在main.js中

require(['mod2'],function(m2){ 
       alert(m2.a)
    });

使用該方法加載mod2個模塊，而mod2會去依賴mod1模塊，因此也會加載mod1這個模塊。
因爲模塊返回的都是對象，那咱們也能夠new一個對象去調用加載模塊中的方法和屬性，見下：

//模塊名爲：treeview
  define(function(){ 
    function treeview(){ 
        this.name="treeview";
    };
    return { treeview:treeview };
})

    require(['treeview'],function(b){ 
        var tree = new b.treeview();
        alert(tree.name);
    });

若是模塊中須要引入第三方的js文件，例如jquery，則應該：

//treeview.js
  define(['jquery'],function($){ 
    function treeview(){ 
        this.name="treeview";
    };
    return { treeview:treeview };
})


//main.js
//此時若是main.js這個應用層也須要用到jquery，雖然mian.js中依賴模塊treeview中已經引入了jquery文件，可是應用層main.js中依然還須要引入一次，
    require(['treeview','jquery'],function(b,$){ 
        $('#div').click(fucntion(){..........})
        var tree = new b.treeview();
        alert(tree.name);
    });

---

模塊路徑 paths

在main.js,咱們須要去配置一下模塊的路徑，這裏隨便配置一下幾個模塊的路徑，以下：

require.config({
　　　paths: {
　　　　　"tabview": "js/tabview",
　　　　　"animate": "js/animate",
　　　　　"treeview": "js/treeview"
　　　}
　});

//另外一種則是直接改變基目錄（baseUrl）。後綴.js能夠省略
require.config({
　　　　baseUrl: "js/lib",
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"
　　　　}
});