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");
    });
  • 相关阅读:
    寒江独钓(0):内核开发上机指导
    异常:Hibernate数据库恢复错误
    天书夜读:从汇编语言到Windows内核编程笔记(4)
    企业WEBGIS网站解决方案
    如何使用国际开源项目构建一个完整的GIS(地理信息)应用系统
    将指定文件夹下的所有文件copy到目标文件夹下
    一些jquery的小知识
    压缩指定目录下指定文件(包括子目录下的文件)
    解压一个rar文件
    关于下载txt文本文挡的问题
  • 原文地址:https://www.cnblogs.com/cssfirefly/p/4792346.html
Copyright © 2011-2022 走看看