【layui】模块操作笔记

配置模块目录

layui.config({
  base: '/js/layui_exts/' // 配置 Layui 第三方扩展模块存放的基础目录
})

定义模块

layui.define([mods], callback);

• 参数 mods 可选，用于声明该模块所依赖的模块；
• 参数 callback 即为模块加载完毕的回调函数，它返回一个 exports 参数，用于输出该模块的接口。

/** demo.js **/
layui.define(function(exports){
  // do something
  
  // 输出 demo 模块
  exports('demo', {
    msg: 'Hello Demo'
  });
});

注意：模块文件名与模块名一致；另外， callback 将会在初次加载该模块时被自动执行。而有时，在某些特殊场景中可能需要再次执行该 callback，那么可以通过 layui.factory(mod) 方法获得。如：

var demoCallback = layui.factory('demo'); // 得到定义 demo 模块时的 `callback`

• 模块命名空间
  Layui 定义的模块将会被绑定在 layui 对象下，如：var demo = layui.demo; 每个模块都有一个特定命名，且无法被占用，所以你无需担心模块的命名空间被污染，除非通过 layui.disuse([mods]) 方法弃用已定义的模块。

以下是定义一个「依赖 Layui 内置模块」的模块示例：

layui.define(['layer', 'laydate'], function(exports){
  var layer = layui.layer // 获得 layer 模块
  var laydate = layui.laydate; // 获得 laydate 模块
  
  // 输出模块
  exports('demo', {}); // 模块名 demo 未被占用，此时模块定义成功
  // exports('layer', {}); // 模块名 layer 已经存在，此时模块定义失败
});

同样的，在「扩展模块」时，也同样不能命名已经存在的模块名。

使用模块

layui.use([mods], callback);

• 参数 mods 若填写，必须是已被成功定义的模块名；
• 参数 callback 即为使用模块成功后回调函数。

// 使用指定模块
layui.use(['layer', 'table'], function(){
  var layer = layui.layer;
  var table = layui.table;
  
  // do something
});

你还可以通过 callback 返回的参数得到模块对象，如：

layui.use(['layer', 'table'], function(layer, table){
  // 使用 layer
  layer.msg('test');
 
  // 使用 table
  table.render({});
});

扩展模块

layui.extend(obj);

• 参数 obj 是一个对象，必选，用于声明模块别名。

只需声明模块名及模块文件路径，即完成模块扩展。

layui.extend({
  ModName1: 'ModName1', // 定义模块名和模块文件路径，继承 layui.config 的 base 路径
  ModName2: '{/}/js/extend/ModName2' // 开头特定符 {/} 即代表采用单独路径
});

// 然后我们就可以像使用内置模块一样使用扩展模块
layui.use(['ModName1'], function(){
  var ModName1= layui.ModName1;
});