最简可维护方案是用data-i18n+json语言包+localstorage持久化；需为所有文本元素添加data-i18n属性，支持嵌套键和属性值扩展，加载时一次fetch、批量更新dom并同步lang属性与localstorage，按钮须用全称、配aria-label且语言与页面一致。
直接结论：别用硬编码替换文本，用 data-i18n + JSON 语言包 + localStorage 持久化，是最小改动、可维护、无障碍友好的方案。
为什么不能只改 innerHTML 或写两个 if 分支？
常见错误是写一个 translateText() 函数，靠判断当前文字是“Hello”还是“你好”来回切换。这种做法在真实项目里会迅速崩坏：
- 每加一个新文案就要手动改 JS，漏一处就显示错语言
- 按钮、
title、alt、placeholder全得单独处理，无法统一 - 用户刷新页面后回到默认语言，体验断裂
- 屏幕阅读器读的是
lang属性，但界面上文字没同步更新，语义和内容脱节
data-i18n 属性怎么用才不踩坑？
这是最轻量、零依赖的绑定方式，关键在于标记准确、更新粒度可控：
- 所有要翻译的元素必须带
data-i18n，比如<h1 data-i18n="home.title">首页</h1>，初始文本只是占位，会被覆盖 - 支持嵌套键（如
home.title），方便组织，但 JSON 文件里也得保持相同结构 - 要更新属性值（如
title或placeholder），得额外加data-i18n-title或data-i18n-placeholder，不能只靠data-i18n - IE11 不支持
element.dataset.i18n，得用element.getAttribute('data-i18n')兜底
语言包加载和切换逻辑怎么写？
核心是“一次加载、批量更新”，避免重复请求或整页重绘：
- 语言包建议放在
/langs/zh.json和/langs/en.json，用fetch加载，失败时 fallback 到内存对象 - 切换函数先检查是否已加载目标语言包，没加载再
fetch，避免重复请求 - 更新时遍历所有
[data-i18n]元素，用key.split('.')深层取值，再调用element.textContent = value - 同时更新
document.documentElement.lang（影响字体回退、断字、语音合成），并存入localStorage.setItem('preferred-lang', lang) - 页面加载时优先读
URL参数（如?lang=en），再查localStorage，最后 fallback 到navigator.language?.slice(0,2) || 'en'
按钮本身怎么标才对？
按钮不是装饰，它要被屏幕阅读器正确理解：
- 按钮内文字用
lang标明自身语言，比如中文按钮写<button lang="zh">中文</button> - 必须配
aria-label，且语言和当前页面一致：中文页写aria-label="切换到英语"，英文页写aria-label="Switch to Chinese" - 不要用 “EN”“CN” 这类缩写当按钮文字，
CN不是合法语言码；要用就写全称 + 正确lang - 按钮点击后，除了更新文案，还要同步
document.documentElement.lang，否则辅助技术会误判
真正麻烦的不是切换动作本身，而是语言状态如何与 DOM、存储、可访问性三者严格对齐——漏掉任意一环，用户看到的、听到的、操作的，就可能不是同一套语言体系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
