如何使用require.js?

最近幾天在學習一個javascript庫require.js，也看了一些相關的教學視頻，這里推薦一下幕課網阿當老師的《阿當大話西游之Web組件》的教學視頻，一整套看下來，參照視頻里面的demo從頭做一遍，對於require.js的使用以及web組件的編寫挺有幫助的，作為菜鳥，看完后覺得獲得更多的是一種編程思想的塑造！可以去看看！

言歸正傳，什么是require.js？

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

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

如何使用require.js?

將require.js下載下來，嵌入網頁中，

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

這里的data-main屬性聲明的是入口文件scripts/main.js，這里我們把.js后綴省略掉了。也有以下這種寫法：

<script src="scripts/require.js" data-main="scripts/main" defer async="true" ></script>

async屬性表明這個文件需要異步加載，避免網頁失去響應。IE不支持這個屬性，只支持defer，所以把defer也寫上。同時，官方提供了 require.js和 jquery 的打包版本，於是也可以怎么引入：

<script src="scripts/require-jquery.js" data-main="scripts/main" defer async="true" ></script>

RequireJS通過define方法，將代碼定義為模塊；通過require方法，實現代碼的模塊加載。

使用define方法，可以將代碼寫在一個js文件，獨立開來作為一個模塊，如我建立一個animate模塊(animate.js)，如下：

define(function(){
　　function animate(){
　　　　this.name="animate";
　　};
　　return {
　　　　animate:animate ,
　　　　dec:"這是一個描述"
　　};
})

將你的模塊代碼放置在define(function(){  /*代碼*/   });，然后將該模塊return的對象暴露出來，可以供其他模塊依賴此模塊的時候，可以去調用這個模塊的API。比如我們建立一個tabview模塊(tabview.js)去依賴這個animate模塊，

define(['animate'],function(a){
    function tabview(){ 
        this.name= 'tabview';
        this.animate = a.animate.name;
        this.dec = a.dec;
    } 
    return { tabview:tabview };
})

分析上面的代碼，我們將animate模塊引入，並給其賦予一個a的別名。那么在該模塊不就可以調用animate模塊里面的方法和屬性了嗎？

這里我們在多建一個treeview模塊（treeview.js）,如下：

define(function(){ 
    function treeview(){ 
        this.name="treeview";
    };
    return { treeview:treeview };
})

接下來，我們需要去使用前面我們定義好的模塊，便可以require方法來實現，見其寫在main.js中，如下：

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

使用該方法加載tabview、treeview兩個模塊，而tabview會去依賴animate模塊，由於模塊返回的都是對象，那我們可以new一個對象去調用加載模塊中的方法和屬性！

在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"
　　　　}
});

這樣require.js便可以很靈活地使用來進行模塊化管理了，這里有一個基於require.js去搭建一個web組件（彈窗的demo）,很值得學習一下！可以去看看！github地址：https://github.com/xiaobinwu/require.js-Popup-window-

參考資料：RequireJS和AMD規范