开始

【说明】仅收录 非组件模块 api。（例如 table, form 的 api 在各自的组件中）

layui.config()

/**
 * @brief: 在使用模块之前，全局化配置一些参数。
 * @param {object} options
 *  (1) base: 设定 Layui 扩展模块的所在目录，一般与 extend 方法搭配使用。
 *  (2) dir: Layui 基础目录，用于动态导入 src/layui.js 时的内置模块的加载。（一般无需设置）
 *  (3) version: 用于更新模块缓存，默认 false。
 *    false (def)
 *    true 即让浏览器不缓存
 *    其它任意值；
 * (4) debug: 用于开启调试模式
 *    false (def)
 *    true JS 模块的节点会保留在页面。
 * @return {*}
 */
layui.config(options)

// demo
layui.config({
  base: '', // 一般不设置
  dir: 'layui/', // 用于动态导入 src/layui.js
  version: false, // 使用浏览器模块缓存
  debug: false, // 不开启调试模式
})

layui.extend()

概述

除了 Layui 的内置模块，在实际项目开发时，必不可少也需要扩展模块（可以简单理解为符合 layui 模块规范的 JS 文件）。

语法

/**
 * @brief: 扩展模块
 * @param {object} 对象，用于声明模块别名
 *    键：要扩展的第3方模块名称；
 *    键值：被扩展模块的路径和名称；
 */
layui.extend(obj)

示例

现在，让我们尝试着扩展一个 Layui 第三方模块：

1、创建模块；

模块名注意：在前文的 “模块命名空间” 提到，模块名具有唯一性，即不可被占用，因此扩展模块必须是一个未被定义过的模块名。

假设为 firstMod，然后新建一个 firstMod.js 文件并放入项目的任意目录中（最好不要放入到 Layui 原始目录）

定义一个模块

2、编写模块；
编写该模块主体代码；（注意：这里的 js 将来是在 config 中用 layui 的模块语法引入）

3、扩展模块；

前提：
layui.config()
layui.extend()

扩展模块

4、.use()使用这个模块；
上面代码

注意

【注意】扩展模块是项目开发的重要环节，它既可以是工具性组件，也可以是纯业务组件，是 layui 的延伸，也是项目的支撑。

layui.use()

语法

/**
 * @brief: 使用 layui 模块
 * @params {array} [mods] 若填写，必须是已被成功定义的模块名
 * 注意：若 mods 不填，即只传 callback 参数时，则表示引用所有内置模块。
 * @params {function} callback 即为使用模块成功后回调函数
 * 注意：该回调会在 html文档加载完毕后再执行，确保你的代码在任何地方都能对元素进行操作。
 */
layui.use([mods], callback)

示例

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

// （2）使用所有内置模块（layui v2.6 开始支持）
layui.use(function () {
  var layer = layui.layer,
    table = layui.table,
    laydate = layui.laydate
  // ...

  // do something
})

// （3）还可以通过 callback 返回的参数得到模块对象，如：
layui.use(['layer', 'table'], function (layer, table) {
  // 使用 layer
  layer.msg('test')
  // 使用 table
  table.render({})
})

使用示例

layui.define()

语法

/**
 * @brief:
 * @param {array} [mods] 可选，用于申明该模块 所依赖的模块
 *  （1）Layui 定义的模块；
 *  （2）自定义的模块；
 * @param {function} callback(exports) 参数 callback 即为模块加载完毕的回调函数
 *    exports(modName, apiObj) {function} 用于输出该模块的接口
 *      本质是一个函数；
 *      参数1：模块名称；
 *      参数2：模块接口；
 */
layui.define([mods], callback)

示例

// （1）不依赖其它模块；
layui.define(function (exports) {
  // do something

  // 输出 demo 模块
  exports('demo', {
    msg: 'Hello Demo',
  })
})

// （2）若该模块需要依赖别的模块，则在 `mods` 参数中声明即可：
layui.define(['layer', 'form'], function(exports) {})

示例
（不依赖其它模块）自定义模块；
（依赖其它模块）自定义模块；

特殊

【特殊 1】callback 将会在初次加载该模块时被自动执行。

【特殊 2】手动获取 callback
另外，有时，某些特殊场景中可能需要再次执行该 callback, 那么可通过 layui.factory(mod) 方法获得。
如：

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

！模块命名空间

【结论 1】Layui 定义的模块将会被绑定在 layui 对象下。

/*
如： `var demo = layui.demo` 每个模块都有一个特定命名，且无法被占用，所以你`无需担心模块的命名空间被污染`。

除非通过 `layui.disuse([mods])` 方法弃用已定义的模块。

以下是定义一个 `"依赖 Layui 内置模块"` 的示例：
*/
layui.define(['layer', 'laydate'], function (exports) {
  var layer = layui.layer, // 获得 layer 模块
    laydate = layui.laydate // 获得 laydate 模块

  // 输出模块
  exports('demo', {}) // 模块名 demo 未被占用，此时模块定义成功
  // exports('layer', {}) ; 模块名 layer 已经存在，此时模块定义失败
})

【结论 2】在 扩展模块 时，也同样不能命名已经存在的模块名。