# dtool

**Repository Path**: moduo_412/dtool

## Basic Information

- **Project Name**: dtool
- **Description**: 私人js工具类库
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-12-29
- **Last Updated**: 2021-07-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# dtool

#### 介绍
> 私人js工具类库，其实就是封装了一些工作中常用的工具方法，避免重复造轮子。

#### 使用说明

本地直接使用`<script>`标签引入dtool.min.js

```html
<script src="./dtool.min.js" type="text/javascript"></script>
```

npm安装

```javascript
npm i dtool
//在项目中使用
import dtool from 'dtool'
```

#### 验证工具

##### 	手机号码验证  `isPhone(any)` 

```javascript
dtool.isPhone('18888888888') //true
```

##### 	固定电话验证  `istel(any)`

```javascript
dtool.isPhone('0516-88888888') //true
```

##### 	身份证号码验证 `isIdCard(any)`

```javascript
dtool.isIdCard('320324199810248999') //true 
```

##### 	邮箱验证 `isEmail(any)`

```javascript
dtool.isEmail('986482@qq.com') //true
```

##### 	验证是否为数组  `isArray(any)`

```javascript
var data = [1,2,3,4]
dtool.isArray(data) //true
```

##### 	验证是否为数字  `isNumber(any)`

```
var data = 10
dtool.isNumber(data) //true
```

##### 	验证是否为合法url `isUrl(any)`

```javascript
//支持http、https、FTP协议
var url = 'https://www.wangdahai.cn'
dtool.isUrl(url) //true
```

#### 日期转换工具

##### 返回当前时间戳 `now()`

```javascript
dtool.now() // 1609743378278 相当于 Date.now()
```

##### 日期字符串转换成时间戳  `timeParse(timeString,format)`

```javascript
// 格式化规则请看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        |          |

```javascript
// 传入时间戳
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()`

```javascript
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)`

```javascript
//地址 http://127.0.0.1:8020/dtool/test/index.html?hbt=1609729260907
var url = dtool.getQueryString('hbt')
console.log(url) //1609729260907
```

##### 对象转URL参数  `objToQuery(obj)`

```javascript
data={
	name:'Moreduo',
	age:18
}
var url = dtool.objToQuery(data)
console.log(url) //name=Moreduo&age=18
```

##### URL参数转对象 `queryToObj(url)`

```javascript
var url="name=Moreduo&age=18"
var obj = dtool.queryToObj(url)
console.log(obj) //{name: "Moreduo", age: "18"}
```



#### 对象相关操作

##### 清空数组对象  `clearObj(arr|obj,value)`

```html
<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)`

```html
<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)`

```javascript
var obj = {'javascript':true,'html':true,'css':true}
//获取对象的键名,return array
console.log(dtool.keys(obj)) //["javascript", "html", "css"]
```

##### 获取对象的值  `values(obj)`

```javascript
var obj = {javascript:"5年",html:"10年",css:"8年"}
//获取对象的值,return array
console.log(dtool.values(obj)) //["5年", "10年", "8年"]
```

##### 获取对象第一个值  `first(obj)`

```javascript
var obj = {javascript:"5年",html:"10年",css:"8年"}
//获取对象的值,return value
console.log(dtool.first(obj)) //5年
```

##### 获取对象最后一个值  `last(obj)`

```javascript
var obj = {javascript:"5年",html:"10年",css:"8年"}
//获取对象的值,return value
console.log(dtool.last(obj)) //8年
```

##### 获取对象长度  `getSize(obj)`  

```javascript
var obj = {javascript:"5年",html:"10年",css:"8年"}
//获取对象的值,return length,也可以用于数组字符串，不过显然是没必要
console.log(dtool.getSize(obj)) //3
```

##### 判断对象是否在另一个对象中  `inObj(obj,obj)`

```javascript
var obj = {javascript:"5年",html:"10年",css:"8年"}
var obj2= {javascript:"5年"}
//获取对象的值,return Boolean
console.log(dtool.inObj(obj,obj2)) //true
```



#### 文件工具

##### 	文件转BlobURL  `toBlobURL(file)`

```html
<!-- 利用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)`

```html
<!-- 利用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)`

```html
<!-- 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)`

```html
<!-- 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) `

```html
<!-- 防止用户快速多次点击，浪费系统资源 -->
<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操作 

```javascript
// 设置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)`

```html
<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](https://www.wangdahai.cn)