require.js配置路徑的用法和css的引入

　　前端開發在近一兩年發展的非常快，JavaScript作為主流的開發語言得到了前所未有的熱捧。大量的前端框架出現了，這些框架都在嘗試着解決一 些前端開發中的共性問題，但是實現又不盡相同。通常一般的前端加載js文件都是這樣 :

<script type="text/javascript" src="js/js1.js"></script>
<script type="text/javascript" src="js/js2.js"></script>
<script type="text/javascript" src="js/js3.js"></script>
<script type="text/javascript" src="js/js4.js"></script>

但是當一個項目特別大的時候  引入的js文件就特別多，這樣看起來不雅觀，並且不高效，當js文件多而大的時候，網頁下載就會出現超時，導致網站響應超時，直接500，所以一個神奇的

js框架(js工具包)就出現了:require.js。

require.js主要解決兩個問題：

1、實現js的異步加載,避免js太多加載響應時間太多導致網站超時，
2、管理模塊之間的依賴性,便於編寫與維護。

好了步入今天的正題，寫一個require.js用法的案例，供大家參考一下：

假設我們的項目有一個這樣的資源目錄：

 

第一步在index.html中引入已經下載好的require.js

然后我們新建一個config.js來寫相應的加在配置:

然后打開config.js里面寫入代碼如下:

 

require.config({
    baseUrl:'/data/points/',//配置基目錄
    urlArgs:'v='+(new Date()).getTime(),//清楚緩存
    paths:{
        'css': 'libs/js/css.min',
        'jquery': 'libs/js/jquery-1.11.1.min',
        'vur': 'libs/js/vue.min',
        'amazeui': 'libs/js/amazeui.min',
        'color': 'libs/js/color.min'
    },
    shim:{
        'amazeui':{
            deps: ['jquery','css!libs/css/amazeui.min','css!style/common','css!style/footer'],
        },
        'color':{
            deps:['css!libs/css/color.min']
        }
    }

});

其中加入css應該用模塊的依賴性 也就是deps

deps:['css!libs/css/color.min'] 這里會優先加在css這個模塊名下的文件(libs/js/css.min.js) 然后一個 "!"后面緊接着在基目錄下加在libs/css/color.min.css

其中css.min.js這個是一個依賴模塊js,這里面是寫了一個加載css文件的方法，

具體css.min.js可以點這里看到

現在好了瀏覽器打開index.html發現沒有把我們需要額外加在的加在進來，這個是為是么呢？好了，這里的話記得要在index.html的head下<script type="javascript/text" src="config.js"></script>后面調用require.js中的方法require，也就是加上這一句

<script type="javascript/text' >require['color']</script>//標識調用配置中的color模塊

再次訪問index.html好了完美出現我們想要的了。

如圖：

 

 注意

index.html中引入的順序不能打亂 

<script type="text/javascript" src="config.js"></script>
    
<script type="text/javascript" src="require.js"></script>
    
<script type="text/javascript">require(['color']);</script>

require.config()接受一個配置對象，這個對象除了有前面說過的paths屬性之外，還有一個shim屬性，專門用來配置不兼容的模塊。具體來說，每個模塊要定義（1）exports值（輸出的變量名），表明這個模塊外部調用時的名稱；（2）deps數組，表明該模塊的依賴性。