首先簡介
一般html頁面加載不同的js文件(模塊)會使用<script>標簽來引入
而多個模塊之間可能存在先后依賴關系,如:
<script src="./js/jquery.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/artTemplate.js"></script>
顯然,瀏覽器加載的時候,會停止渲染,整個頁面失去響應時間不確定,而且要嚴格按照依賴性加載,依賴性強的位置靠后
require.js是JS模塊原型和理論概念引用的庫文件。它的作用就是為了解決依賴性:
1.實現(xiàn)js文件(模塊)的異步加載,避免網(wǎng)頁失去響應
2.管理模塊之間的依賴性,便于代碼的編寫&維護
project/html頁面上引入require.js(下載好放在project/js目錄下)
<script src="./js/require.js"></script>
接下來可以加載自己的主模塊(./js/main.js)
如果主模塊main.js不依賴別的模塊,直接寫自己的js腳本
如果依賴其他模塊就要按照AMD規(guī)范來寫主模塊的require函數(shù)
//定義被加載的模塊的加載路徑
require.config(
? ? paths:{
? ? ? ? ? ?/*BaseUrl:"project/"*/
? ? ? ? ? "jquery":"./js/jquery.min", ?//路徑可為相對/絕對路徑/網(wǎng)址
? ? ? ? ? "echarts":"./js/echart" ?//require.js加載的就是.js文件 所以.js可省
? ? }
);
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
那么這個時候require.js加載的模塊默認路徑(當前路徑)是與引入require.js的html頁面的統(tǒng)計目錄(BaseUrl:"project/")而需要異步加載的模塊在project/js目錄下,需要修改當前目錄路徑(BaseUrl:"./js")
//加載模塊
加載模塊require(["a","b"],function(a,b){ });
第一個參數(shù):數(shù)組(所依賴的模塊們)
第二個參數(shù):回調(diào)函數(shù)(只有在指定依賴的模塊加載完成后才會調(diào)用此方法)
require(["jquery","echarts"],function(jquery,echarts){
//函數(shù)體
});