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 条评论
登录 后参与评论

相关文章

来自专栏用户画像

3.1.2覆盖和交换

早期的计算机系统中,主存容量小,虽然主存中仅存放一道用户程序,但是存储空间放不下用户进程的现象也经常发生,这一矛盾可以用覆盖基础来解决。 覆盖的基本思想是:...

10010
来自专栏栗霖积跬步之旅

1.11守护线程

在Java中有两种线程,一种为用户线程,一种为守护线程。 守护线程是一种特殊的线程,它具有“陪伴”的含义,当进程中不存在非守护线程时,则守护线程自动销毁。 典型...

223100
来自专栏逻辑熊猫带你玩Python

Python | “Python太火,我都不敢不把这些告诉你”

之前说过,小编现在使用的环境是ubuntu server 16.04 LTS。默认安装的应用面没有python2.x,由于越来越多的平台弃用python2,所以...

15340
来自专栏java达人

多线程设计模式解读6-single threaded Execution模式(附分布式环境下的操作)

Single Threaded Execution模式主要是用于确保同一时间内只能让一个线程执行处理,说通俗点就是对synchronized的标准化使用方式,这...

12540
来自专栏韩伟的专栏

如何设计一个 RPC 系统

RPC 是一种方便的网络通信编程模型,由于和编程语言的高度结合,大大减少了处理网络数据的复杂度,让代码可读性也有可观的提高。本文就是通过分析几种流行的 RPC ...

10.9K90
来自专栏JackieZheng

AngularJS入门心得2——何为双向数据绑定

  前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯。最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西...

21980
来自专栏Crossin的编程教室

【Python 第74课】多线程

很多人使用 python 编写“爬虫”程序,抓取网上的数据。 举个例子,通过豆瓣的 API 抓取 30 部影片的信息: import urllib, time...

29750
来自专栏Golang语言社区

golang插件化方案

业务线的活动,每一次新活动都做独立项目开发,有大量重复代码,并且浪费数据服务的连接资源;排序服务也许要经常添加业务代码,目前是停服务发布……这些场景为了开发维护...

29430
来自专栏嵌入式程序猿

MQX中断系统深度解析(完)

MQX中断系统深度解析(完) MQX ISR 例程分析 以飞思卡尔KSDK最新版1.2.0 MQX isr例程为例说明,飞思卡尔从KSDK的1.1.0版本起...

32860
来自专栏carven

使用yeoman快速搭建前端项目结构

最近在慕课网上观看@Materliu老师的课程React实战–打造画廊应用, 接触到了新的东西–yeoman。前端工程师可以通过yeoman快速的搭建好一个项目...

11300

扫码关注云+社区

领取腾讯云代金券