1.0.3 • Published 3 years ago
dtool v1.0.3
dtool
介绍
私人js工具类库,其实就是封装了一些工作中常用的工具方法,避免重复造轮子。
使用说明
本地直接使用<script>
标签引入dtool.min.js
<script src="./dtool.min.js" type="text/javascript"></script>
npm安装
npm i dtool
//在项目中使用
import dtool from 'dtool'
验证工具
手机号码验证 isPhone(any)
dtool.isPhone('18888888888') //true
固定电话验证 istel(any)
dtool.isPhone('0516-88888888') //true
身份证号码验证 isIdCard(any)
dtool.isIdCard('320324199810248999') //true
邮箱验证 isEmail(any)
dtool.isEmail('986482@qq.com') //true
验证是否为数组 isArray(any)
var data = [1,2,3,4]
dtool.isArray(data) //true
验证是否为数字 isNumber(any)
var data = 10
dtool.isNumber(data) //true
验证是否为合法url isUrl(any)
//支持http、https、FTP协议
var url = 'https://www.wangdahai.cn'
dtool.isUrl(url) //true
日期转换工具
返回当前时间戳 now()
dtool.now() // 1609743378278 相当于 Date.now()
日期字符串转换成时间戳 timeParse(timeString,format)
// 格式化规则请看dateFormat表格介绍
dtool.timeParse() // 1609743825317 获取当前时间戳 相当于Date.now()
dtool.timeParse('2021-01-04') // 1609689600000
// 注意:当非标准格式的日期字符串要转换成时间戳,请在第二个参数中填写对应日期格式 。比如↓
dtool.timeParse('2021-1-4','yyyy-M-d') // 1609689600000
dtool.timeParse('2021/01/04 00:00:00:000', 'yyyy/MM/dd HH:mm:ss:SSS') // 1609689600000
//dtool.timeParse('2021-1-4') // 1609430400000 不写对应的格式获取的时间还是有一定的出入的
任意格式转换成日期字符串 dateFormat(date,format)
属性 | 描述 | 备注 | 值的范围 |
---|---|---|---|
yy | 年份 | 自动截取后两位 | |
yyyy | 年份 | ||
M | 月份 | 1~12 | |
MM | 月份 | 自动补0 | 01~12 |
d | 日 | 1~31 | |
dd | 日 | 自动补0 | 01~31 |
h | 12小时制 | 1~12 | |
hh | 12小时制 | 自动补0 | 01~12 |
H | 24小时制 | 0~23 | |
HH | 24小时制 | 自动补0 | 00~23 |
m | 分钟 | ||
mm | 分钟 | 自动补0 | 00~59 |
s | 秒 | ||
ss | 秒 | 自动补0 | 00~59 |
S | 毫秒 | ||
SSS | 毫秒 | 自动补0 | |
a | am/pm,小写 | am/pm | |
A | AM/PM,大写 | AM/PM | |
D | 年份的第几天 | 1~366 | |
DDD | 年份的第几天 | 自动补0 | 001~366 |
e | 星期几 | 0~6 | |
E | 星期几 | 1~7 | |
q | 季度 | 1~4 | |
W | 年的第几周 | 1~53 | |
WW | 年的第几周 | 自动补0 |
// 传入时间戳
dtool.dateFormat(1609407847295) // '2020-12-31 17:44:07'
// 传入日期对象
dtool.dateFormat(new Date()) // '2020-12-31 17:44:59'
// 传入时间字符串
dtool.dateFormat('2020-12-31 17:55:30', 'yyyy/MM/dd') // '2020/12/31'
// 传入其他杂项
dtool.dateFormat(new Date(), 'yyyy年MM月dd日 HH时mm分ss秒S毫秒,星期E 第q季度 今年第W周 今年第D天 a')
// '2020年12月31日 17时50分43秒904毫秒,星期4 第4季度 今年第53周 今年第366天 pm'
URL相关操作
解析url解析成对象 urlObj()
console.log(dtool.urlObj())
//地址:http://127.0.0.1:8020/dtool/test/index.html?hbt=1609729260907
// 返回如下
{
hash: ""
hashKey: ""
hashQuery: {}
host: "127.0.0.1:8020"
hostname: "127.0.0.1"
href: "http://127.0.0.1:8020/dtool/test/index.html?hbt=1609729260907"
origin: "http://127.0.0.1:8020"
path: "/dtool/test/index.html?hbt=1609729260907"
pathname: "/dtool/test/index.html"
port: "8020"
protocol: "http:"
search: "?hbt=1609729260907"
searchQuery: {hbt: "1609729260907"}
}
根据键名获取url参数 getQueryString(key)
//地址 http://127.0.0.1:8020/dtool/test/index.html?hbt=1609729260907
var url = dtool.getQueryString('hbt')
console.log(url) //1609729260907
对象转URL参数 objToQuery(obj)
data={
name:'Moreduo',
age:18
}
var url = dtool.objToQuery(data)
console.log(url) //name=Moreduo&age=18
URL参数转对象 queryToObj(url)
var url="name=Moreduo&age=18"
var obj = dtool.queryToObj(url)
console.log(obj) //{name: "Moreduo", age: "18"}
对象相关操作
清空数组对象 clearObj(arr|obj,value)
<script type="text/javascript">
var arr = [1,2,3,4];
var obj = {name:'Moreduo',age:18,skills:[{skill:'javascript'},{skill:'html'},{skill:'css'}]}
//清空数组
console.log(dtool.clearObj(arr)) // []
//清空并占位
console.log(dtool.clearObj(arr,'')) // ["", "", "", ""]
//清空对象
console.log(dtool.clearObj(obj,'')) // {}
//清空对象赋值为空,注意:并不会递归清空
console.log(dtool.clearObj(obj,'')) // {name: "", age: "", skills: ""}
//清空对象并赋值,注意:是清空后重新给对象赋值,并不是替换
console.log(dtool.clearObj(obj,{name:'Tom',age:18,skills:[{skill:'javascript'},{skill:'html'},{skill:'css'}]})) // {name: "Tom", age: 28, skills: Array(3)}
</script>
对象深浅拷贝 cloneObj(obj,deep)
<script type="text/javascript">
var obj = {skills:{'javascript':true,'html':true,'css':true}}
// 浅拷贝
var obj2 = dtool.cloneObj(obj)
console.log(obj.skills === obj2.skills) // true
// 深拷贝,*第二个参数为true表示深拷贝
var obj3 = dtool.cloneObj(obj,true)
console.log(obj.skills === obj3.skills) // false
</script>
获取对象的键名 keys(obj)
var obj = {'javascript':true,'html':true,'css':true}
//获取对象的键名,return array
console.log(dtool.keys(obj)) //["javascript", "html", "css"]
获取对象的值 values(obj)
var obj = {javascript:"5年",html:"10年",css:"8年"}
//获取对象的值,return array
console.log(dtool.values(obj)) //["5年", "10年", "8年"]
获取对象第一个值 first(obj)
var obj = {javascript:"5年",html:"10年",css:"8年"}
//获取对象的值,return value
console.log(dtool.first(obj)) //5年
获取对象最后一个值 last(obj)
var obj = {javascript:"5年",html:"10年",css:"8年"}
//获取对象的值,return value
console.log(dtool.last(obj)) //8年
获取对象长度 getSize(obj)
var obj = {javascript:"5年",html:"10年",css:"8年"}
//获取对象的值,return length,也可以用于数组字符串,不过显然是没必要
console.log(dtool.getSize(obj)) //3
判断对象是否在另一个对象中 inObj(obj,obj)
var obj = {javascript:"5年",html:"10年",css:"8年"}
var obj2= {javascript:"5年"}
//获取对象的值,return Boolean
console.log(dtool.inObj(obj,obj2)) //true
文件工具
文件转BlobURL toBlobURL(file)
<!-- 利用toBlobUrl实现图片上传预览 -->
<form action="" method="post" enctype="multipart/form-data" onsubmit="return false">
<img src="" alt="" id="img"/>
<input type="file" name="file" id="file"/>
</form>
<script type="text/javascript">
var file = document.getElementById('file');
var img = document.getElementById('img');
file.onchange = function(){
// 文件转BlobURL (二进制)
var BlobURL = dtool.toBlobURL(file.files[0])
//填充至页面
img.src = BlobURL
}
</script>
文件转DataURL(base64) toDataURL(file,callback)
<!-- 利用toDataURl实现图片预览 -->
<div>
<form action="" method="post" enctype="multipart/form-data" onsubmit="return false">
<img src="" alt="" id="img"/>
<input type="file" name="file" id="file"/>
</form>
</div>
<script type="text/javascript">
var file = document.getElementById('file');
var img = document.getElementById('img');
file.onchange = function(){
// 文件转DataURL (base64)
dtool.toDataURL(file.files[0],function(val){
img.src = val
})
}
</script>
Base64转Blob base64UrlToBlob(base64)
<!-- base64UrlToBlob将base64转成blob对象 -->
<div>
<form action="" method="post" enctype="multipart/form-data" onsubmit="return false">
<img src="" alt="" id="img"/>
<input type="file" name="file" id="file"/>
</form>
</div>
<script type="text/javascript">
var file = document.getElementById('file');
var img = document.getElementById('img');
file.onchange = function(){
// 这里先用之前的toDataURL方法把文件转换成base64
dtool.toDataURL(file.files[0],function(val){
//*调用base64UrlToBlob方法将base64转成blob对象
var blob = dtool.base64UrlToBlob(val)
//拿到这个blob对象之后,我们可以对其进行逻辑操作,比如↓
img.src = dtool.toBlobURL(blob)
})
}
</script>
Base64转原生file对象 base64UrlToFile(base64)
<!-- base64UrlToFile将base64转成原生file对象 -->
<div>
<form action="" method="post" enctype="multipart/form-data" onsubmit="return false">
<img src="" alt="" id="img"/>
<input type="file" name="file" id="file"/>
</form>
</div>
<script type="text/javascript">
var file = document.getElementById('file');
var img = document.getElementById('img');
file.onchange = function(){
//先输出一下直接表单获取的file对象
console.log(file.files[0])
// 这里先用之前的toDataURL方法把文件转换成base64 用于测试
var BlobURL = dtool.toDataURL(file.files[0],function(val){
//*调用base64UrlToFile方法将base64转成原生file对象
var file = dtool.base64UrlToFile(val,'avatar.jpg','image/jpeg')
console.log(file)
})
//我们上传一张avatar.jpg的图片,发现两者输出是一致的,合理利用几个互转方法,可以解决大部分文件上传问题
}
</script>
函数工具
防抖 debounce(250,true,callback)
<!-- 防止用户快速多次点击,浪费系统资源 -->
<div>
<button id="button">点击</button>
</div>
<script type="text/javascript">
//逻辑方法
function doSomthing(){
console.log("任你辗转腾挪,我自不动如山")
}
//调用防抖函数,接受返回的回调函数,第一个参数为时间间隔,第二个参数true为第一次点击不需要防抖,第三个回调函数
var debounce = dtool.debounce(500,true,doSomthing)
document.getElementById('button').onclick = function(){
debounce()
}
</script>
cookie操作
// 设置cookie
dtool.cookie('name', 'Moreduo')
dtool.cookie('age', 18)
// 读取cookie
dtool.cookie('name') // Moreduo
// 更新cookie
dtool.cookie('name', 'Moreduo2')
// 删除cookie的方式一
dtool.cookie.remove('name')
// 删除cookie的方式二
dtool.cookie('name',null,{expires: -1})
// 删除多个
dtool.cookie([{name: 'name', expires: -1},{name:'age',expires: -1}])
/**
* 完整形式
* domain 域名
* path 路径
* expires 过期时间 ,可以指定日期或者字符串,默认天
* secure 是使用安全协议https
*/
dtool.cookie('name', 'Moreduo', {domain: 'xxx.com', path: '/', expires: 7, secure: false})
// 1小时后过期↓。日期格式:y年 M月 d天 H时 m分 s秒
dtool.cookie('name', 'Moreduo', {expires: '1H'})
// 判断是否有相应cookie
dtool.cookie.has('name') //Boolean
杂项
复制到剪贴板 clipboard(Sting)
<button id="button">点击复制</button>
<input type="text" placeholder="粘贴在这里试试"/>
<script type="text/javascript">
document.getElementById('button').onclick = function(){
var txt = "dtool工具库"
dtool.clipboard(txt)
}
</script>
联系
官方博客 www.wangdahai.cn