码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2015-09-08 18:33:05      阅读:446      评论:0      收藏:0      [点我收藏+]

标签:

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


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");
});

 

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

标签:

原文地址:http://www.cnblogs.com/cssfirefly/p/4792346.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!