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目录下
