模塊在layui中的應用

這篇文章將為大家詳細講解有關(guān)模塊在layui中的應用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

預先加載

開門見山，還是直接說使用比較妥當。Layui的模塊加載采用核心的 layui.use(mods, callback)方法，當你的JS 需要用到Layui模塊的時候，我們更推薦你采用預先加載，因為這樣可以避免到處寫layui.use的麻煩。你應該在最外層如此定義：

    /*
    Demo1.js
    使用Layui的form和upload模塊
    */
    layui.use(['form', 'upload'], function(){ //如果只加載一個模塊，可以不填數(shù)組。如：layui.use('form')
    var form = layui.form() //獲取form模塊
    ,upload = layui.upload; //獲取upload模塊
    //監(jiān)聽提交按鈕
    form.on('submit(test)', function(data){
    console.log(data);
    });
    //實例化一個上傳控件
    upload({
    url: '上傳接口url'
    ,success: function(data){
    console.log(data);
    }
    })
    });

按需加載（不推薦）

如果你有強迫癥，你對網(wǎng)站的性能有極致的要求，你并不想預先加載所需要的模塊，而是在觸發(fā)一個動作的時候，才去加載模塊，那么，這是允許的。你不用在你的JS最外層去包裹一個大大的 layui.use，你只需要：

*
Demo2.js
按需加載一個Layui模塊
*/
//……
//你的各種JS代碼什么的
//……
//下面是在一個事件回調(diào)里去加載一個Layui模塊
button.addEventListener('click', function(){
layui.use('laytpl', function(laytpl){ //溫馨提示：多次調(diào)用use并不會重復加載laytpl.js，Layui內(nèi)部有做模塊cache處理。
var html = laytpl('').render({});
console.log(html);
});
});

模塊命名空間

Layui的全部模塊綁定在 layui對象下，內(nèi)部由layui.define()方法來完成。每一個模塊都會一個特有的名字，并且無法被占用。所以你無需擔心模塊的空間被污染，除非是你 delete layui.mod; 調(diào)用一個模塊也必須借助layui對象的賦值。如：

layui.use(['layer', 'laypage', 'laydate'], function(){
var layer = layui.layer //獲得layer模塊
,laypage = layui.laypage //獲得laypage模塊
,laydate = layui.laydate; //獲得laydate模塊
//使用模塊
});

關(guān)于模塊在layui中的應用就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。