摘要：

　　国际化是指将页面显示的信息翻译成不同语言，可以根据不同语言开发多个版本，然后根据用户选择的语言显示不同的页面。但是这样需要很高的成本，而且维护起来也很麻烦，一个地方有问题就要修改所有版本。本文主要是分享一种前端国际化解决方法，并且已经应用到自己的项目中。

前端国际化需要将页面HTML、javascript的提示信息、后端返回的信息翻译成对应的语言。如果我们能够将这几个地方的内容提取出来，然后用一个翻译函数，根据不同的参数将内容翻译成不同的语言，这样就达到我们的目的了。

页面国际化：

　　对于标签里的内容国际化，需要我们在页面显示出来之前就做好翻译。使用插件来完成，先到官网下载插件，然后引到自己的项目中。

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 
     
      2     
      
测试
3     
      这是一个测试4 
     

 

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  2  3      4         
      5          6          7      8      9         
     
      10             
      
测试
11             
      这是一个测试12         
     
13         31     32 

 注意：上面的例子需要在服务环境上运行！