Layui核心语法快速入门指南

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. 按钮组

默认按钮
原始按钮
警告按钮
禁用按钮

2. 布局系统

  
左侧
  
右侧

3. 图标使用

 
 

4. 导航菜单

  
首页
  
产品

---

四、事件监听语法

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. ​版本控制​：

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% 的日常开发任务。表格、表单、弹窗三大组件满足后台系统基础需求，配合布局和工具类可快速构建响应式页面。