require筆札

基於學習的開始，如下內容所有摘錄RequireJS中文網，先熟悉一下api。

1，加載Javascript文件

RequiresJS的目標是鼓勵代碼的模塊化，它使用了不一樣於傳統<script>標籤的腳本加載步驟。

能夠用它來加速、優化代碼，但其主要的目的仍是爲了代碼的模塊化。它鼓勵在使用腳本時以

module ID替代URL地址。

RequireJS以一個相對於baseURL的地址來加載全部的代碼。頁面頂層<script>標籤含有一個

特殊的屬性data-main，require.js使用它來啓動腳本加載過程，而baseUrl通常設置到於該屬

性相一致的目錄。下列示例中展現了baseUrl的設置：

<!--This sets the baseUrl to the "scripts" directory, and loads a 
script that will have a module Id of "mian" -->
<script data-main="scripts/main.js" src="scripts/requires.js"></script>

　　baseUrl亦能夠經過RequireJS config手動設置。若是沒有顯式指定config及data-main,則

默認的baseUrl爲包含RequireJS的那個HTML頁面的所屬目錄。

 

　　RequireJS默認假定全部的依賴資源都是js腳本，所以無需在module ID上再加".js"後綴，

RequireJS在進行module ID到path的解析時會自動補上後綴。你能夠經過paths config設置

一組腳本，這些有助於咱們在使用腳本時碼更少的字。

　　有時候你想避開"baseUrl + paths" 的解析過程，而是直接指定加載某一個目錄下的腳本。

此時能夠這樣作：若是一個module ID 符號下述規則之一，其ID解析會避開常規的"baseUrl + 

paths" 配置，而是直接將其加載爲一個相對於當前的HTML文檔的腳本：

1，以 ".js" 結束；

2，以 "/" 開始；

3，包含URL 協議，如"http:" or "https"。

 

通常來講，最好仍是使用baseUrl及"paths" config去設置 module ID。它會給你帶來額外的

靈活性，如便於腳本的重命名、重定位等。同時，爲了不凌亂的配置，最好不要使用多級嵌套

的目錄層次來組織代碼，而是要麼將全部的腳本都放置到baseUrl中，要麼分置爲項目庫/第三方

庫的一個扁平結構，以下：

    .  www/

　　　　　 ．index.html

　　　　　 .js/

　　　　　　　　. app/

　　　　　　　　　　.sub.js

　　　　　　　　.lib/

　　　　　　　　　　.jquery.js

　　　　　　　　　　.canvas.js

　　　　　　　　.app.js

　　index.html:

　　

<script data-main="js/app.js" src="js/require.js"></script>

　　app.js:

　　

requirejs.config({
    //By default load any module IDs from js/lib
    baseUrl: 'js/lib',
    /*
        except, if the module ID starts with "app",
        load it from the js/app directory, paths
        config is relative to the baseUrl, and never
        includes a '.js' extension since 
        the paths config could be for a directory.
    */
    patch: {
        app: '../app'
    }
}

//Start the main app logic.
requirejs(['jquery','canvas','app/sub']);

function( $, canvas, sub ){
    
});

 

理想情況下，每一個加載的腳本都是經過define()來定義的一個模塊； 但有些「瀏覽器全局變量注入」型的傳統/遺留庫

並無使用define()來定義他們的依賴關係，你必須爲此使用 shim config 來指明它們的關係。若是你沒有指明依賴

關係，加載可能報錯。這是由於基於速度的緣由，RequireJS會異步地以無序的形式加載這些庫。

 

 data-main 入口點

require.js 在加載的時候回檢察data-main屬性：

<!--when require.js loads it will inject another script tag 
(with async attribute) for script/main.js-->
<script data-main="scripts/main" src="scripts/require.js"></script>

　　你能夠在data-main指向的腳本中設置模板加載選項，而後加載第一個應用模塊。注意：你在

main.js中所設置的腳本時異步加載的。因此若是你在頁面中配置了其餘JS加載，則不能保證它們

所依賴的JS已經加載成功。