requireJS(一)

一、關於requirejs

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

二、HOW TO USE

首先先去官網下載requirejs.js下來，再在自己的項目中引入

<script type="text/javascript" src="../requirejs.js" data-main="../main"></script>

注意到data-main這個屬性，簡單的理解就是一個入口函數，用來啟動腳本的加載過程。

 

tip：為了使這個文件加載時候不失去響應，你可以選擇將它放在網頁底部加載，還有另外一個辦法就是寫成下面這樣

<script type="text/javascript" src="../requirejs.js" data-main="../main" async="true" defer></script>

async這個屬性表明它要異步加載，避免失去響應，另外defer是為了兼容IE瀏覽器（IE不支持async這個屬性），所以完整的把兩個都寫上。

例子結構目錄為

 

三、簡單的例子

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

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

然后在mian.js中用requirejs加載它，如下所示

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

然后再查看瀏覽器的開發者工具下，可以看到已經加載了

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

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

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

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

      否則，當字符串是類似”my/module”的時候，它會認為這是一個模塊，並且會以用戶配置的 baseUrl 和 paths 來加載相應的模塊所在的 JavaScript 文件（后面將介紹）

 四、配置

現在我們來換一種寫法，我們使用require.config來對模塊的加載行為自定義，其中參數是一個對象

require.config({
  paths:{
    jquery:"jquery-1.10.2.min",
    a:"a"
  }
});

require(["jquery","a"],function($,a){
  alert($().jquery);   //1.10.2
  alert(info);         //hello world
});

簡單的理解就是參數對象中的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自定義模塊

//b.js

define(["jquery"],function($){
  return {
    dom:function(){
      $("#div1").html("123");
      alert("shabi")
    },
    abc:"8888888"
  };
})

//main.js

require.config({
  paths:{
    jquery:"jquery-1.10.2.min",
    a:"a",
    b:"b"
  }
});

require(["jquery","a","b"],function($,a,b){
  alert($().jquery);    //1.10.2　　
  alert(info);          //hello world
  b.dom();              //  改寫了頁面的html文字，彈出shiba
  alert(b.abc);        //8888888
  console.log(b.abc);   //控制台輸出8888888
});

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

上面演示了如何自定義模塊包含了值對，函數式（存在依賴的函數式定義），可依據需要自己定義，另外，我們也可以再返回之前做一些其他的事情。

六、其他一些配置屬性

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

config(直接看下面的例子

//main.js

require.config({
  baseUrl:"../",
  paths:{
    a:"a",
  },
  config:{
    "a":{
      message:"liucunjie"
    }
  }
});

require(["a"],function(a){
  a.ms()   // 控制台下輸出liucunjie
});

其中在mian.js配置中，指明config中是哪個模塊（上面的例子是a.js模塊）

然后在a.js文件代碼書寫

define(["module"],function(module){
  return{
     ms:function(){
       var mess = module.config().message;
       console.log(mess);
     }
  }
})

引入module，然后用module.config（）來獲取。

 

七、加載非規范（AMD）的模塊

理論上，requirejs加載的模塊必須是符合AMD規范的，或者是用define（）函數定義的模塊

如今，很多主流的庫都符合AMD規范，但是也有很多庫並不符合，這時就需要在配置里設置shim屬性

例如backbone這個庫，沒有采用AMD規范編寫

require.config({
  shim:{
    'underscore':{
      exports:'_'
    },
    'backbone':{
      deps:['underscore','jquery'],
      exports:'Backbone'
    }
  }
});

其中deps數組為表明其依賴，exports(輸出的變量名)則為這個模塊外部調用時的名稱。

未完待續。。。。