mosowejs不再推荐,推荐使用@mosowe2/js
注意:@mosowe2/js@2.0.1版本开始,前缀统一添加m_
,新增@mosowe2/ts包
注意:@mosowe2/js@2.0.1版本开始,前缀统一添加m_
,新增@mosowe2/ts包
注意:@mosowe2/js@2.0.1版本开始,前缀统一添加m_
,新增@mosowe2/ts包
先推荐一个npm包【mosowejs】,对没错,用我的专用名称命名的js,点击可以查看示例,手机,PC均可,内部包含了N多日常开发用到的:
- 正则验证(手机号,座机号,中英文,数字,url等等),
- 常用的一些方法(时间格式化-年月日时分秒季度周数天数,数字千分位,数据脱敏,数据千分位,复制等等等),
- 一些数据类型判断(移动端PC判断、object,number,string…)
- 常用canvas绘图(海报图,裁剪类的有涂抹裁剪,多边形裁剪)基于document开发,同类的跨端插件uniapp点此
二维码
方法:CreateQrCode(text,options)
返回二维码图片
属性 | 类型 | 必填 | 默认 | 说明 |
---|---|---|---|---|
text | string | 是 | - | 要转为二维码的数据 |
options | optionsProps | 否 | {} | 二维码相关配置 |
optionsProps
属性 | 类型 | 必填 | 默认 | 说明 |
---|---|---|---|---|
typeNumber | number | 否 | 4 | |
errorCorrectLevel | ‘L’ | ‘M’ | ‘Q’ | ‘H’ | 否 | ‘M’ | |
size | number | 否 | 500 | 如果数据太长生成不了二维码,可以把此处的数值改大 |
缓存
sessions
方法 | 说明 |
---|---|
sessions.get(key:string) | sessionStorage获取缓存,内部已JSON.parse(),无需再转 |
sessions.set(key:string,value:any) | sessionStorage设置缓存,内部处理JSON.stringify(),无需再转 |
sessions.remove(key:string) | sessionStorage删除缓存 |
sessions.clear() | sessionStorage清空缓存 |
local
方法 | 说明 |
---|---|
local.get(key:string) | localStorage获取缓存,内部已JSON.parse(),无需再转 |
local.set(key:string,value:any) | localStorage设置缓存,内部处理JSON.stringify(),无需再转 |
local.remove(key:string) | localStorage删除缓存 |
local.clear() | localStorage清空缓存 |
函数
时间格式化
方法:DateFormat(timeTemp,fmt)
返回格式化后的时间
属性 | 类型 | 必填 | 默认 | 说明 |
---|---|---|---|---|
timeTemp | number | 是 | - | 时间戳,毫秒级 |
fmt | string | 否 | YYYY-MM-DD hh:mm:ss | 要转换的格式 |
数字千分位
方法:NumberDot(value,float)
返回格式化后的数字
属性 | 类型 | 必填 | 默认 | 说明 |
---|---|---|---|---|
value | number | 是 | - | 要转的数字 |
float | boolean | 否 | false | 小数位是否要转 |
数据脱敏
方法:ReplaceStar(value,start,end)
返回脱敏后的数据
如果value.length < start+end,或者value不为字符串类型,则原值返回,控制台报错,但不影响进程
属性 | 类型 | 必填 | 默认 | 说明 |
---|---|---|---|---|
timeTemp | string | 是 | - | 要脱敏的数据 |
start | number | 否 | 3 | 数据前不脱敏位数 |
end | number | 否 | 4 | 数据后不脱敏位数 |
判断是否带有小数位
方法:NumberIsFloat(number,maxLen)
返回boolean
属性 | 类型 | 必填 | 默认 | 说明 |
---|---|---|---|---|
number | number | 是 | - | 要判断的数字 |
maxLen | number | 否 | - | 判断小数位个数,即最多保留小数位 |
数字转万且千分位
方法:NumberWan(value,float)
返回格式化后的数字
属性 | 类型 | 必填 | 默认 | 说明 |
---|---|---|---|---|
value | number | 是 | - | 要换的数字 |
float | number | 否 | 2 | 保留的小数位数 |
离屏文件选择
方法:OutScreenFileChoose(options)
返回promise,值为选择的文件
options
属性 | 类型 | 必填 | 默认 | 说明 |
---|---|---|---|---|
fileName | string | 否 | file | 接口上传需要的文件字段名 |
accept | string | 否 | image/* | 上传文件类型 |
multiple | boolean | 否 | false | 是否多选 |
formData | boolean | 否 | false | 选择后返回的数据是否需要formData |
复制
方法:Copy(value)
属性 | 类型 | 必填 | 默认 | 说明 |
---|---|---|---|---|
value | any | 是 | - | 要复制的内容 |
深拷贝
方法:DeepClone(value)
返回拷贝后的数据
属性 | 类型 | 必填 | 默认 | 说明 |
---|---|---|---|---|
value | any | 是 | - | 要深拷贝的值 |
file转base64
方法:FileToBase64(file)
返回promise, 值为base64数据
属性 | 类型 | 必填 | 默认 | 说明 |
---|---|---|---|---|
file | file | 是 | - | 要转的文件 |
base64转blob(file文件)
方法:Base64toBlob(base64)
返回promise,值为blob数据
属性 | 类型 | 必填 | 默认 | 说明 |
---|---|---|---|---|
base64 | base64 | 是 | - | 要转的base64数据 |
删除对象中的空
方法:DeleteEmptyObj(obj)
返回处理后的数据
属性 | 类型 | 必填 | 默认 | 说明 |
---|---|---|---|---|
obj | object | 是 | - | 要处理的json数据 |
资源文件下载到本地
方法:FileDownload(link,name)
处理后直接调起浏览器的下载
这是一个汇总的下载方式,主要是处理一些图片下载,文档类型下载
你也可以使用XMLHttpRequest单独下载文档类型文件
或者使用XMLHttpRequest + WebImageToBase64下载图片类型文件
但是我建议使用 FileDownload 这个总入口下载图片、文档类型文件
属性 | 类型 | 必填 | 默认 | 说明 |
---|---|---|---|---|
link | string | 是 | - | 文件地址 |
name | string | 否 | - | 文件下载后的名称,默认是文件地址的最后一截名称 |
下载文件
方法:XMLHttpRequest(link,name,type)
属性 | 类型 | 必填 | 默认 | 说明 |
---|---|---|---|---|
link | string | 是 | - | 文件下载地址,图片为base64 |
name | string | 是 | - | 文件保存的名称 |
type | string | 是 | - | 文件类型,图片:image,非图片:file |
网络图片转为本地base64或blob
方法:WebImageToBase64(imgUrl)
返回promise,值为base64或blob
属性 | 类型 | 必填 | 默认 | 说明 |
---|---|---|---|---|
imgUrl | string | 是 | - | 网络图片地址 |
防抖
方法:Debounce(callback,time)
只执行最后一次事件
属性 | 类型 | 必填 | 默认 | 说明 |
---|---|---|---|---|
callback | function | 是 | - | 回调函数 |
time | number | 否 | 300 | 间隔时间,毫秒 |
节流
方法:Throttle(callback,time)
一段时间内只执行一次事件
属性 | 类型 | 必填 | 默认 | 说明 |
---|---|---|---|---|
callback | function | 是 | - | 回调函数 |
time | number | 否 | 300 | 间隔时间,毫秒 |
canvas
canvas图片合成
方法:CanvasImageCompose(config)
返回promise,值为图像base64,或者空
config
属性 | 类型 | 必填 | 默认 | 说明 |
---|---|---|---|---|
list | canvasImageComposeListItem | 是 | - | 要渲染的数据列表 |
imgType | ‘jpeg’ | ‘png’ | 否 | jpeg | 输出图像格式 |
height | number | 否 | 1330 | canvas高度 |
width | number | 否 | 750 | canvas宽度 |
canvasImageComposeListItem
属性 | 类型 | 必填 | 默认 | 说明 |
---|---|---|---|---|
type | string | 是 | - | 元素类型:image 图片,text 文本,rect 矩形(线条),arc 圆形,qr 二维码 |
x | number | 是 | - | X轴坐标 |
y | number | 是 | - | Y轴坐标 |
content | string | 是 | - | image:图片数据,text:文字,rect及arc:不使用此字段 |
width | number | 否 | - | 图片、矩形(线条)、圆形宽度 |
height | number | 否 | - | 图片、矩形(线条)高度 |
arc | boolean | 否 | false | type=image时:是否绘制圆形图片 |
arcType | ‘cover’ | ‘scale’ | ‘clip’ | 否 | cover | 裁剪圆形图片模式,默认cover平铺,scale缩放,clip裁剪 |
arcClipXYS | number | 否 | - | arcType=clip时裁剪坐标及缩放等级,1为不缩放,例[20,30,1] |
color | string | 否 | #000000 | 绘制文本、矩形(线条)的颜色,默认:#000000 |
font | number | 否 | - | 绘制文本的字号大小,字体样式,格式示例’20px sans-serif’ |
align | ‘left’ | ‘right’ | ‘center’ | 否 | left | 绘制文本的对齐方式,默认:left |
maxWidth | number | 否 | - | 绘制文本的最大宽度,文字长度超过该值会被压缩 |
globalAlpha | number | 否 | 1 | 透明度:0~1,默认1 |
canvas涂抹裁剪
方法:CanvasDaubClip(config)
返回promise,值为图像base64,或者空,或handleClip为true的时候,返回object,需调用object.clip()方法手动裁剪,clip()返回promise,裁剪之后的图片大小与触摸区域大小一致,预览可能会放大裁剪的图片,移动端绘制速度慢了可能会出现首尾链接现象
config
属性 | 类型 | 必填 | 默认 | 说明 |
---|---|---|---|---|
image | string | 是 | - | 图片路径 |
el | string | 否 | - | 挂载的元素id名称,没有则默认全屏 |
width | number | 否 | 300 | 裁剪区宽度 |
height | number | 否 | 300 | 裁剪区高度 |
radius | number | 否 | 20 | 涂抹半径 |
alpha | number | 否 | 0.6 | 蒙层透明度 |
handleClip | boolean | 否 | false | 是否手动裁剪,false则松手就裁剪,调用clip()方法触发手动裁剪,参考后面示例 |
shade | string | 否 | #000000 | 遮罩层的颜色(#号开头的)或者图片(base64或有效路径) |
canvas多边形裁剪
方法:CanvasPolygonClip(config)
返回promise,值为object,执行object.clip()方法手动裁剪,该方法返回promise,值为base64或者空
config
属性 | 类型 | 必填 | 默认 | 说明 |
---|---|---|---|---|
image | string | 是 | - | 图片路径 |
el | string | 否 | - | 挂载元素,没有则默认全屏,因该方法需要手动裁剪,所以建议配置该属性,通过clip()裁剪,请看示例 |
side | number | 否 | 3 | 边数,不能小于3,边数越多可越接近圆 |
radius | number | 否 | 150 | 半径,点到中心距离 |
rect | boolean | 否 | false | 是否为正矩形,为true时,side失效 |
rectWidth | number | 否 | =radius | 正矩形的宽,没有或为0,默认取radius |
rectHeight | number | 否 | =radius | 正矩形的长,没有或为0,默认取radius |
alpha | number | 否 | 0.6 | 裁剪蒙层透明度,默认0.6 |
inner | boolean | 否 | false | 是否为内多边形,默认false |
innerTimes | number | 否 | 0.5 | 内多边形时,靠内的点半径为radius*innerTimes, 默认0.5 |
width | number | 否 | 宽度,仅pc端有效,pc默认50vw,移动端固定全屏 | |
height | number | 否 | 高度,仅pc端有效,pc默认100vh,移动端固定全屏 | |
rotate | boolean | 否 | true | 是否可旋转,默认true |
示例:
// 触摸裁剪及多边形裁剪可参考此示例
let handleSideClip:any = null
// 选择文件并打开裁剪
const beginClip = () => {
OutScreenFileChoose()
.then(async (res:any) => {
handleSideClip = await CanvasPolygonClip({
image: res[0],
el:'showClip'
})
})
}
// 手动触发裁剪
const DaubClip = async ()=> {
if (handleSideClip) {
// data为裁剪的图片
const data = await handleSideClip.clip()
}
handleSideClip = null
}
正则
手机号
正则内容:Mobile = /^1[3456789]\d{9}$/
校验方法:IsMobile(value:string)
座机
正则内容:StudioCamera = /^0\d{2,3}-\d{6,8}$/
校验方法:IsStudioCamera(value:string)
邮箱
正则内容:Email = /^\w+(\.)?(\w+)?@[0-9a-z]+(\.[a-z]+){1,3}$/
校验方法:IsEmail(value:string)
身份证
正则内容:IdCard = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
校验方法:IsIdCard(value:string)
数字
正则内容:Digit = /^\d+$/
校验方法:IsDigit(value:string|number)
数字字母
正则内容:DigitLetter = /^[A-Za-z0-9]+$/
校验方法:IsDigitLetter(value:string|number)
中文
正则内容:Chinese = /^[\u4e00-\u9fa5]+$/
校验方法:IsChinese(value:string)
中文,英文,数字,下滑线
正则内容:CnEnNuLine = /^[\u4e00-\u9fa5A-Za-z0-9_]+$/
校验方法:IsCnEnNuLine(value:string)
英文
正则内容:English = /^[A-Za-z]+$/
校验方法:IsEnglish(value:string)
大写英文
正则内容:CapitalEnglish = /^[A-Z]+$/
校验方法:IsCapitalEnglish(value:string)
ipv4
正则内容:Ipv4 = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
校验方法:IsIpv4(value:string)
http,https地址
正则内容:Url = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=]+$/
校验方法:IsUrl(value:string)
邮编
正则内容:PostCode = /^[0-8]\d{5}$/
校验方法:IsPostCode(value:string)
社会信用代码编码规则
正则内容:SocialCreditCode = /[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}/
校验方法:IsSocialCreditCode(value:string)
判断
除判断手机设备及false/true,其他基于Object.prototype.toString.call()方法判断
是否是手机设备
方法:IsPhone()
是否是object
方法:IsObject(value:any)
是否是数组
方法:IsArray(value:any)
是否是数字
方法:IsNumber(value:any)
是否是字符串
方法:IsString(value:any)
是否是时间
方法:IsDate(value:any)
是否是Boolean类型
方法:IsBoolean(value:any)
是否是函数
方法:IsFunction(value:any)
是否为null
方法:IsNull(value:any)
是否为undefind
方法:IsUndefined(value:any)
是否为false
方法:IsFalse(value:any)
是否为true
方法:IsTrue(value:any)
安装
npm install mosowejs
使用
全引入:
import mosowe from 'mosowejs'
mosowe.Copy(123)
按需引入:
import {Copy} from 'mosowejs'
Copy(123)
git码云地址:
https://gitee.com/mosowe/mosowejs
业余之时,摸鱼之内,细想近些年做项目,总是或多或少的用到很多的js方法,总是没有一个综合性的来包裹自己开发的插件啥的,所以最近打算把他们全都合并一下,也许有漏掉的。
如果你有其他建议或需求,欢迎留言评论。