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% 的日常開發任務。表格、表單、彈窗三大組件滿足后臺系統基礎需求，配合布局和工具類可快速構建響應式頁面。