i18next-页面层语言国际化js框架介绍
2015-09-08 17:18
531 查看
因为工作需要,最近研究了下网站语言国际化的问题,根据当前项目架构,寻求一种较好的解决方案。
首先总结下项目中语言切换实现方式大概有以下几种:
1,一种语言一套页面,如:index_CN.html,index_TN.html,index_EN.html
根据用户当前使用语言来展示对应的页面。
这种方式比较常用,也比较理想,性能不错,但是开发使用的时间就多,每个页面要多做几遍。
2,后台定义变量,根据当前语言返回对应语言信息
这种方式不好使,麻烦,页面所有静态显示文本处都需要定义变量,从后台读取。
后台变量的定义可以根据语言分不同的属性文件,如message_cn.properties,message_tn.properties,message_en.properties
注:这种方式不适应处理页面静态文本,但是可以结合第1种方式,这里专门处理页面动态的信息提示。
3,js定义语言变量,全文替换,如:
这种方式不推荐使用,处理性能低下,如果页面有事件绑定等内容,还会导致很多问题。
4,采用i18next页面层框架,js框架地址:http://i18next.com/;
i18next的原理是根据标签里声明的变量,绑定语言资源文件内容,再呈现结果页面。
page source:
loaded resource file (locales/en/translation.json):
javascript code:
首先总结下项目中语言切换实现方式大概有以下几种:
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 +"/g"), TOLAN ); } 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"); });
相关文章推荐
- fastjson生成和解析json数据
- javascript中加法操作符与减法操作符在字符串与数字相加时的区别
- JavaScript总结(一)
- js中变量的作用域
- HtmlUnit解析document时js不能拿到body对象问题解决
- JS获取当前对象大小以及屏幕分辨率等
- 计算器的实现javaScripte
- 原生JS写toggleclass方法
- href="javascript:void(0)"
- 收集的很棒的JS,JQ代码
- js中的刷新页面
- javascript中执行类型的转换规则
- JS屏蔽页面某些按键的响应
- JSON解析例子
- JS中如何实现button响应的切换?
- ExtJs的事件机制Event
- Extjs继承机制和窗体创建
- Ext JS框架入门
- JS中生成与解析JSON
- js ==与===区别(两个等号与三个等号)