layui定義一個模組並使用的實例-Layui教程-PHP中文網

layui定義一個模組並使用的實例

尚

發布： 2019-11-29 14:14:45

轉載

2811 人瀏覽過

layui定義一個模組並使用的實例

在使用layui的過程，有幾個方法需要被多個js引用，所以我按照文檔，自訂了一個layui的模組，下面實現過程（推薦：layui使用教程）

先定義一個模組

//定义模块
layui.define([&#39;form&#39;], function(exports){

    var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
    var $ = layui.$;

    var obj = {
        changeParentPlace: function (parentId,tagId,levelPlace) {
            $.ajax({
                url:ctx + &#39;/base/place/changeParentPlace&#39;,
                type:&#39;get&#39;,
                data:{
                    parentId:parentId
                },
                dataType:&#39;json&#39;,
                success:function (data) {
                    $("#" + tagId).empty();
                    $("#" + tagId).append(&#39;<option value="">请选择</option>&#39;);
                    if(data.result != null && data.result.length != 0) {
                        $.each(data.result,function(i,place) {
                            if(levelPlace == place.name) {
                                $("#" + tagId).append(&#39;<option selected value="&#39;+place.id+&#39;">&#39;+place.name+&#39;</option>&#39;)
                            }else {
                                $("#" + tagId).append(&#39;<option value="&#39;+place.id+&#39;">&#39;+place.name+&#39;</option>&#39;)
                            }
                        })
                    }
                    form.render(&#39;select&#39;); //刷新select选择框渲染
                }
            })
        }
    }

    //输出模块
    exports(&#39;common&#39;, obj);
});

登入後複製

定義方法使用layui.define

define中的第一個參數可以載入一些layui中內置的模組來使用，在第二個回調方法中定義一些公共的方法

exports的第一個參數是這個模組起的名字，第二個參數是一個物件該物件中定義了這三個方法

設定模組

//设置模块
layui.config({
    base: ctx + &#39;/js/app/modules/&#39; //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
    common:&#39;common&#39;
});

登入後複製

定義模組使用layui.config

base定義的是定義模組的js所在目錄

common是設定的別名，' common'是目錄中的檔案名稱（.js自動加）

呼叫模組

layui.use([&#39;common&#39;], function(){
    var common = layui.common;

    common.changeParentPlace($("#firstLevelId").val(),&#39;secondLevelId&#39;);

});

登入後複製

先將common模組use出來，呼叫程式碼如上common.changeParentPlace($("#firstLevelId") .val(),'secondLevelId');和使用內建模組是一樣的

以上是layui定義一個模組並使用的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！