Layui 基本语法学习指南

Layui 是一个经典的模块化前端框架，以其轻量易用、组件丰富著称。以下是 Layui 的核心语法结构和使用方法：

---

一、模块加载机制（核心基础）

// 标准模块加载语法
layui.use(['module1', 'module2'], function() {// 回调函数中获取模块var mod1 = layui.module1;var mod2 = layui.module2;// 模块功能调用mod1.doSomething();
});

​关键点​：

1. layui.use() 是入口函数
2. 数组参数声明依赖的模块
3. 回调函数在模块加载完毕后执行

---

二、常用模块使用语法

1. Layer 弹出层

layui.use('layer', function(){var layer = layui.layer;// 基础提示layer.msg('操作成功');// 警告框layer.alert('重要提示');// 确认对话框layer.confirm('确定删除吗？', function(index){layer.msg('已删除');layer.close(index);});
});

2. Form 表单处理

layui.use('form', function(){var form = layui.form;// 表单渲染（必须调用）form.render();// 监听提交form.on('submit(formDemo)', function(data){console.log(data.field); // 表单字段值return false; // 阻止表单跳转});// 监听复选框form.on('checkbox(filter)', function(data){console.log(data.elem.checked);});
});

3. Table 数据表格

layui.use('table', function(){var table = layui.table;table.render({elem: '#dempTable',url: '/api/data',cols: [[{field: 'id', title: 'ID'},{field: 'name', title: '姓名'},{field: 'age', title: '年龄'}]]});// 表格重载table.reload('dempTable', {where: {key: 'value'}});
});

4. Util 工具模块

layui.use('util', function(){var util = layui.util;// 时间戳格式化util.toDateString(1672531200, 'yyyy-MM-dd'); // 2023-01-01// 倒计时util.countdown(new Date(2023, 11, 31), function(date){console.log(date.seconds);});
});

---

三、常用组件语法

1. 按钮组

<button class="layui-btn">默认按钮</button>
<button class="layui-btn layui-btn-primary">原始按钮</button>
<button class="layui-btn layui-btn-danger">警告按钮</button>
<button class="layui-btn layui-btn-disabled">禁用按钮</button>

2. 布局系统

<div class="layui-row"><div class="layui-col-md4">左侧</div><div class="layui-col-md8">右侧</div>
</div>

3. 图标使用

<i class="layui-icon">&#xe60c;</i> <!-- 爱心图标 -->
<i class="layui-icon layui-icon-home"></i> <!-- 新版图标 -->

4. 导航菜单

<ul class="layui-nav"><li class="layui-nav-item"><a href="">首页</a></li><li class="layui-nav-item layui-this"><a href="">产品</a></li>
</ul>

---

四、事件监听语法

1. 通用元素事件

layui.$('.item').on('click', function(){layer.msg('元素被点击');
});

2. 模块特定事件

// 表单事件
form.on('select(filter)', function(data){console.log('下拉选择：', data.value);
});// 表格行点击事件
table.on('row(tableDemo)', function(obj){console.log('行数据：', obj.data);
});

---

五、全局配置

// 修改默认配置（需在 use 之前）
layui.config({version: '1.0.0',     // 锁定版本base: '/res/layui/',  // 自定义模块路径debug: true           // 开启调试模式
});

---

六、自定义模块（进阶）

// 定义模块
layui.define(function(exports){var demo = {hello: function(){layer.msg('Hello Layui');}};exports('mymodule', demo);
});// 使用自定义模块
layui.use('mymodule', function(){layui.mymodule.hello();
});

---

七、最佳实践建议

1. ​模块化加载原则​：

   // ✅ 正确方式：按需加载
   layui.use(['form', 'layer'], function(){// 初始化逻辑
   });// ❌ 避免直接访问（可能未加载）
   var layer = layui.layer;

2. ​DOM 操作时机​：

   layui.use(function(){// ✅ DOM 操作放在这里（确保元素已渲染）layui.$('.btn').on('click', handler);
   });

3. ​版本控制​：

   <link rel="stylesheet" href="layui.css?v=2.8.0">
   <script src="layui.js?v=2.8.0"></script>

4. ​扩展方法封装​：

   layui.extend({myutil: '/js/myutil' // 扩展工具库
   });layui.use('myutil', function(){layui.myutil.customMethod();
   });

---

学习资源推荐

1. 官方文档：Layui - 极简模块化前端 UI 组件库
2. 示例中心：https://www.layui.dev/demo/
3. GitHub：https://github.com/layui/layui

Layui 遵循"经典模块化"理念，掌握 use()->获取模块->调用功能 这一核心链路，就能快速上手 80% 的日常开发任务。表格、表单、弹窗三大组件满足后台系统基础需求，配合布局和工具类可快速构建响应式页面。