lang-i18n-loader
v0.1.9
Published
javascript i18n loader, combined with vue and other frameworks, configuring the txt file language package.
Downloads
18
Maintainers
Readme
前端多语言(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字段说明
|属性名| 必填项 |类型|说明| |:----- |:----- |:-----|----- | |path | 否 |str | 语言包路径,默认是空 '' | |version | 否 |str | 需要按照版本规则写,格式:1.1.12 | |cacheKey | 否 |str | 如果需要缓存,必须填入一个唯一的key,一般是需求相关名 | |urlLangKey | 否 |str | url中不一定限定lang字段指定,可以通过这个指定url中的字段。默认是lang | |dataType | 否 |str | json,js,txt 默认是json | |name | 是 |object/array | name字段可以填地区码,当字段和其值相同,可以写成数组形式。['en', 'th', 'ko'] | |callback | 是 |fn | data为返回的值 |
设置语言
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