0.1.9 • Published 5 years ago

lang-i18n-loader v0.1.9

Weekly downloads
5
License
ISC
Repository
github
Last release
5 years ago

前端多语言(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字段说明

属性名必填项类型说明
pathstr语言包路径,默认是空 ''
versionstr需要按照版本规则写,格式:1.1.12
cacheKeystr如果需要缓存,必须填入一个唯一的key,一般是需求相关名
urlLangKeystrurl中不一定限定lang字段指定,可以通过这个指定url中的字段。默认是lang
dataTypestrjson,js,txt 默认是json
nameobject/arrayname字段可以填地区码,当字段和其值相同,可以写成数组形式。['en', 'th', 'ko']
callbackfndata为返回的值

设置语言

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

0.1.9

5 years ago

0.1.8

5 years ago

0.1.7

5 years ago

0.1.6

5 years ago

0.1.5

5 years ago

0.1.4

6 years ago

0.1.3

6 years ago

0.1.2

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago

0.0.9

6 years ago

0.0.8

6 years ago

0.0.7

6 years ago

0.0.6

6 years ago

0.0.5

6 years ago

0.0.4

6 years ago

0.0.3

6 years ago

0.0.2

6 years ago