首页 > 代码库 > 前端国际化
前端国际化
摘要：
国际化是指将页面显示的信息翻译成不同语言，可以根据不同语言开发多个版本，然后根据用户选择的语言显示不同的页面。但是这样需要很高的成本，而且维护起来也很麻烦，一个地方有问题就要修改所有版本。本文主要是分享一种前端国际化解决方法，并且已经应用到自己的项目中。
前端国际化需要将页面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, //是否将语言包存储在localstorage12 localStorageExpirationTime: 86400000 // 有效周期，单位ms。默认1周13 });14 return deferred;15 }
对应页面内容加上data-i18n属性，如下：
1 <div class="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 : ‘chopper-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, //是否将语言包存储在localstorage25 localStorageExpirationTime: 86400000 // 有效周期，单位ms。默认1周26 });27 return deferred;28 }29 localize(‘en-US‘).done(function(){ $(‘div.content‘).i18n();});30 </script>31 </body>32 </html>
注意：上面的例子需要在服务环境上运行！
前端国际化