requireJS(一)

1、關於requirejs

requirejs是一個用於異步加載js模塊的框架。詳細介紹的請谷歌~

2、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這個屬性），因此完整的把兩個都寫上。

例子結構目錄爲

 

3、簡單的例子

假設js/a.js中的代碼以下:

1 var  info = "hello world"//簡單的定義了一個變量

而後在mian.js中用requirejs加載它，以下所示

1 require(["../a.js"],function(a){
2        alert(info);//彈出hello world
3  })

而後再查看瀏覽器的開發者工具下，能夠看到已經加載了

 能夠看到require接受3個參數（示例中爲2個），第一個參數爲標識的id（建議忽略）；第二個參數爲一個字符型的數組，爲要加載的js模塊；第三個參數爲回調函數，

當js模塊注入加載完成後，此函數就會被調用，其中函數的參數，依次順序對應第二個參數中字符串數組的值。

tip：第二個參數中字符串數組中容許不一樣的值，當字符串是以「.js」結尾的（例如上面中的js/a.js）或者是以「/」開頭，又或者直接是一個完整的url（

包含URL協議，如"http:"、"https:"），則會被requirejs認爲用戶是直接加載一個js模塊。

      不然，當字符串是相似」my/module」的時候，它會認爲這是一個模塊，而且會以用戶配置的 baseUrl 和 paths 來加載相應的模塊所在的 JavaScript 文件（後面將介紹）

 4、配置

如今咱們來換一種寫法，咱們使用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.2
10   alert(info);         //hello world
11 });

簡單的理解就是參數對象中的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）。

5、用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.js
14 
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 world
26   b.dom();              //  改寫了頁面的html文字，彈出shiba
27   alert(b.abc);        //8888888
28   console.log(b.abc);   //控制檯輸出8888888
29 });

  頁面代碼爲：<div id="div1">aaa</div>

上面演示瞭如何自定義模塊包含了值對，函數式（存在依賴的函數式定義），可依據須要本身定義，另外，咱們也能夠再返回以前作一些其餘的事情。

6、其餘一些配置屬性

baseUrl：用於設置基目錄(如上面的例子能夠設置baseUrl:"../"，代碼同樣不變)

config(直接看下面的例子

13 
14 //main.js
15 
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()   // 控制檯下輸出liucunjie
30 });

其中在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（）來獲取。

 

7、加載非規範（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(輸出的變量名)則爲這個模塊外部調用時的名稱。

未完待續。。。。