首頁 > web前端 > Layui教程 > layui模組使用規範(附程式碼)

layui模組使用規範(附程式碼)

發布: 2019-11-29 13:23:11
轉載
2195 人瀏覽過

layui模組使用規範(附程式碼)

預先載入

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

    /*
    Demo1.js
    使用Layui的form和upload模块
    */
    layui.use(['form', 'upload'], function(){ //如果只加载一个模块,可以不填数组。如:layui.use('form')
    var form = layui.form() //获取form模块
    ,upload = layui.upload; //获取upload模块
    //监听提交按钮
    form.on('submit(test)', function(data){
    console.log(data);
    });
    //实例化一个上传控件
    upload({
    url: '上传接口url'
    ,success: function(data){
    console.log(data);
    }
    })
    });
登入後複製

按需載入(不建議)

如果你有強迫症,你對網站的效能有極致的要求,你並不想預先加載所需的模組,而是在觸發一個動作的時候,才去加載模組,那麼,這是允許的。你不用在你的JS最外層去包裹一個大大的layui.use,你只需要:

*
Demo2.js
按需加载一个Layui模块
*/
//……
//你的各种JS代码什么的
//……
//下面是在一个事件回调里去加载一个Layui模块
button.addEventListener('click', function(){
layui.use('laytpl', function(laytpl){ //温馨提示:多次调用use并不会重复加载laytpl.js,Layui内部有做模块cache处理。
var html = laytpl('').render({});
console.log(html);
});
});
登入後複製

模組命名空間

Layui的全部模組綁定在layui物件下,內部由layui.define()方法來完成。每一個模組都會一個特有的名字,而且無法被佔用。所以你無需擔心模組的空間被污染,除非是你 delete layui.mod; 呼叫一個模組也必須藉助layui物件的賦值。如:

layui.use(['layer', 'laypage', 'laydate'], function(){
var layer = layui.layer //获得layer模块
,laypage = layui.laypage //获得laypage模块
,laydate = layui.laydate; //获得laydate模块
//使用模块
});
登入後複製

更多layui知識請關注layui使用教學欄。

以上是layui模組使用規範(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板