jQ jquery-i18n-properties 多语言切换 国际化

一直想搞个多语言切换的东西，想的头发都没了。

终于让我看到了一个插件，虽然已经是很久以前的东西了，但是我测试了下，还真鸡儿好用。

github地址: 官网

引入文件，因为是jq的插件，所以在jq文件后面引入：

<script src="https://cdn.jsdelivr.net/gh/jquery-i18n-properties/jquery-i18n-properties/jquery.i18n.properties.min.js"></script>

引入后可以通过jQuery对象调用。

我们先讲一下大概过程再来说调用方法：

首先我们要有语言文件，也就是.properties的文件格式，它你可以理解为就是个对象就行了，但是不用引号包裹string就是了。

我们在项目里面，新建一个用于存储语言文件的文件夹，一般取名为language，和css啊，js，images这些文件夹都是兄弟，当然这个存放的路径你自己可以自由调整，只要待会能被js调用到。

我这里就创建了两个语言文件，一个en英文，一个zh中文，后缀都是.properties。

文件的内容格式如下：

en

title = Test title

zh

title = 测试标题

语言文件里面要包含所有你要进行语言切换的内容，比如你有是个元素要进行语言国际化，那么针对这是个元素，你要都设置一个唯一的key值，然后key值要对应翻译过来的语言。

我这里title为key，后面的内容为不同语言的翻译内容。

然后针对对应的元素设置一个data属性

如：

<strong data-lang="title">标题</strong>

data-lang属性表示要进行国际化语言的元素，后面的值对应语言文件里面的key

然后我们就可以动手了

jQuery.i18n.properties({//加载资浏览器语言对应的资源文件
      name: lang, //资源文件名称
      path: 'language/', //资源文件路径
      language: lang,
      cache: false,
      mode: 'map', //用Map的方式使用资源文件中的值
      callback: function () {//加载成功后设置显示内容
        
      }
    });

其中name属性为你要加载的文件的名字，注意不要带.properties后缀，因为后缀插件会自动加的.

language这个属性一般也就是语言的简写，英文就为en，所以可以和name属性值相同

path为js要加载的语言文件的路径，因为我是根目录下，所以直接就language/。

虽然我的js文件在js/js.js目录下，但是因为是index.html调用，所以路径是从根目录开始。

callback为回调函数，因为插件是ajax加载语言文件，所以本地测试是不行的哦，你需要模拟服务器环境，然后利用回调函数，我们一个个的进行文本替换。

实际代码：

jQuery.i18n.properties({ //加载资浏览器语言对应的资源文件
    name: "en", //资源文件名称
    path: 'language/', //资源文件路径
    language: "en",
    cache: false,
    mode: 'map', //用Map的方式使用资源文件中的值
    callback: function() { //加载成功后设置显示内容
        for (let i in $.i18n.map) {
            $('[data-lang="' + i + '"]').text($.i18n.map[i]);

        }
    }
});

这个函数我们可以自己手动触发，为此，在浏览器首次加载的时候，我们也可以通过判断浏览器的默认语言来进行自动更换语言。

获取浏览器语言

function getDefaultLang() {
    var lang = navigator.language || navigator.userLanguage; //常规浏览器语言和IE浏览器
    lang = lang.substr(0, 2); //截取lang前2位字符
    return lang;
}

剩下的就是用户手动切换了，我们可以使用select元素，然后监听它的change事件，或者其他元素的click事件，只要获取到语言文件名我们再进行ajax获取，再替换就行了。

搞了这么久，这个小心愿总算是完成了。

不过这插件用处也不是很广，一般用于固定内容会多一些，你像博客这些，就有点难了，因为很多东西他都是遍历出来的，没有固定的预设值