@hasaki-ui/hsk-sona

浏览器环境工具包

Stats

StarsIssuesVersionUpdatedCreatedSize
@hasaki-ui/hsk-sona
1.0.384 years ago4 years agoMinified + gzip package size for @hasaki-ui/hsk-sona in KB

Readme

hsk-sona

作者:joyer,邮箱:972325584@qq.com,最后修改时间:2017年10月11日星期三

作者是个菜逼,有什么错误,欢迎指正。

浏览器环境工具包

使用

依赖:

npm i --save @hasaki-ui/hsk-sona

使用:

import Sona from '@hasaki-ui/hsk-sona';
// 或者使用cmd
// const Sona = require('@hasaki-ui/hsk-sona').default;

Sona.inList('joyer',['joyer','taki']);

单个模块使用:

import Sona from '@hasaki-ui/hsk-sona/lib/array';
// 或者使用cmd
// const Sona = require('@hasaki-ui/hsk-sona/lib/array').default;

Sona.inList('joyer',['joyer','taki']);

API

Array

数组相关工具函数

protoCombine(srcList,list,flagFn = item => true )

将一个数组添加到另一个数组中,返回srcList并不改变srcList数组引用。

srcList:添加到的数组 list:被添加的数组 flagFn:判断条件,为一个函数,返回true添加,返回false不添加,参数为被添加数组的每一项

protoRemove(list,iteratee)

删除数组中的元素,不改变数组引用

list:被操作的数组 iteratee:判断函数

inList(value,array)

判断指定的值是否在指定的数组中。

protoClear(list)

清空一个数组,不改变数组引用

Cache

parser(pr)

设置或者获取转换器

默认的转化器为DFT_PARSER

转化器的为一个对象,格式为:

{
    parse: Object Function(String),
    format: String Function(Object)
}

转换器中有parse,format两个属性,分别将字符串转换为对象和将对象转换为字符串

DFT_PARSER

默认的转化器

默认转换器采用js自带JSON转换,所以不支持复杂的对象的转换,比如Date,在存储日期时,建议先将日期转换为毫秒数然后存储。

set(key, value, cover = true)

设置一个值到缓存中去。

key:缓存的key value:缓存的值 cover:是否覆盖,默认是覆盖

返回boolean,true:设置成功,fasle:设置失败

get(key)

根据key得到一个缓存的值

del(key)

根据key删除缓存

exists(key)

判断缓存中是否存在指定的key

getAndDft(key,dft)

获取一个缓存,如果这个缓存不存在的话,返回默认值

clear

清除缓存的所有值

dbFactory

利用Cache实现一个简单的前端key-value数据库

Image

async onLoad(img, timeout = 5 * 60 * 1000)

等待图片加载完成

采用的轮询img的complete属性,而没有使用img的load事件。 因为如果使用load事件,该函数必需在元素下面,但是系统并不能保证,所以采用轮询。

img:图片对象,为一个HTMLImageElement对象 timeout:超时时间,默认5分钟

async getImageWH(imgUrl, timeout = 5 * 60 * 1000)

得到图片的高宽。

imgUrl:图片的URL timeout:超时时间。默认5分钟。

Browser

跟浏览相关的工具,主要是对bom的操作,本工具中的函数必须在浏览器的环境中使用

getQueryValueByNameFromUrl(name, url)

得到请求url中的指定name查询字符串

url:解析的url name:查询参数名

triggerEvent(target,eventName,...initArgList)

js原生手动触发js原生事件

target 触发事件的对象 eventName 事件名 initArgList 初始化事件参数

关于js的原生事件,initArgList的传入,请参考https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event

triggerClick(target, ...initArgList)

触发 “mouseup” 和 “mousedown” 事件(模拟click事件)

但是监听click事件无效,需要监听mouseup和mousedown事件

target 触发事件的对象 initArgList 初始化事件参数

animationFrame

提供浏览器兼容的requestAnimationFrame,cancelAnimationFrame

async loadJsScriptFile(jsScriptUrl, timeout = 10 * 60 * 1000)

动态加载js文件

jsScriptUrl:js文件url地址 timeout:超时时间,默认10分钟

getPageScrollPosition

得到页面滚动条位置

Dom

跟document对象相关的工具类

removePx(str)

移除字符串中的px,如123px ==> 123

如果字符串不是一个正常的元素长度值,将会返回一个空字符串,如123.px ==> ''

getWindowSize

获取当前窗口的大小,返回对象{width: number, height: number}

getElementStyle($el)

得到元素的计算后的Style对象

getElementSize($el)

得到元素的宽高

getElementAbsPosition($el)

别名:getElementOffset

计算元素相对于屏幕的位置

实现了jquery的offset函数

getElementPosition($el)

元素相对于版面或由offsetParent属性指定的父坐标的计算上侧位置,整型,单位像素。

实现了jquery的position函数

elementResize($el)

元素重绘事件

返回一个对象{addListener:Function,removeListener:Function}, 用于为指定元素添加或者移除重绘事件

File

跟文件相关的工具函数

suffix(path)

得到文件(可以是路径,也可以是url)的后缀名,返回空串代表判断不了

appendName(path,str)

追加文件名,如果文件名是带文件后缀(文件类型),在文件后缀之前添加

eg:

appendName('test','_append') ==> test_append
appendName('test.js','_append') ==> test_append.js

参数

  • path: 文件路径或者文件名或者文件的url
  • str: 需要追加的字符串

returns {*}

Lang

一些常用的,js语言特性上,或者增强js语言上的一些工具函数

defer(fn,...argList)

在当前代码执行队列执行完毕后调用执行fn

包装了window.setTimeout,不过在回调函数执行完后,会执行clearTimeout

fn:需要执行的函数 argList:传递到fn的参数

delay(fn,wait = 0,...argList)

在当前代码执行队列执行完毕后等待指定时间调用执行fn

fn:需要执行的函数 wait:等待的时间,默认为0 argList:传递到fn的参数

timer(fn,time,maxCount = 30000)

实现一个定时器,在指定的时间间隔后调用指定函数,并且有一个最大执行次数

会返回一个id,使用clearInterval(id)能清除清除定时器

其实是封装了setInterval

uuid

生成一个UUID,其实是生成随机字符串。

当len和radix都不设置,返回标准的uuid格式(uuid v4版本)。

len:长度,默认为32 radix:基数,字符范围,完整的字符范围为数字和大小写字母,所以radix范围为0-62

strategy(factory,name,dft,isTrow)

简单的策略模式

利用map来降低if,else的使用,避免代码结构层次过多。

factory:工厂,主要存储了每个策略下执行的逻辑.为一个map,key为策略名字,value为逻辑; name:策略名; dft:默认逻辑。当工厂没有匹配这个策略的逻辑时,执行; isTrow:当工厂没有匹配这个策略的逻辑和默认函数时,是否抛出异常;

isPromise(obj)

判断是否为Promise对象,根据对象是否有then函数判断

flatPromise()

创建一个扁平的promise.

如:

const {promise,resolve,reject} = AsyncUtl.flatPromise();

// 成功
resolve();

// 或者失败
// reject();

return promise();

这样可以减少

return new Promise((res,rej) => {
    // 成功
    res();

    // 或者失败
    // rej();
})

这样的代码深度。

initObjectByPropList(propList,dftValue = '加载中...')

根据一个数组初始化一个对象

数组代表对象的属性列表,数组中可以有String,[String,Object]两种类型的值

  • 第一种类型代表对象中需要设置的属性的属性名,属性的值为默认值(dftValue)
  • 第二种类型,String代表属性值,Object代表属性值

wait(time)

在async中可以像java中await效果,等待指定时间

time:等待指定的时间

noop()

什么都不做,返回一个undefined

Math

关于数学上的一些工具函数

nextRnd(start, end)

得到一个随机数

start:起始数字,不包括 end:截止数字,不包括

nextRndInt(start, end)

得到一个随机整数

start:起始数字,包括 end:截止数字,不包括

nextRndBoolean

随机得到true或者false

Number

关于数字的一些工具函数

toThousands(num)

数字千位符格式化

num:需要格式化的数字

fmtMoney(num, decimalDigit)

将数字转换为金额

num:需要转换的数字 decimalDigit:金额后面保留的小数点的位数

parseMoney(str)

金额字符串转换为数字

Object

isError(obj)

判断对象是否是异常

isTrue(arg)

判断参数是否为true

isFalse(arg)

判断参数是否为false

protoClearObject(obj)

清空一个对象的所有字段,不改变对象引用

camelCaseKey(obj, deep = false)

将对象的key全部改成camelCase风格,不改变对象引用

snakeCaseKey(obj, deep = false)

将对象的key全部改成snakeCase风格

stringifyDateInObject(obj, filedList, fmt = 'YYYY-MM-DD HH:mm:ss')

将对象的一些字段转换为Date对象

toDateInObject(obj, fileds, fmt = 'YYYY-MM-DD HH:mm:ss')

将对象的一些date字符串转换为date对象

protoDeleteObjectKeys(obj, ...keyList)

删除对象的一些键,并保持引用不变

Str

关于字符串的一些工具函数

replaceAll(str, reg, rep)

替换所有匹配的字符串

str:被替换的字符串 reg:匹配文字,正则表达式,将会被封装为/reg/g rep:替换字符串

sliceAt(str, sliceStr, num)

按出现指定次数的指定字符串的位置切割字符串

返回一个长度为2数组,按指定位置切割后的两个字符串

str:需要切割的字符串 sliceStr:作为切割点的字符串 num:作为切割点的字符串出现的次数,可以为负数,负数代表从字符串后面算起

isEmpty(str)

是否为空字符串,该函数只判断当字符串为"",或者其他空格字符串才返回true,其他为false

isDigit(str)

验证都是数字字符串

isAccount(str)

验证账号,5-20个英文数字字符

isPsw(str)

验证密码,5-20个ascii码

isLandline(str)

是否为座机号

isEmail(str)

是否有邮箱

isDate(str)

是否为日期格式,支持YYYY-MM-DD || YYYY/MM/DD || YYYY-M-D || YYYY/M/D格式

isDatetime(str)

是否为时间格式( YYYY-MM-DD hh:mm:ss || YYYY/MM/DD hh:mm:ss || YYYY-M-D hh:mm:ss || YYYY/M/D hh:mm:ss)

Unit

关于单位上的一些工具函数

storage(value,decimal,uppercase = true)

存储单位格式的转换,数据的基准为b

value:输入值 decimal:小数位个数 uppercase:单位是否大写

WsMessage

一个消息接收器,用于处理WebSocket推送过来消息

关于WebSocket对象,会首先抢用原生WebSocket,如果不行,在使用SockJS, 如果还不行,就回抛出异常。

constructor(url, unSupportUrl, group,options)

构造器

url:需要连接的url unSupportUrl:当当前浏览器不支持webpackSocket时,使用垫片使用的url group:需要订阅的消息的分组 options:其他选项,主要时心跳检测的配置

onOpen(callback)

设置打开连接的回调函数

onClose(callback)

设置关闭连接是的回调函数

onError(callback)

设置当连接发生异常时的回调函数

config(options)

设置配置参数

connect

建立连接,在建立连接时请保证所有的设置都已经设置好。

subscribe (name, {success, error, noAuth, onlyOnce})

订阅消息

disconnect

断开连接

Exception

异常信息类

因为js原生的异常对象只有message这一个属性,Exception类扩展了属性code

constructor(message = '', code = '')

构造器

message: String|Error 异常信息 code: Object 异常编码

getCode

获取异常编码

getMessage

获取异常信息

PageStorage

页面存储器,该工具是一个Vue插件

使用:

import PageStorage from '@hasaki-ui/hsk-sona/lib/page-storage';

Vue.use(Sona.PageStorage);

该插件会在vue实例中注册一个`$pageStore`属性,其值是一个Map实例

$pageStore不可修改引用,就是说下面代码会报错:

this.$pageStore = "123"

$pageStore会在路由变化时清空值,保证值只会在当前路由中作用。

Lock

js是基于事件模型,单线程运行的,怎么会需要锁呢?

在使用es6代码后,如果将一个函数标记为async,那么它的代码实际上就会分成几个返回promise函数去执行, 也就是说一个有await语句的async函数不可能在一个js线程的执行任务中完成

如果A,B两个函数同时调用一个异步函数C,如何保证在A函数调用C时B在调用C时呈现阻塞状态,一直等待A调用完呢?

Lock可以保证在编排的多个异步函数只会一个工作片段在使用

lock()

获取锁

该函数是一个async函数,需要使用await等待获取锁

unlock()

释放锁

测试

下载代码后,进入项目目录,执行:

npm run test

测试代码在./test目录下

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.