3.3 layer 与工具组件心得：弹层、日期、模板引擎

layer：iframe 层的适用与代价

layer 支持多种弹层形态，覆盖了弹窗场景的绝大多数需求。我的选择依据先看一张表：

iframe 层最诱人也最有代价。适合的场景是内容自成一体、有独立交互流程，比如完整的编辑向导，塞进当前页面反而互相干扰。代价要心里有数：上下文隔离导致父子页通信要走专门接口，加载多一整个页面的开销，移动端适配也要另算。我的分界线是——交互简单就页面层加 HTML，流程复杂才动用 iframe 层。

tips 层的偏移参数值得单独说：方向参数决定气泡朝哪边弹出，再配合偏移量微调，才能贴得舒服。写完务必把窗口拉窄看一眼，tips 出界是最常见的翻车点。

prompt 与 confirm 都支持回调闭包：点击确定后拿到输入值或确认结果，再执行业务。闭包住了外层作用域，意味着可以把当前行的数据直接带进回调，不必再查一遍。删除确认、单字段快速修改这类场景，一个 prompt 加一个闭包就足够优雅。

弹层一多就要有节制。同一屏不要叠太多层，嵌套弹层尽量收敛成页面内流程；关闭动作统一交给组件自带的机制，别自己另造一套关闭逻辑，否则状态收尾容易漏，残留的遮罩和数据多半就是这么来的。

laydate：range 与格式化

laydate 的高频用法就两个：range 开启范围选择，一个控件解决起止日期；format 自定义输出格式，把日期串成接口要的样子，省去前端再拼一道字符串。年月日时分等类型切换在文档里有对应配置，用到时查官方文档即可，不必背。

几条心得：

• 范围选择配合表格查询是管理后台的标配组合，起止值一起拿到，不必拼两个控件；
• 输出格式全部交给 format，接口要什么格式就配什么格式，前端不做二次加工；
• 控件放在窄容器里时留意弹出方向，避免面板被边缘裁切或遮挡。

laytpl：2.11 重构后的新体验

2.11 对 laytpl 做了重构，变化有三处：新标签风格 {{ }}，写起来更现代；include 支持子模板，公共片段可以拆出去复用；extendVars 支持扩展变量，模板里能拿到数据之外的辅助内容。

我特别想强调一个习惯：输出要区分转义。两种写法只差一个等号（以官方文档为准）：

{{ d.remark }}
{{= d.remark }}

前者原样输出，后者转义输出。列表页、详情页凡是渲染用户可控内容的一律转义，这是防 XSS 的基本盘，也是模板引擎时代最容易省掉的一步。

include 拆公共模板的心得也值得展开：操作按钮列、状态徽标这类反复出现的片段，拆成子模板后改一处全局生效，列表页和详情页还能共用同一份徽标定义；extendVars 则适合塞字典表、枚举文案这类与单条数据无关但每个页面都要用的辅助内容，模板里随取随用，不必把所有东西都塞进数据对象。

场景选型速查表

心得小结

这三个组件的共性是轻、独立、随取随用。用 layer 前先想清楚要不要 iframe，用 laydate 时把格式交给 format，用 laytpl 时把转义刻进手指记忆。工具组件没有多少高深技巧，分寸感本身就是技巧。