使用layui定义一个模块并使用的例子

在使用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(\'<option value=\"\">请选择</option>\');
          if(data.result != null && data.result.length != 0) {
            $.each(data.result,function(i,place) {
              if(levelPlace == place.name) {
                $(\"#\" + tagId).append(\'<option selected value=\"\'+place.id+\'\">\'+place.name+\'</option>\')
              }else {
                $(\"#\" + tagId).append(\'<option value=\"\'+place.id+\'\">\'+place.name+\'</option>\')
              }
            })
          }
          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定义一个模块并使用的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。