Require.js--模塊化

首先簡介



一般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ù)體

});


最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容