1. 什么是 localization.js
localization.js 是一个用于 Web 前端页面多语言国际化的 JavaScript 库，它提供了一种简单的方法来处理多语言字符串。它不依赖于任何第三方库和框架，也不需要手动管理字符串的翻译。
2. 如何安装 localization.js
你可以使用 npm 来安装 localization.js：
npm install localization.js --save
当然，你也可以手动下载 localization.js 文件加入到你的项目中。
3. 如何使用 localization.js
3.1 创建语言文件
localization.js 支持 JSON 和 JavaScript 两种类型的语言文件，你可以根据自己的需求选择使用哪种格式。
下面是一个简单的语言文件示例，名为 zh-CN.json，它包含了中文简体的语言翻译：
{
"title": "欢迎来到我的博客",
"button": "提交"
}3.2 初始化 localization.js
首先，你需要在页面中引入 localization.js 库文件。
<script src="path/to/localization.min.js"></script>
然后，你需要在你的 JavaScript 代码中初始化 localization.js。
var options = {
defaultLang: 'en-US', // 默认语言为英文
basePath: '/language/', // 语言文件存储路径
langs: ['en-US', 'zh-CN'] // 支持的语言列表
};
var localization = new Localization(options);3.3 使用 localization.js
3.3.1 文本替换
现在，我们已经成功初始化了 localization.js，接下来我们就可以开始使用它来翻译我们的页面了。
<h1 data-i18n="title"></h1> <button data-i18n="button"></button>
使用 data-i18n 属性来指定需要翻译的文本，其中的值对应语言文件中的字符串键名。
3.3.2 事件绑定
使用 localization.js 帮助我们绑定事件，可以避免硬编码事件名称，从而使代码更加可读和易于维护。
var el = document.getElementById('button');
localization.bind(el, 'click', function() {
alert(localization.translate('button')); // 弹出当前语言下的"提交"字符串
});3.3.3 设置语言
最后，我们可以使用 setLanguage 方法来设置当前的语言。
localization.setLanguage('zh-CN'); // 切换到中文简体4. 总结
通过以上的介绍，我们已经可以使用 localization.js 来实现前端页面的多语言国际化了。它是一款非常方便的 JavaScript 库，支持多种语言文件格式和事件绑定，能够快速地提高前端开发效率，避免翻译的繁琐工作。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d630d0927023822c50