旧系统加data-i18n标记后文本消失或乱码，主因是html/json文件未统一为utf-8无bom编码且未置最顶；ie11需用getattribute而非dataset；老系统应封装translateelement并用mutationobserver处理动态节点；切换语言时须缓存并恢复表单值，区分textcontent与value等用户态属性；lang属性必须服务端写死以保障首屏可访问性。
旧系统加 data-i18n 标记时为什么文本消失或乱码
常见现象是：加了 data-i18n="nav.home" 后，页面首次加载显示空白，或中文变成方块、问号。根本原因不是语言包没加载，而是 HTML 文件本身编码不统一或未声明。
- 确保所有 HTML 文件保存为 UTF-8 无 BOM 编码（VS Code 默认可能带 BOM，需手动另存为「UTF-8」而非「UTF-8 with BOM」）
-
<meta charset="utf-8">必须在最顶部，且不能被任何注释或空行隔开 - JSON 语言包文件也必须是 UTF-8 无 BOM；用 VS Code 或 Notepad++ 打开后另存为 UTF-8 可避免隐形字符
- IE11 下若用
element.dataset.i18n读取属性会失败（驼峰转换不兼容），必须改用element.getAttribute('data-i18n')
已有大量内联 JS 和 document.write 的老系统怎么安全接入
直接重写所有模板不现实，但硬塞 i18next.init() 会和原有脚本冲突，尤其 document.write 在 DOM 加载后调用会清空整个页面。
- 禁用所有
document.write调用：用document.createElement+appendChild替代，或封装成惰性渲染函数 - 把国际化逻辑封装成独立模块，暴露
translateElement(el, key)方法，供老 JS 按需调用，不接管全局渲染 - 对已存在的动态插入节点（如表格行、弹窗内容），插入后立即执行
translateElement(newRow, 'table.row')，而不是等全量扫描 - 避免监听
DOMContentLoaded后批量翻译——老系统 DOM 可能分多阶段生成，应改为 MutationObserver 监听新增节点并即时处理
切换语言时表单输入框内容丢失怎么办
用户正在填地址、选日期，点个语言切换按钮，input.value、textarea.value、select.selectedIndex 全被清空，这是最伤体验的坑。
- 翻译函数只更新
textContent或innerHTML，绝不碰value、checked、selected等用户态属性 - 对
placeholder、title、alt这类属性，必须用对应后缀：data-i18n-placeholder="form.search_hint"，而不是复用data-i18n - 切换前缓存关键字段值：
const cache = { email: elEmail.value, agree: elAgree.checked }；更新完 DOM 再逐项恢复 - 日期选择器、富文本编辑器等第三方组件，需调用其自身 locale 切换方法（如
flatpickr.set("locale", "zh")），不能只靠 DOM 文本替换
如何让旧服务器返回的静态 HTML 也能支持 lang 属性同步
很多老系统是纯静态 HTML + 后端 CGI/ASP 渲染，没有 SSR 能力，但又需要 document.documentElement.lang 正确反映当前语言，否则屏幕阅读器和字体回退会出错。
- 不要依赖 JS 动态设置
lang——首次渲染时它已是错的，辅助技术已按错误语言开始解析 - 在服务器侧根据请求头
Accept-Language或 cookie，输出 HTML 时直接写死，哪怕只是简单字符串替换 - 前端初始化时优先读取
document.documentElement.lang，仅当为空或非法值时 fallback 到navigator.language，避免覆盖服务端意图 - 切换语言时，除了更新文本，必须同步修改
document.documentElement.lang和所有显式带lang属性的子元素（如<pre class="brush:php;toolbar:false;" lang="sql"></pre>），否则代码块语音朗读仍用旧语种
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
