前端国际化
2015-08-12 13:54
281 查看
摘要:
国际化是指将页面显示的信息翻译成不同语言,可以根据不同语言开发多个版本,然后根据用户选择的语言显示不同的页面。但是这样需要很高的成本,而且维护起来也很麻烦,一个地方有问题就要修改所有版本。本文主要是分享一种前端国际化解决方法,并且已经应用到自己的项目中。前端国际化需要将页面HTML、javascript的提示信息、后端返回的信息翻译成对应的语言。如果我们能够将这几个地方的内容提取出来,然后用一个翻译函数,根据不同的参数将内容翻译成不同的语言,这样就达到我们的目的了。
页面国际化:
对于标签里的内容国际化,需要我们在页面显示出来之前就做好翻译。使用i18n插件来完成,先到官网下载插件,然后引到自己的项目中。1 function localize(lng){ 2 var deferred = $.i18n.init({ 3 lng : lng || 'zh-CN', //翻译成的语言 4 load : 'current', //加载当前设置的语言包 5 getAsync : false, //是否异步调用语言包 6 cookieName : 'i18n', //cookie的名称 7 preload : ['zh-CN', 'en-US'], //预加载语言包 8 fallbackLng : ['zh-CN', 'en-US'], //如果没有设置,则默认为“开发”。如果打开,所有丢失的键/值将被翻译成该语言。 9 resGetPath : '/locale/__lng__/__ns__.json', // 加载资源的路径 10 ns: { namespaces: ['test'], defaultNs: 'test'}, //加载的语言包 11 useLocalStorage : false, //是否将语言包存储在localstorage 12 localStorageExpirationTime: 86400000 // 有效周期,单位ms。默认1周 13 }); 14 return deferred; 15 }
对应页面内容加上data-i18n属性,如下:
1 <div clas 4000 s="content"> 2 <h2 data-i18n="test.title">测试</h2> 3 <span data-i18n="test.content">这是一个测试</span> 4 </div>
en-US/test.json
1 { 2 "test": { 3 "title": "test", 4 "content": "this is a test" 5 } 6 }
zh-CN/test.json
1 { 2 "test": { 3 "title": "测试", 4 "content": "这是一个测试" 5 } 6 }
对应js
1 localize().done(function(){ $('div.content').i18n();});
javascript文件和后台返回信息的国际化:
我们只需要将内容信息提取到一个JSON或者js文件,然后将其转换成英文,如下:i18n.message = {
"success" : "成功",
"fail" : "失败"
};
然后在js文件中,直接替换"成功"-->i18n.message.success,也可以定义一个通用函数来做翻译
1 locale.curryGetMsg = function(ns, cl){ 2 return (cl = chopper.locale)[ns] ? 3 function(msg){ 4 return cl[ns][msg] || cl.action[msg] || cl.common[msg] || cl.message[msg] || msg; 5 } : 6 function(msg){ 7 return cl.action[msg] || cl.common[msg] || cl.message[msg] || msg; 8 }; 9 };
在项目中只需要调用这个函数,如下:
1 var test = locale.curryGetMsg("module");// module为对应的模块 2 3 test.("success");
下面是一个i18n例子:
文件结构为i18n-->
index.html
i18next-latest.js
locale-->
en-US-->
test.json
zh-CN-->
test.json
代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 5 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 6 <script src="./i18next-latest.js"></script> 7 </head> 8 <body> 9 <div class="content"> 10 <h2 data-i18n="test.title">测试</h2> 11 <span data-i18n="test.content">这是一个测试</span> 12 </div> 13 <script> 14 function localize(lng){ 15 var deferred = $.i18n.init({ 16 lng : lng || 'zh-CN', //翻译成的语言 17 load : 'current', //加载当前设置的语言包 18 getAsync : false, //是否异步调用语言包 19 cookieName : 'i18n', //cookie的名称 20 preload : ['zh-CN', 'en-US'], //预加载语言包 21 fallbackLng : ['zh-CN', 'en-US'], //如果没有设置,则默认为“开发”。如果打开,所有丢失的键/值将被翻译成该语言。 22 resGetPath : './locale/__lng__/__ns__.json', // 加载资源的路径 23 ns: { namespaces: ['test'], defaultNs: 'test'}, //加载的语言包 24 useLocalStorage : false, //是否将语言包存储在localstorage 25 localStorageExpirationTime: 86400000 // 有效周期,单位ms。默认1周 26 }); 27 return deferred; 28 } 29 localize('en-US').done(function(){ $('div.content').i18n();}); 30 </script> 31 </body> 32 </html>
注意:上面的例子需要在服务环境上运行!
相关文章推荐
- html页面的CSS、DIV命名规则
- 设置html页面不被浏览器缓存
- html实体转换
- CSS浮动(float,clear)通俗讲解
- jQuery中的.bind()、.live()和.delegate()之间区别分析
- 剑指offer 04_替换字符串中的空格
- jquery delegate
- CSS Hack
- 原生js获取元素样式
- jstl记录
- js 点击按钮跳转 window.location.href
- 常用CSS样式属性|CSS样式表
- CSS3给页面打标签
- css中position的理解
- 突破Javascript长度验证及Mysql错误回显套公式法注入
- 具有动态效果的响应式设计
- 使用CSS来设置SVG中Use元素的样式
- 从一行代码里面学点JavaScript
- 利用promise写出更加优美的nodejs程序
- 在 Node.js 中用 Q 实现 Promise – Callback 之外的另一种选择