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");
});
i18next-页面层语言国际化js框架介绍的更多相关文章
- 借鉴一些关于js框架的东西
八款Js框架介绍及比较,Dojo .Scriptaculous .Prototype .yui-ext .Jquery .Mochikit.mootools .moo.fx,componentartu ...
- Node.js 框架对比之 Express VS Koa
背景 上图是一个典型的采用 Node.js 开发 web 应用的前后端结构,下面介绍一下 Node 服务层在其中的作用以及使用 Node.js 的一些优劣. Node 服务层作用: 请求代理 传统做法 ...
- 【入门篇】前端框架Vue.js知识介绍
一.Vue.js介绍 1.什么是MVVM? MVVM(Model-View-ViewModel)是一种软件架构设计模式,它源于MVC(Model-View-Controller)模式,它是一种思想,一 ...
- golang学习笔记17 爬虫技术路线图，python，java，nodejs，go语言，scrapy主流框架介绍
golang学习笔记17 爬虫技术路线图,python,java,nodejs,go语言,scrapy主流框架介绍 go语言爬虫框架:gocolly/colly,goquery,colly,chrom ...
- 面试简历书写、Flask框架介绍与快速使用、Flask演示登录页面、用户信息页面案例
今日内容概要 面试简历编写 Flask框架介绍与安装 内容详细 1.面试简历编写 # 千万不要几个小时把简历凑出来 几天到一周 # 有没有面试机会,取决于简历写得怎么样 简历写好是第一步 # 投简历的 ...
- 自定义JSP标签实现语言国际化(类似struts text标签)，并同时支持图片、JS文件国际化
源代码及样例下载地址: http://download.csdn.net/detail/u014569459/7169385 一.功能说明: 1. 支持语言国际化 2. 支持图片文件.JS文件国际化 ...
- 【FIORI系列】SAP OpenUI5 (SAPUI5) js框架简单介绍
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FIORI系列]SAP OpenUI5 (SA ...
- 深入浅出node.js游戏服务器开发1——基础架构与框架介绍
2013年04月19日 14:09:37 MJiao 阅读数:4614 深入浅出node.js游戏服务器开发1——基础架构与框架介绍 游戏服务器概述 没开发过游戏的人会觉得游戏服务器是很神秘的 ...
- vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)
第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...
随机推荐
- C# 创建线程的简单方式：异步委托 .
定义一个委托调用的方法:TakesAWhile //定义委托要引用的方法 private static int TakesAWhile(int data, int ms) { Console.Writ ...
- 智能 RPC框架 (C++)
RPC中文叫远程函数调用,它是一种通信方式,只是看起来像普通的函数调用. 它包括三个基本要素: 1:服务端注册相应的(服务)函数(用于调用方调用) 2:调用方通过函数调用的方式将一些信息和参数打包到消 ...
- 【鬼脸原创】github搭建动态网站
a{ color:blue; font-weight:bold; } #cnblogs_post_body ol li { list-style-type: cjk-ideographic; } p[ ...
- 【Android 界面效果22】Android的Tab与TabHost
Tab与TabHost 这就是Tab,而盛放Tab的容器就是TabHost 如何实现?? 每一个Tab还对应了一个布局,这个就有点好玩了.一个Activity,对应了多个功能布局. ①新建一个Tab项 ...
- Android小项目之十 应用程序更新的签名问题
------- 源自梦想.永远是你IT事业的好友.只是勇敢地说出我学到! ---------- 按惯例,写在前面的:可能在学习Android的过程中,大家会和我一样,学习过大量的基础知识,很多的知识点 ...
- cat命令的作用
1.显示文件内容,如more的功能. 使用方法: cat filename. 注:cat,无论文件多长,一次性全部显示:more,一次只显示一个屏幕高度的内容. 2.创建文件,如touch功能. 使 ...
- 关于TransactionScope出错：“与基础事务管理器的通信失败”的解决方法总结
遇到此问题先需确认几个问题: 1)MS DTC是否设置正确? 2)是否启用了防火墙?是否对DTC做了例外? 3)是否做了hosts映射?是否跨网域通信? 开发分布式事务,碰到一个错误“与基础事务管理器 ...
- JVM 运行时内存结构
1.JVM内存模型 JVM运行时内存=共享内存区+线程内存区 1).共享内存区 共享内存区=持久带+堆 持久带=方法区+其他 堆=Old Space ...
- XE5 Android 开发数据访问手机端 解决乱码的办法
经过测试,将sqlserver里的字段由varchar 或者char 改为 nvarchar 或者nchar 然后在手机端的clientdataset 增加字段的时候数据类型选择widestrin ...
- hdu 3111 DLX解数独
思路:裸的DLX解数独.关键是建图,感觉还不如写个dfs直接,DLX写这个的代码很烦. #include<set> #include<map> #include<cmat ...