requireJS(一)

一、關於requirejs requirejs是一個用於非同步載入js模組的架構  二、HOW TO USE 首先先去官網下載requirejs.js下來，再在自己的項目中引入 1 <script type="text/javascript" src="../requirejs.js" data-main="../main"></script>注意到data-main這個屬性，簡單的理解就是一個入口函數，用來啟動指令碼的載入過程。   tip：為了使這個檔案載入時候不失去響應，你可以選擇將它放在網頁底部載入，還有另外一個辦法就是寫成下面這樣 1 <script type="text/javascript" src="../requirejs.js" data-main="../main" async="true" defer></script>async這個屬性工作表明它要非同步載入，避免失去響應，另外defer是為了相容IE瀏覽器（IE不支援async這個屬性），所以完整的把兩個都寫上。      三、簡單的例子 假設js/a.js中的代碼如下: 1 var  info = "hello world"//簡單的定義了一個變數然後在mian.js中用requirejs載入它，如下所示 1 require(["../a.js"],function(a){2        alert(info);//彈出hello world3  })然後再查看瀏覽器的開發人員工具下，可以看到已經載入了    可以看到require接受3個參數（樣本中為2個），第一個參數為標識的id（建議忽略）；第二個參數為一個字元型的數組，為要載入的js模組；第三個參數為回呼函數， 當js模組注入載入完成後，此函數就會被調用，其中函數的參數，依次順序對應第二個參數中字串數組的值。 tip：第二個參數中字串數組中允許不同的值，當字串是以“.js”結尾的（例如上面中的js/a.js）或者是以“/”開頭，又或者直接是一個完整的url（ 包含URL協議，如"http:"、"https:"），則會被requirejs認為使用者是直接載入一個js模組。       否則，當字串是類似”my/module”的時候，它會認為這是一個模組，並且會以使用者配置的 baseUrl 和 paths 來載入相應的模組所在的 JavaScript 檔案（後面將介紹）  四、配置 現在我們來換一種寫法，我們使用require.config來對模組的載入行為自訂，其中參數是一個對象   1 require.config({ 2   paths:{ 3     jquery:"jquery-1.10.2.min", 4     a:"a" 5   } 6 }); 7  8 require(["jquery","a"],function($,a){ 9   alert($().jquery);   //1.10.210   alert(info);         //hello world11 }); 簡單的理解就是參數對象中的path屬性用來設定路徑的。 由於requirejs是以相對於baseurl屬性（樣本中沒有給出）地址來載入所以的代碼的。其中baseUrl是為require.config的參數（參數為對象）裡一個屬性。 如果沒有顯式指定config及data-main，則預設的baseUrl為包含RequireJS的那個HTML頁面的所屬目錄。 此時，RequireJS預設假定所有的依賴資源都是js指令碼，因此無需在module ID上再加".js"尾碼（即上面的jquery-1.10.2.min不用寫成jquery-1.10.2.min.js 寫上會報錯（Uncaught Error: Script error for: jquery）。 五、用define自訂模組   1 //b.js 2  3 define(["jquery"],function($){ 4   return { 5     dom:function(){ 6       $("#div1").html("123"); 7       alert("shabi") 8     }, 9     abc:"8888888"10   };11 })12 13 //main.js14 15 require.config({16   paths:{17     jquery:"jquery-1.10.2.min",18     a:"a",19     b:"b"20   }21 });22 23 require(["jquery","a","b"],function($,a,b){24   alert($().jquery);    //1.10.2　　25   alert(info);          //hello world26   b.dom();              //  改寫了頁面的html文字，彈出shiba27   alert(b.abc);        //888888828   console.log(b.abc);   //控制台輸出888888829 });   頁面代碼為：<div id="div1">aaa</div> 上面示範了如何自訂模組包含了值對，函數式（存在依賴的函數式定義），可依據需要自己定義，另外，我們也可以再返回之前做一些其他的事情。 六、其他一些配置屬性 baseUrl：用於設定基目錄(如上面的例子可以設定baseUrl:"../"，代碼一樣不變) config(直接看下面的例子  13 14 //main.js15 16 require.config({17   baseUrl:"../",18   paths:{19     a:"a",20   },21   config:{22     "a":{23       message:"liucunjie"24     }25   }26 });27 28 require(["a"],function(a){29   a.ms()   // 控制台下輸出liucunjie30 }); 其中在mian.js配置中，指明config中是哪個模組（上面的例子是a.js模組） 然後在a.js檔案代碼書寫  1 define(["module"],function(module){2   return{3      ms:function(){4        var mess = module.config().message;5        console.log(mess);6      }7   }8 }) 引入module，然後用module.config（）來擷取。   七、載入非規範（AMD）的模組 理論上，requirejs載入的模組必須是符合AMD規範的，或者是用define（）函數定義的模組 如今，很多主流的庫都符合AMD規範，但是也有很多庫並不符合，這時就需要在配置裡設定shim屬性 例如backbone這個庫，沒有採用AMD規範編寫   1 require.config({ 2   shim:{ 3     'underscore':{ 4       exports:'_' 5     }, 6     'backbone':{ 7       deps:['underscore','jquery'], 8       exports:'Backbone' 9     }10   }11 }); 其中deps數組為表明其依賴，exports(輸出的變數名)則為這個模組外部調用時的名稱。