layui开发技能

1. 核心基准与开发约定

为了保证代码的稳定性与兼容性，技能包确立了以下严格的开发基准：

• 版本锁定：严格基于 2.13.9 稳定版本，屏蔽 3.0-alpha 特性（如 ESM 模块、lay- 前缀），避免版本混淆。
• 规范命名：CSS 类名严格遵循 layui- 前缀（如 layui-btn、layui-layout-admin）。
• 按需加载：JS 统一使用 layui.use(['模块'], callback) 进行按需加载；内置 layui.$ (jQuery)，可直接使用 $.ajax 进行网络请求。
• 事件与模板：组件实例统一通过 lay-filter 属性命名并绑定事件（如 table.on('tool(demo)')）；行内模板统一采用 <script type="text/html"> 配合 laytpl 语法（{{= d.field }}）进行渲染。
• 动态渲染：明确规定 JS 动态插入 DOM 元素后，必须调用 form.render() 或 element.render() 重新渲染组件。

2. 全覆盖的组件能力矩阵

技能包内置了模块化的参考文档（位于 references/ 目录），覆盖中后台开发的 20+ 核心场景：

• 架构与布局：Admin 后台大布局、多标签页框架、CRUD 页面范式、CSS 栅格系统与字体图标库。
• 核心数据组件：数据表格（分页/排序/工具栏）、树形表格（treeTable）、独立分页（laypage）、表单与富文本（form/layedit）。
• 交互与弹层：万能弹层（layer）、日期时间选择（laydate）、下拉菜单（dropdown）、文件上传（upload）、树组件与穿梭框。
• 进阶与底层：模板引擎（laytpl）、底层工具方法（util）、自定义组件构建器及多语言 i18n 支持。

3. 高频陷阱与避坑指南

针对 Layui 实际开发中最容易踩坑的痛点，提供速查解决方案：

• 渲染失效：动态生成的 select/checkbox 不生效，需手动触发 form.render('select')。
• 重载丢参：table.reload() 无效时，需检查是否设置了 id 属性，以及 where 查询参数是否正确传递。
• 模板截断：在 <script> 模板中直接写 </script> 会导致页面截断，必须进行拆分或转义。
• 事件失联：lay-event 不触发时，务必核对监听器的 filter 与容器 lay-filter 的值是否完全一致。
• 接口适配：当后端返回的数据格式不符合 table 默认的 {code:0, msg, count, data} 时，需使用 parseData 属性进行数据清洗适配。
• 响应式适配：移动端需结合 layui-col-xs* 栅格与 layui-hide-xs 等辅助类控制元素显隐。

4. 标准化使用流程与模板

• 开箱即用：提供包含 CDN 引入与基础模块初始化的最小可用 HTML 模板，可直接复制作为项目起点。
• 查阅路径：开发后台框架时，建议优先阅读 admin-architecture.md 确立数据接口约定，再按需查阅具体控件的参考文档。
• 平滑迁移：提供的示例代码具备高复用性，开发者只需将文档中的模拟接口（/static/json/...）和演示 CDN 替换为项目真实的业务地址即可投入生产。