layui如何定义和使用模块

layui如何定义和使用模块？可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

成都创新互联是一家专业提供丰台企业网站建设,专注与成都网站设计、网站制作、H5高端网站建设、小程序制作等业务。10年已为丰台众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

在使用layui的过程，有几个方法需要被多个js引用，所以我按照文档，自定义了一个layui的模块，下面实现过程

先定义一个模块

//定义模块
layui.define(['form'], function(exports){

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

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

    //输出模块
    exports('common', obj);
});

定义方法使用layui.define

define中的第一个参数可以加载一些layui中内置的模块来使用，第二个回调方法中定义一些公共的方法

exports的第一参数是这个模块起的名字，第二个参数是一个对象该对象中定义了这三个方法

设置模块

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

定义模块使用layui.config

base定义的是定义模块的js所在目录

common是设置的别名，’common’是目录中的文件名（.js自动加）

调用模块

layui.use(['common'], function(){
    var common = layui.common;

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

});

先将common模块use出来，调用代码如上common.changeParentPlace($("#firstLevelId").val(),'secondLevelId');和使用内置模块是一样的

上述就是小编为大家分享的layui如何定义和使用模块的方法了，如果您也有类似的疑惑，不妨参照上述方法进行尝试。如果想了解更多相关内容，请关注创新互联行业资讯。