i18next实现页面国际化

最近做的项目需要进行页面国际化，根据用户选择的语言，进行不同语言下的页面展示。jQuery 配合使用 i18next，i18next是一个用 JavaScript 编写的国际化框架，提供了标准的 i18n 功能，并且支持各端应用。

引入i18next.min.js包

语言包放在/locals/下，比如中文简体：/locals/zh_CN/translation.json
i18next.min.js是框架源码
language.js是在选择语言时的处理，将语言存起来，以供其它页面获取语言并展示

给标签添加自定义属性

<select name="language" id="language">
  <option value="zh_CN" checked data-i18n="zh"></option>
  <option value="en_US" data-i18n="en"></option>
</select>
<label for="username" data-i18n="username"></label>
<input type="text" id="username" data-i18n="[placeholder]inputuser" placeholder="">
<label for="key" data-i18n="key"></label>
<input type="text" id="key" data-i18n="[placeholder]inputpwd" placeholder="">
<button id="loginBtn" data-i18n="login"></button>

准备语言包

{
  "zh": "中文",
  "en": "English",
  "loginPage": "登录页面",
  "username": "用户名",
  "key": "密码",
  "inputuser": "请输入用户名",
  "inputpwd": "请输入密码",
  "login": "登录",
  "inLogin": "登录中",
  "loginError": "登录失败，还剩 __count__ 次机会"
}

获取语言并加载

// in language.js
var lang = $("select[name='language']").val();
$.i18n.init({
  fallbackLng: ["zh_CN"], //设置缺失备用语言，若要加载的语言某个键值缺失，则用fallbackLng来代替；false为不使用该缺省补全机制。
  resGetPath: "./js/i18n/locales/__lng__/__ns__.json", //设置加载语言包的路径
  lng: lang
}, function (err, t) {
  $("[data-i18n]").i18n();
});
// localStorage存储用户设置的语言
var storage = window.localStorage;
storage.setItem("language", lang);

由于项目中多个页面，非语言选择页面通过获取 localStorage 存储的语言，来进行页面展示

function setLanguage() {
  // 获取浏览器语言
  var lang = window.navigator.language;
  if (lang == "zh" || lang == "zh-CN") {
	lang = "zh_CN";
  }
  // 获取用户设置的语言
  var storage = window.localStorage;
  lang = storage.getItem("language") ? storage.getItem("language") : lang;
  $.i18n.init({
	fallbackLng: ["zh_CN"], //设置缺失备用语言，若要加载的语言存在某个键值缺失，则用fallbackLng来代替；false为不使用该缺省补全机制。
	resGetPath: "/js/i18n/locales/__lng__/__ns__.json", //设置加载语言包的路径
	lng: lang
  }, function (err, t) {
	$("[data-i18n]").i18n();	// 通过属性选择器匹配所有需要翻译的元素，使用 i18n() 方法翻译
	$("#loginBtn").text($.t("inLogin"));	// 获取语言包内单个变量
	$("#loginBtn").text($.t("loginError", {count: 3}));	// 获取语言包内单个变量，并修改内部变量值
  });
}