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('[email protected]') //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