placeholder没变而title变了，是因为默认逻辑只处理textContent，而placeholder、title等需显式绑定；必须检查data-i18n-placeholder等扩展属性并分别赋值，且placeholder是DOM属性，setAttribute无效。
data-i18n 更新时为什么 placeholder 没变，但 title 变了
因为默认逻辑只处理 textContent，而 placeholder、title、aria-label 这类属性需要显式声明绑定。常见错误是只遍历 data-i18n 并设 el.textContent = langPack[key]，结果表单输入框的提示文字原封不动。
- 必须检查元素是否带
data-i18n-placeholder、data-i18n-title等扩展属性，再分别赋值：el.placeholder = langPack[key] -
title通常能“意外生效”，是因为部分实现用了setAttribute('title', ...)，但placeholder是 DOM 属性（property），不是 HTML 属性（attribute），用setAttribute不会触发渲染更新 - 避免对
input或textarea直接改innerHTML——会清空当前输入值，且不支持placeholder动态更新
切换语言后日期/数字格式还是英文怎么办
Intl 实例是不可变的，创建后不会随语言变更自动刷新。你不能复用初始化时的 Intl.DateTimeFormat('en') 实例，哪怕之后调用 lang = 'zh'。
- 每次语言切换后，必须新建格式化实例：
new Intl.DateTimeFormat(currentLang, options) - 若页面有多个时间显示区域，别为每个都 new 一次——缓存按语言分组的实例，比如
formatters.date['zh'] - 注意
toLocaleString()默认用当前 JS 执行环境语言，不是页面语言；显式传参：date.toLocaleString(currentLang) - 若用了
moment.js，必须调用moment.locale(currentLang)，否则format('LL')仍输出英文
RTL 语言（如阿拉伯语）下按钮顺序错乱怎么修
单纯改 document.documentElement.lang = 'ar' 不会自动翻转布局，CSS 仍按 LTR 渲染，导致按钮、图标、文字顺序与用户预期相反。
- 必须同步设置
dir="rtl"：document.documentElement.dir = 'rtl'，这是触发浏览器 RTL 布局引擎的关键 - 避免用
float: right或margin-left: auto强制翻转——这些在 RTL 下行为反直觉，且破坏逻辑属性一致性 - 优先用 CSS 逻辑属性：
margin-inline-start替代margin-left，text-align: start替代text-align: left - 检查字体是否支持阿拉伯字符：某些中文字体（如 Noto Sans CJK）不包含阿拉伯字母，会导致方块或回退到系统默认字体，影响排版
语言切换后页面闪动或滚动位置丢失
直接 document.body.innerHTML = newHTML 或批量 el.innerText = ... 触发重排，尤其在长页面中会造成明显跳动，且 input 光标丢失、第三方组件状态清空。
立即学习“前端免费学习笔记（深入）”；
- 只更新带
data-i18n的文本节点，跳过所有含子节点的容器——用node.childNodes遍历并过滤Node.TEXT_NODE - 对
input、textarea、select元素，只更新placeholder、title、aria-label，绝不碰value或selectedIndex - 切换完成后手动恢复滚动：
window.scrollTo(0, savedScrollTop)，并在切换前用let savedScrollTop = window.scrollY缓存 - 若用了 Vue/React 等框架，别绕过虚拟 DOM 直接操作 DOM——语言切换应触发状态更新，由框架驱动渲染
