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

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

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

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

  1.     var dbi = document.body.innerHTML;
  2.     var TOLAN = eval(LAN);
  3.     for(var n=0;n<CN.length;n++){
  4.         dbi=  dbi.replace(eval("/"+CN[n]+"/g"), TOLAN[n]);
  5.     }
  6.     document.body.innerHTML = dbi;

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

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

page source:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <script type="text/javascript" src="[PATH]/jquery.js"></script>
  5.     <script type="text/javascript" src="[PATH]/i18next.js"></script>
  6.   </head>
  7.   <body>
  8.     <ul class="nav">
  9.       <li><a href="#" data-i18n="nav.home"></a></li>
  10.       <li><a href="#" data-i18n="nav.page1"></a></li>
  11.       <li><a href="#" data-i18n="nav.page2"></a></li>
  12.     </ul>
  13.   </body>
  14. </html>

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

  1. {
  2. "app":
  3.     {
  4.         "name": "i18next"
  5.     },
  6. "nav":
  7.     {
  8.         "home": "Home",
  9.         "page1": "Page One",
  10.         "page2": "Page Two"
  11.     }
  12. }

javascript code:

  1. i18n.init(function(err, t) {
  2.   // translate nav
  3.   $(".nav").i18n();
  4.  
  5.   // programatical access
  6.   var appName = t("app.name");
  7. });

i18next-页面层语言国际化js框架介绍的更多相关文章

  1. 借鉴一些关于js框架的东西

    八款Js框架介绍及比较,Dojo .Scriptaculous .Prototype .yui-ext .Jquery .Mochikit.mootools .moo.fx,componentartu ...

  2. Node.js 框架对比之 Express VS Koa

    背景 上图是一个典型的采用 Node.js 开发 web 应用的前后端结构,下面介绍一下 Node 服务层在其中的作用以及使用 Node.js 的一些优劣. Node 服务层作用: 请求代理 传统做法 ...

  3. 【入门篇】前端框架Vue.js知识介绍

    一.Vue.js介绍 1.什么是MVVM? MVVM(Model-View-ViewModel)是一种软件架构设计模式,它源于MVC(Model-View-Controller)模式,它是一种思想,一 ...

  4. golang学习笔记17 爬虫技术路线图，python，java，nodejs，go语言，scrapy主流框架介绍

    golang学习笔记17 爬虫技术路线图,python,java,nodejs,go语言,scrapy主流框架介绍 go语言爬虫框架:gocolly/colly,goquery,colly,chrom ...

  5. 面试简历书写、Flask框架介绍与快速使用、Flask演示登录页面、用户信息页面案例

    今日内容概要 面试简历编写 Flask框架介绍与安装 内容详细 1.面试简历编写 # 千万不要几个小时把简历凑出来 几天到一周 # 有没有面试机会,取决于简历写得怎么样 简历写好是第一步 # 投简历的 ...

  6. 自定义JSP标签实现语言国际化(类似struts text标签)，并同时支持图片、JS文件国际化

    源代码及样例下载地址: http://download.csdn.net/detail/u014569459/7169385 一.功能说明: 1. 支持语言国际化 2. 支持图片文件.JS文件国际化 ...

  7. 【FIORI系列】SAP OpenUI5 (SAPUI5) js框架简单介绍

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FIORI系列]SAP OpenUI5 (SA ...

  8. 深入浅出node.js游戏服务器开发1——基础架构与框架介绍

    2013年04月19日 14:09:37 MJiao 阅读数:4614   深入浅出node.js游戏服务器开发1——基础架构与框架介绍   游戏服务器概述 没开发过游戏的人会觉得游戏服务器是很神秘的 ...

  9. vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

    第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...

随机推荐

  1. Mispelling4

    Problem Description Misspelling is an art form that students seem to excel at. Write a program that ...

  2. In-Memory：Hash Index

    SQL Server 2016支持哈希查找,用户可以在内存优化表(Memory-Optimized Table)上创建Hash Index,使用Hash 查找算法,实现数据的极速查找.在使用上,Has ...

  3. iOS开发libWeChatSDK.a(WXApiObject.o)' does not contain bitcode.

    在使用微信分享的时候可能会报错, 报错如下: ld: '/Users/gti/Documents/********/Lib/SDKExport/libWeChatSDK.a(WXApiObject.o ...

  4. springmvc(2)--参数绑定

    一.以实例来看springmvc各种参数绑定方式   先定义个dto类: public class RestInDto implements Serializable { private static ...

  5. 【递归】数字三角形 简单dp

    [递归]数字三角形 题目描述 对于大多数人来说,“我们是这么的正常,因此也就这么的平庸.”而天才总是与众不同的,所以当邪狼问修罗王:“老大,你蹲在那儿一动不动看了有半个小时了,蚂蚁有那么好看吗?” 修 ...

  6. 剑指Offer29 连续子数组最大和

    /************************************************************************* > File Name: 29_Greate ...

  7. hdu 4409 LCA

    思路:就是个比较裸的LCA了,不过要注意的是,如果a和b的公共祖先是a,那么答案就是farther[a]. #include<cstring> #include<cmath> ...

  8. 转：云风skynet服务端框架研究

    转:  http://forthxu.com/blog/skynet.html skynet是云风编写的服务端底层管理框架,底层由C编写,配套lua作为脚本使用,可换python等其他脚本语言.sky ...

  9. 转：YUV RGB 常见视频格式解析

    转: http://www.cnblogs.com/qinjunni/archive/2012/02/23/2364446.html YUV RGB 常见视频格式解析 I420是YUV格式的一种,而Y ...

  10. freeCodeCamp:Missing letters

    从传递进来的字母序列中找到缺失的字母并返回它. 如果所有字母都在序列中,返回 undefined. function fearNotLetter(str) { var arr = str.split( ...