用data-i18n实现零侵入式文本绑定需在html元素上显式添加data-i18n属性标记翻译键，js加载对应语言包后批量填充textcontent；仅影响textcontent，placeholder/title/alt等须用data-i18n-placeholder等后缀属性，且必须同步更新各元素lang属性以保障可访问性与seo。
怎么用 data-i18n 实现零侵入式文本绑定
直接在 HTML 元素上加 data-i18n 属性，是最轻量、不破坏语义、且兼容 SSR 的方式。它不依赖框架，也不需要重写 DOM 结构。
常见错误现象：用 class 名（如 class="btn-submit"）或 ID（如 id="login-btn"）当翻译键，结果换语言时 JS 查不到映射，文案留空；或者把 data-i18n 加在父容器上，指望子节点自动继承——JS 不会递归推导，必须显式标记每个可翻译节点。
-
data-i18n只更新元素自身的textContent，对placeholder、title、alt无效，得额外写data-i18n-placeholder、data-i18n-title等带后缀的属性 - 表单控件要单独处理：
<input data-i18n-placeholder="search_hint">、<select data-i18n="country_list"><option value="CN">中国</option></select>需遍历其option并查语言包中"country_list.options"数组 - SVG 内文本（如
<text data-i18n="download">下载</text>）需识别SVGTextElement类型，不能只用querySelectorAll('[data-i18n]')一概而论 - 别在
<script></script>、<style></style>、<pre class="brush:php;toolbar:false;"></pre>里加data-i18n——这些节点不参与渲染，替换无效
JSON 语言包怎么组织才不翻车
语言包不是随便塞个对象就行。结构松散、键名不一致、路径混乱，会导致切换时大面积留白或 fallback 失效。
性能影响：全量预加载所有语言包（如 en.json + zh.json + ja.json）会让首屏体积暴涨；但每次切换都重新 fetch() 又可能卡顿，尤其弱网下。
- 每个语言一个文件，路径固定为
./locales/${lang}.json，例如./locales/zh-CN.json、./locales/en-US.json - 结构必须扁平：所有键都在顶层，禁止嵌套如
{"ui": {"header": {"title": "..."}}}；键名严格对齐，某语言暂未翻译也要保留键，值设为空字符串"home.title": "" - 加载失败必须兜底：用
try/catch包住fetch()，再判断response.ok；失败时 fallback 到内置默认对象（如{ "home.title": "Home", "login_btn": "Login" }），而非留空 - HTTP 响应头必须是
Content-Type: application/json，否则response.json()会静默失败
切换语言时为什么页面闪动或读错语音
只改文案、只设 document.documentElement.lang，屏幕阅读器仍按旧语言朗读，字体 fallback 和标点间距也会错——因为浏览器和辅助技术按**每个元素自身的 lang 属性**决定行为，不是继承来的。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
容易踩的坑：以为设了根节点 lang 就万事大吉，结果日文引文 <p lang="ja">こんにちは</p> 被一起切成 lang="zh-CN"，语音引擎乱读；或者动态插入的弹窗没同步 lang，被屏幕阅读器忽略。
- 切换前必须遍历所有已带
lang属性的元素（document.querySelectorAll('[lang]')），只更新明确需要随主语言变的节点；局部多语言内容（如代码块<code lang="bash">、英文术语<span lang="en">useState</span>）应跳过 - 更新 DOM 前用
getComputedStyle记录滚动位置，更新完调用window.scrollTo()恢复，否则页面跳回顶部 - 如果用了
Intl.DateTimeFormat或Intl.NumberFormat，必须重建实例，不能复用旧对象；moment.js 用户需调用moment.locale('en') - 动态插入的 DOM（AJAX 表格行、Toast 提示）插入后必须立即调用翻译函数，否则不会自动生效
复杂页面怎么工程化拆分语言资源
大型项目不可能靠一个 all.json 维护全部文案。模块化拆分不是为了炫技，而是让团队协作、增量翻译、按需加载真正可行。
使用场景：中后台系统含用户管理、报表、审批流等模块；多语言博客含文章正文、评论、侧边栏推荐——不同模块更新频率、翻译优先级、协作方都不同。
- 按功能域拆分文件：如
common.json（按钮、提示）、form.json（校验消息）、report.json（图表标题、指标说明），路径统一为./locales/${lang}/common.json - 加载策略用
Promise.all()并行拉取当前页所需模块，避免串行阻塞；非关键模块（如帮助中心）可懒加载 - 键名设计带前缀，避免冲突：如
"report.export_btn"、"form.email_required"，不写"export"这种裸键 - 插值语法支持运行时变量，如
"user.greeting": "欢迎 {name}，你有 {count} 条新消息"，JS 渲染时传入{ name: '张三', count: 5 }，但语言包里绝不放用户数据或时间格式（这些交给Intl）
最易被忽略的是动态节点的 lang 同步和插值安全边界——键名没冲突、加载不阻塞、文案不 XSS，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
