前端国际化
摘要：
国际化是指将页面显示的信息翻译成不同语言，可以根据不同语言开发多个版本，然后根据用户选择的语言显示不同的页面。但是这样需要很高的成本，而且维护起来也很麻烦，一个地方有问题就要修改所有版本。本文主要是分享一种前端国际化解决方法，并且已经应用到自己的项目中。
前端国际化需要将页面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 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 : '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>
注意：上面的例子需要在服务环境上运行！
