require.js

一、require.js 功能是加載模塊，屬於AMD規範的實現。以前傳統的方式是以下所示

　　<script>

　　......

　　</script>

或者

　　<script src="....."></script>

當頁面最初被加載時，若是script標籤放到body以前，當遇到script標籤時，會優先加載js，所以致使頁面渲染會被暫停，用戶體驗很差。採用異步加載資源，提升加載速度和代碼質量

二、require定義三個變量：define,require,requirejs  require===requirejs

define([新定義的模塊名],[dependencies],factory) 定義一個模塊,若是提供了模塊名，則模塊名必須是絕對的，不容許相對

模塊名是用正斜槓分割的有意義單詞的字符串
單詞須爲駝峯形式，或者"."，".." 模塊名不容許文件擴展名的形式，如「.js」 模塊名能夠爲 "相對的" 或 "頂級的"。若是首字符爲「.」或「..」則爲相對的模塊名 頂級的模塊名從根命名空間的概念模塊解析 相對的模塊名從 "require" 書寫和調用的模塊解析

require(模塊名) 加載依賴模塊，加載完成後執行回調函數，與定義的模塊名一致。

模塊，不一樣於傳統的腳本文件，它良好地定義了一個做用域來避免全劇名稱空間污染。它能夠顯示地列出其依賴關係，並以函數參數形式將這些依賴進行注入，則無需引用全局變量

三、define('js/a',function(){...}) 

　　require(['js/a']);  //加載本地js

若是是加載服務器或者CDN上的js，地址會比較長，能夠先用require.config配置一下模塊加載位置，也就是給模塊名起個短點的名字，方便引用

require.config({
    paths:{
        "jquery":["http://libs.baidu.com/jquery/2.0.3/jquery","js/jquery"]
    }
})
require(['jquery'],function(){
    ...
})

paths能夠配置別名，還能夠配多個路徑，若是前面的路徑沒有加載成功，能夠選擇後面的加載路徑

四、require.config配置，爲了不讓每一個頁面都寫入配置，能夠使用data-main屬性

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

加載requirejs腳本的script標籤加入了data-main屬性，這個屬性指定的js將在加載完reuqire.js後處理，咱們把require.config的配置加入到data-main後，就能夠使每個頁面都使用這個配置，而後頁面中就能夠直接使用require來加載全部的短模塊名

data-main還有一個重要的功能，當script標籤指定data-main屬性時，require會默認的將data-main指定的js爲根路徑，是什麼意思呢？如上面的data-main="js/main"設定後，咱們在使用require(['jquery'])後(不配置jquery的paths)，require會自動加載js/jquery.js這個文件，而不是jquery.js，至關於默認配置了：

require.config({
    baseUrl:'js'
})

經過require加載的模塊通常都須要符合AMD規範即便用define來申明模塊，可是部分時候須要加載非AMD規範的js，這時候就須要用到另外一個功能：shim

require.config({
    shim: {
            'touch': {
                deps: ['zepto_core'],
                exports: '$'
            },
            'swipe': {
                deps: ['zepto_core'],
                exports: 'Swipe'
            },
            'delay': {
                deps: ['zepto'],
            }
        }
})