正文

i18next-页面层语言国际化js框架介绍

IP云
IP云V管理员/8 阅读
11/29
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

因为工作需要，最近研究了下网站语言国际化的问题，根据当前项目架构，寻求一种较好的解决方案。
首先总结下项目中语言切换实现方式大概有以下几种：

1，一种语言一套页面，如：index_CN.html，index_TN.html，index_EN.html
根据用户当前使用语言来展示对应的页面。
这种方式比较常用，也比较理想，性能不错，但是开发使用的时间就多，每个页面要多做几遍。

2，后台定义变量，根据当前语言返回对应语言信息
这种方式不好使，麻烦，页面所有静态显示文本处都需要定义变量，从后台读取。
后台变量的定义可以根据语言分不同的属性文件，如message_cn.properties，message_tn.properties，message_en.properties
注：这种方式不适应处理页面静态文本，但是可以结合第1种方式，这里专门处理页面动态的信息提示。

3，js定义语言变量，全文替换，如： 

    var dbi = document.body.innerHTML;

    var TOLAN = eval(LAN);

    for(var n=0;n<CN.length;n++){

        dbi=  dbi.replace(eval("/"+CN[n]+"/g"), TOLAN[n]);

    }

    document.body.innerHTML = dbi;

这种方式不推荐使用，处理性能低下，如果页面有事件绑定等内容，还会导致很多问题。

4，采用i18next页面层框架，js框架地址：http://i18next.com/；
i18next的原理是根据标签里声明的变量，绑定语言资源文件内容，再呈现结果页面。

page source: 

<!DOCTYPE html>

<html>

  <head>

    <script type="text/javascript" src="[PATH]/jquery.js"></script>

    <script type="text/javascript" src="[PATH]/i18next.js"></script>

  </head>

  <body>

    <ul class="nav">

      <li><a href="#" data-i18n="nav.home"></a></li>

      <li><a href="#" data-i18n="nav.page1"></a></li>

      <li><a href="#" data-i18n="nav.page2"></a></li>

    </ul>

  </body>

</html>

loaded resource file (locales/en/translation.json): 

{

"app":

    {

        "name": "i18next"

    },

"nav":

    {

        "home": "Home",

        "page1": "Page One",

        "page2": "Page Two"

    }

}

javascript code: 

i18n.init(function(err, t) {

  // translate nav

  $(".nav").i18n();

  // programatical access

  var appName = t("app.name");

});

相关阅读

目录[+]