模塊化

RequireJS官網(wǎng):www.requirejs.org

為什么使用RequireJS

1、有效的防止變量沖突
2、解決不同的js文件之間的依賴
3、可以寫出模塊化的代碼

RequireJS常用的方法:

1、requirejs.config
2、requirejs
3、define

入口文件(主模板):
data-main=""

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

主模板main.js如何編寫呢?

//配置require 定義別名
requirejs.config({
        //baseUrl: "js/lib",            //改變基目錄(baseUrl)
        paths:{                //指定模塊的加載路徑
            定義模塊別名:'引入依賴的js文件的加載路徑'
        },shim{        
//專門用來配置不兼容的模塊。具體來說,每個(gè)模塊要定義
//(1)exports值(輸出的變量名),表明這個(gè)模塊外部調(diào)用時(shí)的名稱;
//(2)deps數(shù)組,表明該模塊的依賴性。        
            'jquery.scroll': {
                  deps: ['jquery'],
                 exports: 'jQuery.fn.scroll'
             }
        }
})

//引入模板
requirejs(['引入依賴模塊名','valuedata'],function($,valuedata){        //回調(diào)函數(shù)
        console.log(valuedata.show);
})

valuedata.js 如何定義一個(gè)模塊

1、沒有依賴項(xiàng)可以直接寫函數(shù),有依賴模塊define第一項(xiàng)參數(shù)必須為數(shù)組
2、依賴模塊名:·text!review.txt,image!cat.jpg textimage插件,則是允許require.js加載文本和圖片文件。

define(['引入依賴模塊名'],function(//形參){
    return {
        show:function(){
            return 2;
        };
    }
})
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲(chǔ)服務(wù)。

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

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