lang-i18n-loader

前端多语言（json文件）加载器

npm安装

• npm install lang-i18n-loader --save

启动demo

• npm run test

访问控制台输出的地址，开2个tab观察

使用示例

<script src="/assets/js/vue.min.js"></script>
<script src="https://xxxx/js/lang-loader.js"></script>
<script>
var vue_app_body = new Vue({
    el: '#bigo_lang_e',
    data: {
        langContent:{
        }
    }
});

// 这样本地调试，记得把lib/lang-loader.js最后2行的模块导出代码注释掉
var multiLang = new LangLoader() 
//2：import multiLang from 'lang-i18n-loader';

multiLang.init({
    path: 'css/',
    version: "1.1.2",
    urlLangKey: "country",
    cacheKey: "act_index",
    dataType: "json",
    name: ['en','cn','ar','es','id','hi','ja','ko','ms','pt','ru','th','tw','vi'],
    callback: function(data){
        // 用普通函数写法不用箭头函数，可通过this访问该实例
        vue_app_body.langContent = data;
    }
});

// 本质上，init传入的初始化参数，也是merg给了实例的opts属性。所以你可以如下写法，看起来略显舒服。
multiLang.opts = {
    path: 'css/',
    version: "1.1.2",
    urlLangKey: "country",
    cacheKey: "act_index",
    dataType: "json",
    name: ['en','cn','ar','es','id','hi','ja','ko','ms','pt','ru','th','tw','vi'],
    callback: function(data){
        // 用普通函数写法不用箭头函数，可通过this访问该实例
        vue_app_body.langContent = data;
    }
}
multiLang.init()
// 现有的可选语言码有：cn, tw, en, th, vi, ru, id, ko, hi, kh, sg, ar, af, tr, es, ms, pt, ja, ur, de
// cn简体, tw繁体, en英文, th泰语, vi越南, ru俄语, id印尼, ko韩语, hi印地语, sg新加坡, ar阿语, 
// af南非语, tr土耳其语, es西班牙, ms马来语, pt葡萄牙, ja日语, ur乌都语, de德语
</script>

init字段说明

设置语言

1，multiLang.setLang(langname, fn)。第二个是可选的回调函数。可能同步也可能异步调起。之所以需要这个选项，是希望设置语言的那个tab加载完（有缓存则同步，无缓存则异步）语言包后（此时也做了缓存）再做操作localstorage的动作。以免操作过早，其他tab也立刻去加载语言包，无法利用缓存。

实例multiLang有一个有用的属性info

1，info.langSelectList是一个数组列表。根据你init传入的name字段，返回一个让用户设置的语言列表。第一个是当前正在使用的语言。

2, naviCodeString 浏览器语言码长串，对应短串naviCode，urlCode是url中指定语言码，hashCode是hash指定的语言码，hostCode本域设定语言码。 langCode是当前使用语言码。

注意：

1，某个tab设置了语言后，会触发全域下引入加载器的tab也“尝试加载你设置的语言”。注意，全域下可能不仅仅只有你这个需求。其他tab的加载在当前tab加载后（已设定缓存）再加载，此时你浏览器的network是查不到记录的，是从缓存中取得。

2，当某个tab刷新后，发现version升高了，会触发更新并缓存，然后也会触发全域下，同cacheKey的tab去加载。

3，目前限定了最多缓存列表长度为10个。

4，如果url或者hash中有参数指定了语言，指定的语言不是设置，它只是一种临时访问。对应的语言包会缓存，但不会导致其他未指定语言的tab更新，也不会影响“全域设置”。

5，js格式不缓存。

0.1.4 应土耳其地区运营要求，修改土耳其语言选项的翻译 改为Türkçe