jquery i18next 使用详解

i18next是一个用来支持应用国际化的javascript库，可以实现前台国际化。
1.引入js

<script type="text/javascript" src="js/jquery-1.11.3.min.js" > script>
<script type="text/javascript" src="js/i18next-1.11.2.min.js" >script>

2.json文件配置
json文件目录如下图所示：

其中/locales/en-US/translation.json文件的内容如下：

{  
    "nav" :{  
        "home":"Home",  
        "page1" :"PageOne",  
        "page2" : "PageTwo",  
        "button" : "Search",  
        "input" : "Input your name"  
    }  
}

/locales/zh-CN/translation.json内容如下：

{  
    "nav" :{  
        "home":"主页",  
        "page1" :"第一页",  
        "page2" : "第二页",  
        "button" : "搜索",  
        "input" : "填入姓名"  
    }  
}

message.json的内容如下：

{
    "app": {
        "child": "__count__ child",
        "child_plural": "__count__ children"
   }
}

3.html代码内容

<ul class="nav">
    <li><a href="#" data-i18n="nav.home">a>li>
    <li><a href="#" data-i18n="nav.page1">a>li>
    <li><a href="#" data-i18n="nav.page2">a>li>
    <input data-i18n="[value]nav.button" type="button" value="查询" id="" />   
    <input type="text" name="" id="" data-i18n="[placeholder]nav.input"  placeholder="请输入名称"/> 
ul>

4.初始化i18next

$.i18n.init({
        lng : 'en-US', //指定语言
        resGetPath : 'locales/__lng__/__ns__.json', 
        ns: { 
             namespaces: ['translation','message'],
             defaultNs: 'translation'   //默认使用的，不指定namespace时
         }
    },function(err, t){
        $('[data-i18n]').i18n(); // 通过选择器集体翻译
        var temp = $.t("nav.home"); //通过t函数获得某个翻译的值

        $.t("message:app.child",{count :'1'}); //使用namespace，并将count替换成1，其值为1 child
        $.t("message:app.child_plural",{count : '2'});  //将count替换成2，其值为2 children
});

初始化方法参数介绍

• lng : ‘zh-CN’ 设置当前翻译的语言(如果没有设置具体的lng,会查看querrustringparameter中是否有?setLng=zh-CN的设置、会检查cookie中是否有i18n曾设置的语言、或检查浏览器语言)
• detectLngQS : ‘lang’ 设置查询参数的名称，对应上一条的话变成?lang=zh-CN；同理，还可以更改cookieName, 如cookieName:’lang’
  useCookie:false设置是否使用cookie，若不使用，当未设置lng参数时，也不会从cookie中查找。
• preload:[‘zh-CN’,’en-US’] 预加载某个语言包
• lngWhitelist:[‘zh-CN’,’en-US’]只能加载特定的几种语言
• fallbackLng:false|[‘en’]设置缺失备用语言，若要加载的语言存在某个键值缺失，则 用fallbackLng来代替；false为不使用该缺省补全机制。
• useLocalStorage:true|false,localStorageExpirationTime:86400000 // in ms,default 1 week默认情况下是不开启caching的，可根据实际需要开启，直到localStorage中曾缓存的语言过期，新的语言才会被加载。改设置localStorage中缓存的是整个语言包，也就是language.json文件中的内容，对应每一个加载的语言包，都会产生一个localStorage存储项。
• debug:true开启debug模式
• resGetPath:'locales/__lng__/__ns__.json，resGetPath:'locales/__ns__-__lng__.json设置加载语言包的路径，对应上述两种模式，路径示例如下：locales/en_US/translation.json|locales/translation-en-US.json
• getAsync:false设置是否异步加载,false为同步。
• ns:指定命名空间
  还有更多参数详见官网文档 https://www.i18next.com/overview/configuration-options
  5.显示结果
  初始化中指定lng : 'en-US'，显示英文效果，如下图所示：
  
  将其改成 lng : 'zh-CN'，则显示为中文，效果如图所示：
  
  >>下载源码及i18next.js