requireJS

1.用於ADM（基於模塊的異步加載JavaScript代碼的機制）js模塊開發

2.下載requireJS

3.好處：

　　1）有效防止命名衝突（js多時可能不少全局變量容易重複）

　　2）聲明不一樣的js文件之間的依賴

　　3）模塊化的開發　　

4.經常使用方法：

　　requirejs.config:爲模塊指定別名

　　requirejs:將寫好的模塊引入並編寫主代碼

　　define；編寫模塊，在相應地方來引用

5.例子：

　　1）引入模塊入口data-main是入口;<script data-main="js/main" src="js/require.js"></script>

　　2）入口js文件中兩個方法requirejs.config配置baseUrl；paths;requirejs([],function(){})

require.config({
    baseUrl: 'js',
    paths: {
        jquery: 'jquery-1.8.2.min'
    }
});
/*
  jquery是定義好的模塊；validate也是在validate.js中定義的模塊；
  $表明jquery模塊；validate表明define定義的模塊
*/
require(['jquery','validate'],function($,validate) {
    $('body').css('background-color','red');
    console.log(validate.isEqual(12,23));
});

View Code

　　3定義的模塊外部不能訪問只能防禦出結果：

//這裏是一個私有的只能內部本身放回數據 
define(['jquery'],function($){
    return{
        isEmpty:function(){},
        checkLength:function(){},
        isEqual:function(str1,str2){
            return str1===str2;
        }
    }
    
})

View Code

 6.定義模塊

　　1）簡單鍵值對

　　　　define({ color: "black", size: "unisize" });

　　2）定義函數(函數返回對象)

　　　　define(function(){return

　　　　　　color:"red",

　　　　　　size:"unsize"

　　　　})

　　3）定義帶依賴的函數(返回對象)

　　　　define(["./inventory"],function(inventory){

　　　　　　return{

　　　　　　　　color:"red",size:"large",addToInventory:function(){

　　　　　　　　　　inventory.decrement(this)

　　　　}}})

　　4）定義一個模塊做爲一個函數（返回函數）

　　　　define(["my/inventory"],function(inventory) { return function(title) {  

　　           return title ? (window.title = title) : inventory.storeName;

　　         }} );

　　5）用簡單的CommonJS包裝器定義模塊（將幾個對象做爲局部變量放入）

　　　　define(function(require,exports,module)){

　　　　　　var a=require("a"),

　　　　　　return function(){}

　　　　}

　　6）自定義方式定義模塊（第一個參數爲模塊即給模塊定義了名字,這種起了名字的模塊可移植性差，通常是有優化工具自動生成的）

　　　　define("foo/title",["my/cart","my/inventory"],function(cart,inventory){

　　　　　　dsfasfasdfasf

　　　　})　　　　

　　7）其餘模塊說明

　　　　想要生成相對與模塊的URL：能夠將「require」做爲依賴

　　　　define(["require"], function(require) {  var cssUrl = require.toUrl("./style.css"); });

　　　　控制檯調用代碼：require("module/name").callSomeFunction()

　　　　當遇到依賴對象爲空時：可用exports.foo對象獲得可能爲null的模塊　

1.方式一
define(['a', 'exports'], function(a, exports) {  
    exports.foo = function () {         return a.bar();   
      }; }); 
2.方式二CommandJS


define(function(require, exports, module) { 
    var a = require("a"); 
    exports.foo = function () {return a.bar();
     }; }); 

View Code

　　8)指定一個JSONP服務依賴

　　　require(["http://example.com/api/data.json?callback=define"],     function (data) {  console.log(data);     } );

　　9）取消模塊的定義

　　　 require.undef()

7.運行機制

　　使用head.appendChild()加載依賴做爲script標籤-》加載完獲得模塊間調用順序

8.在外層Html中使用require（不用data-main入口屬性調用require方法）

　　1）傳遞配置項對象做爲第一個參數

<script type="text/javascript" src="scripts/require.js"></script> 
<script type="text/javascript">  
     require.config({     baseUrl: "/another/path",     paths:          {         "some": "some/v1.0"     },     waitSeconds: 15,     locale: "fr-fr"   });   require( ["some/module", "my/module", "a.js", "b.js"],     function(someModule,    myModule) {         //This function will be called when all the dependencies         //listed above are loaded. Note that this function could         //be called before the page is loaded.         //This callback is optional.     }   ); 
</script> 

View Code

　　2）加載 require.js 以前，你能夠定義一個 require 對象

<script type="text/javascript">   
     var require = {        
        deps:    ["some/module1", "my/module2", "a.js", "b.js"],
        callback: function(module1, module2) {callback is optional.}     };
</script> 
<script type="text/javascript" src="scripts/require.js"></script> 
 

View Code

9.配置項詳解(require.config{}中的)

　　baseUrl；paths;

　　shim(當加載的js模塊不符合AMD規範時用shim替代require(),通常的jquery.form插件也不符合AMD規範)；

　　　　 （相似與easyui 必需要jquery.js，因此不能直接使用，這種狀況需用shim 的deps配置它的依賴js）　　

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        },
        "jquery.form" : {
            deps : ["jquery"]
        }
    }
})
配置後可加載插件後的jquery了
require.config(["jquery", "jquery.form"], function($){
    $(function(){
        $("#form").ajaxSubmit({...});
    })
})

View Code

　　map:

 requirejs.config({
     map: {
         '*': {
             'foo': 'foo1.2'
         },
         'some/oldmodule': {
             'foo': 'foo1.0'
         }     } }); 

View Code

　　Config：

requirejs.config({
     config: {
         'bar': {
             size: 'large'
         },
         'baz': {
             color: 'blue' 
        }     } }); 
 
define(function (require, exports, module) {
     // 這裏將讀取 bar 中的 size 信息
     var size = module.config().size; }); 
 
define(['module'], function (module) {     // 這裏將讀取到 baz.js 模塊信息
     var color = module.config().color;
 }); 

View Code

　　傳遞 config 對象到 package 中

requirejs.config({
     //Pass an API key for use in the pixie package's
     //main module.
     config: {
         'pixie/index': {
             apiKey: 'XJKDLNS'
         }
     },
     //Set up config for the "pixie" package, whose main
     //module is the index.js file in the pixie folder.
     packages: [
         {
             name: 'pixie',
             main: 'index'
         }
     ] }); 

View Code

packages：配置從 CommonJS 包中加載的模塊。

waitSeconds：腳本加載超時時間。設置爲 0 禁用超時。默認值爲 7s 
context：用來定義加載上下文的名稱。這個機制容許 require.js 在一個頁面中加載多個版本 的模塊，只要在最外層調用一個惟一的上下文名稱。如何正確的使用它，請參考多版本支持 章節。 
deps：須要加載的依賴數組。在加載 require.js 以前，require 被定義成一個配置對象，同時 你又想一旦 require()被定義時指定依賴的狀況下，這時是很是有用的。使用 deps 就像調用 require([])同樣，可是加載器一旦處理到配置項就馬上加載依賴。它不會阻塞來自模塊的任 何 require()調用，她僅僅是一種用來異步的加載模塊做爲配置項塊方法 
callback：當全部的模塊加載完成後執行的函數。在加載 require.js 以前，require 被定義成一 個配置對象，同時你想要在配置的依賴數組都被加載後指定一個函數去執行。 
enforceDefine：若是設置成 true，若是加載的腳本沒有調用 define()或者校驗 shim 導出的字 符串值時將拋出異常。更多信息參考 IE 中捕獲加載失敗。 
xhtml：若是設置成 true，將使用 document.createElementNS()建立 script 元素 
urlArgs：在 RequireJS 用來查詢資源的 URL 後添加的額外參數值。當瀏覽器或服務器配置沒 有正確配置時，是緩存失效。

scriptType：經過 RequireJS 指定<script>標籤的 type 屬性值