npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

multi-lang-js

v1.3.17

Published

javascript multilingual loader, combined with vue and other frameworks, configuring the txt file language package.

Downloads

15

Readme

前端多语言(json文件)加载器

script引入:

  • https://xxxx/js/multi-lang.js

npm安装

  • npm install multi-lang-js --save

使用示例


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

multiLang.init({
    path: 'css/',
    dataType:'json',
    name: {
        'en': 'lang_en.txt',
        'cn': 'lang_cn.txt',
        'tw': 'lang_cn.txt',
        'th': 'lang_th.txt',
        'vn': 'lang_vn.txt',
        'ru': 'lang_ru.txt',
        'ko': 'lang_ko.txt',
        'id': 'lang_id.txt'
    },
    callback: function(data, langName){
        vue_app_body.langContent = data;
        // 第二个参数推荐不再使用,为了兼容而存在。返回的是浏览器语言名。如 cn
        // 如需获取语言相关。请用 this.appLang 等。请看其3个语言相关属性。
    }
});
</script>

对象multiLang,有3个语言相关属性

|属性名|类型|说明| |:----- |:-----|----- | |appLang |str |对象初始化即可获得,如:cn | |appLangString |str |对象初始化即可获得,如:zh-cn | |packageLang |str |init()之后获得,表示加载的语言包。如 vn |

multiLang.init() 初始化参数说明

|参数名|类型|说明| |:----- |:-----|----- | |path |str |翻译文本的相对路径,这里我把所有翻译文本放到css文件夹下 | |dataType |str |值为 txt 或者json。可忽略此参数,默认为json,值为txt时,则返回的是txt文本 | |name |obj |各个语言对应加载的翻译文本,属性名不可改,对应的文本名字可以改 | |callback |fun |回调的第一个参数是加载到的json(或者文本)数据,该函数中this指向new出的对象 |

multiLang.setLang(langname,callback) 设置语言 **如果你觉得multiLang.setLang 使用麻烦,也可以:localStorage.lang=langname,这种写法 ** **注意:设置语言,会让全站语言都立马改动,demo可参考github上的页面。开多个页签试试 **

|参数名|类型|说明| |:----- |:-----|----- | |langname |str |必须设置,你要设置的语言名 | |callback |function |可选的回调函数 |

测试支持 初始化判断何种语言:先查浏览器地址栏参数有lang 参数,其次查 localStorage.lang的值,最后看浏览器语言

所以为了测试预览,你可以在地址后带入参数,lang=en(你想要的语言)。

说明 如果你配置的name中,没有(比如当前埃及用户访问),则尝试使用en(英文),如果英文也没有配置,则使用配置的“第一个”语言包。

1.3.0改动 去除 从localstorage获取语言码的逻辑

1.3.1改动 增加 bn 孟加拉语 ne 尼泊尔语两种 多语言

1.3.2 增加阿语标识ar-er , 增加柬埔寨语的语言选择

1.3.3 增加多语言支持 ['gu', 'gu,gu-in'], // 古吉拉特语
['kn', 'kn,kn-in'], // 埃纳德语
['mr', 'mr,mr-in'], // 马拉地语
['pa', 'pa,pa-in'], // 旁遮普语
['ta', 'ta,ta-in'] // 泰米尔语

1.3.4 增加多语言支持 ['te', 'te,te-in'], //泰卢固语

1.3.5 增加多语言支持 ['fil', 'fil-PH'], //菲律宾语

1.3.6 修正菲律宾语的支持
['fil', 'fil-ph'], //菲律宾语
增加意大利语的支持
['it','it,it-ch,it-it'], //意大利语

1.3.7
修改输出变量名称,防止某些包打包工具会认为MultiLang 重复声明
var multiLangInstacne = new MultiLang();
export default multiLangInstacne

1.3.8 增加多语言支持 ['uk', 'uk,uk-ua'], //乌克兰语
['be', 'be,be-by'], //白俄罗斯语
['kk', 'kk,kk-kz'], //哈萨克语

1.3.9 忽略

1.3.10 修复bug

1.3.11 增加初始化参数 queryLang,
如果设置了该值,取多语言将会从url上获取该参数作为语言码
eg
multiLang.init({ queryLang: 't' })
若访问 页面index?t=ar 则会映射到ar阿拉伯语
若访问 index?t=ar&lang=en 依然会映射到ar阿拉伯语,因为queryLang优先级高于默认的"lang"参数
若访问 index?lang=en 映射到英语,因为t参数缺失,使用默认参数'lang'

1.3.12
--增加多语言
['fa', 'fa,fa-ir'], //波斯语
['da', 'da,da-dk'], //丹麦语
['ml', 'ml,ml-in'], //马拉雅拉姆语
['or', 'or,or-in'], //奥里雅语
--将queryLang获取的参数自动转为小写
eg.
multiLang.init({ queryLang: 't' })
若访问页面 index?t=AR 将会转化为ar再做语言码映射

1.3.13
--增加方法strMapToLang
传入浏览器语言参数,返回对应的语言码
eg
multiLang.strMapToLang('zh-hans') //cn multiLang.strMapToLang('vi-vn') //vn

1.3.14
完善柬埔寨语(高棉语)的浏览器标识
['kh', 'kh,km-kh']

1.3.15
--增加多语言
['as', 'as-in'],//阿萨姆语
['ka', 'ka-ge'],//格鲁吉亚语
['sa','sa-in'],//梵语
['uz','uz-latn,uz-latn-uz,uz-cyrl,uz-cyrl-uz'],//乌兹别克语

1.3.16
--多语言增加同名标识 如 ['as', 'as,as-in']

1.3.17 --增加西语的标识 es-us