jquery与i18next实现国际化

1 基本介绍

jquery与i18next配合基于json数据格式实现国际化，而jquery与jquery.i18n.properties配合基于键值对数据格式实现国际化。
个人推荐使用i18next实现国际化，它有较详细的开发文档，并且是基于json的数据格式。
I18next的官网：https://www.i18next.com/
注意：（1）一定要注意jquery的版本和i18next的版本问题。
（2）resGetPath:'./js/language/locales/__lng__/__ns__.json’代表的意思是“./js/language/locales/en/translation.json”或者“./js/language/locales/zh/translation.json”。
下图是本文的i18next整体配置结构，也可从github上下载：https://github.com/MasonYyp/jquery_i18next.git

2 源代码及实现

2.1 结果截图
 

2.2 js源代码

main()

function main(){
    test();
}

function test(){
    $("#en").click(function(){
        update_en_language();
    });
    
    $("#zh").click(function(){
        update_zh_language();
    })
}

function update_en_language(){
    $.i18n.init({
        lng: 'en',
        resGetPath : './js/language/locales/__lng__/__ns__.json'
    }, function(err, t){
        $("#henu").text($.i18n.t('message'))
    });
}

function update_zh_language(){
    $.i18n.init({
        lng: 'zh',
        resGetPath : './js/language/locales/__lng__/__ns__.json'
    }, function(err, t){
        $("#henu").text($.i18n.t('message'))
    });
}

2.3 html源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        
        <script type="text/javascript" src="js/libs/jquery-1.9.0.min.js"></script>
        <script type="text/javascript" src="js/libs/i18next-1.6.3.min.js"></script>
        
        <script type="text/javascript" src="js/language/configure_i8n.js"></script>
    </head>
    <body>
        <button id="zh">中文</button>
        <button id="en">English</button>
        <div id="henu">河南大学</div>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>