摘要

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

前端国际化一直是一个大问题，作为一个互联网化下的网站，很多访问者都会访问不同的语言的网页，这时候，前端页面能够根据访问者的语言爱好自动翻译成对应的语言，是一个很重要的举动；但是这个投入成本非常大，前端的国际化一直是一个大问题，本文呢就这个前端国际化的问题讲解如何使用i18n来解决这个前端国际化的问题。

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

页面国际化：

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

function localize(lng){
    var deferred = $.i18n.init({
        lng         : lng || 'zh-CN',      //翻译成的语言
        load        : 'current',           //加载当前设置的语言包
        getAsync    : false,               //是否异步调用语言包
        cookieName  : 'i18n',              //cookie的名称
        preload     : ['zh-CN', 'en-US'],  //预加载语言包
        fallbackLng : ['zh-CN', 'en-US'],  //如果没有设置，则默认为“开发”。如果打开，所有丢失的键/值将被翻译成该语言。
        resGetPath  : '/locale/__lng__/__ns__.json',                          // 加载资源的路径
        ns: { namespaces: ['test'], defaultNs: 'test'},                       //加载的语言包
        useLocalStorage : false,                                              //是否将语言包存储在localstorage
        localStorageExpirationTime: 86400000                                  // 有效周期，单位ms。默认1周
    });
    return deferred;
}

对应页面内容加上data-i18n属性，如下：

<div class="content">
    <h2 data-i18n="test.title">测试</h2>
    <span data-i18n="test.content">这是一个测试</span>
</div>

en-US/test.json

{
     "test": {
         "title": "test",
         "content": "this is a test"
     }
}

对应js

localize().done(function(){ $('div.content').i18n();});

javascript文件和后台返回信息的国际化：

我们只需要将内容信息提取到一个JSON或者js文件，然后将其转换成英文，如下：

i18n.message = {
    "success" : "成功",
    "fail" : "失败"
};

然后在js文件中，直接替换"成功"-->i18n.message.success，也可以定义一个通用函数来做翻译

locale.curryGetMsg = function(ns, cl){
    return (cl = chopper.locale)[ns] ?
    function(msg){
        return cl[ns][msg] || cl.action[msg] || cl.common[msg] || cl.message[msg] || msg;
    } :
    function(msg){
        return cl.action[msg] || cl.common[msg] || cl.message[msg] || msg;
    };
};

在项目中只需要调用这个函数，如下：

 var test = locale.curryGetMsg("module");// module为对应的模块
 test.("success");

下面是一个i18n例子：

文件结构为

i18n-->
        index.html
        i18next-latest.js
        locale-->
                en-US-->
                        test.json
                zh-CN-->
                        test.json

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="./i18next-latest.js"></script>
    </head>
    <body>
        <div class="content">
            <h2 data-i18n="test.title">测试</h2>
            <span data-i18n="test.content">这是一个测试</span>
        </div>
        <script>
        function localize(lng){
            var deferred = $.i18n.init({
                lng         : lng || 'zh-CN',      //翻译成的语言
                load        : 'current',           //加载当前设置的语言包
                getAsync    : false,               //是否异步调用语言包
                cookieName  : 'i18n',      //cookie的名称
                preload     : ['zh-CN', 'en-US'],  //预加载语言包
                fallbackLng : ['zh-CN', 'en-US'],  //如果没有设置，则默认为“开发”。如果打开，所有丢失的键/值将被翻译成该语言。
                resGetPath  : './locale/__lng__/__ns__.json', // 加载资源的路径
                ns: { namespaces: ['test'], defaultNs: 'test'},             //加载的语言包
                useLocalStorage : false,                                              //是否将语言包存储在localstorage
                localStorageExpirationTime: 86400000                                  // 有效周期，单位ms。默认1周
            });
            return deferred;
        }
        localize('en-US').done(function(){ $('div.content').i18n();});
        </script>
    </body>
</html>

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

分类默认分组

字数 3610

前端页面国际化开发实例

摘要

页面国际化：

javascript文件和后台返回信息的国际化：

评论