zoukankan      html  css  js  c++  java
  • i18next-页面层语言国际化js框架介绍

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


    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");
    });
  • 相关阅读:
    变形金刚2中的各个角色,及车型(带图)第二篇。
    文字效果。这个比较好!
    发一个非常简单的效果,是在浏览器里面上下左右都居中的问题
    等高的css效果,很少见,原来都是用js 的,这回也有css的了,哈哈
    ie6最小宽度问题
    变形金刚2中的各个角色,及车型(带图)第一篇。
    差点吓死我,擦
    单车Eason
    学习了下简单的光照模型
    自我介绍
  • 原文地址:https://www.cnblogs.com/cssfirefly/p/4792346.html
Copyright © 2011-2022 走看看