學習require.js中的一些總結

最近學習了一下requirejs，對照官方文檔和阮一峯大神的博客Javascript模塊化編程（三）：require.js的用法，學到了基本的用法，如下是個人一些總結和補充

基本用法看官方文檔和阮一峯大神的博客就能夠了，我這裏寫一下感受要注意的地方。

（1）require.config({...})中的shim，官方文檔中的解釋是：爲那些沒有使用define()來聲明依賴關係、設置模塊的"瀏覽器全局變量注入"型腳本作依賴和導出配置。

　　其實就是幫助咱們以AMD模塊的方式，使用那些不符合AMD規範的模塊。有以下代碼：

require.config({

　　　　shim:{

　　　　　　'underscore':{         //'underscore'須要和paths中定義的別名一致，若underscore.js在BaseUrl目錄下，則不用設置paths。後面的backbone也同樣

　　　　　　　　exports:'_'

　　　　　　},

　　　　　　'backbone':{

　　　　　　　　deps:['underscore','jquery'],

　　　　　　　　exports:'Backbone'

　　　　　　}

　　　　}

　　});

 

　　使用的時候:

　　

requirejs(['underscore','backbone'],function(_,Backbone){    // 'underscore'和'backbone'和paths中設置的別名一致

　　......

　　})

 

　　有兩個屬性，deps和exports，exports是模塊的返回值，exports的值，必定要與JS庫中暴露出的全局變量名稱一致。顯然，

　　'underscore'與'backbone'這兩個模塊的返回值，就是這兩個框架（underscore.js和backbone.js）暴露出的全局變量'_'和'Backbone'。

（2）map的用法

　　官方文檔解釋map：對於給定的模塊前綴，使用一個不一樣的模塊ID來加載該模塊。

　　　　該手段對於某些大型項目很重要：若有兩類模塊須要使用不一樣版本的"foo"，但它們之間仍須要必定的協同。

　　 在那些基於上下文的多版本實現中很難作到這一點。並且，paths配置僅用於爲模塊ID設置root paths，而不是爲了將一個模塊ID映射到另外一個。

　　map示例：

　　若是各模塊在磁盤上分佈以下：

• foo1.0.js
• foo1.2.js
• some/
  • newmodule.js
  • oldmodule.js

代碼：

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

 

　　當「some/newmodule」調用了「require('foo')」，它將獲取到foo1.2.js文件；而當「some/oldmodule」調用「`require('foo')」時它將獲取到foo1.0.js。

該特性僅適用於那些調用了define()並將其註冊爲匿名模塊的真正AMD模塊腳本。而且，請在map配置中僅使用絕對模塊ID，「../some/thing」之類的相對ID不能工做。

另外在map中支持「*」，意思是「對於全部的模塊加載，使用本map配置」。若是還有更細化的map配置，會優先於「*」配置。示例：

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

 

意思是除了「some/oldmodule」外的全部模塊，當要用「foo」時，使用「foo1.2」來替代。對於「some/oldmodule」本身，則使用「foo1.0」。