dty-utils

基于js日常开发的工具库

Usage no npm install needed!

<script type="module">
  import dtyUtils from 'https://cdn.skypack.dev/dty-utils';
</script>

README

Install

yarn add dty-utils

Usage

常用api

import { utils } from 'dty-utils' 

//1.  formatPidFindIdTree  // 子的pid与父的id 匹配成树形结构
  const { formatPidFindIdTree } = utils
   const input = [
      { pid: 0, id: 1, path: "/a", name: "a" },
      { pid: 1, id: 2, path: "/b", name: "b" },
      { pid: 1, id: 3, path: "/c", name: "c" },
    ]

    const output = formatPidFindIdTree(input)

    //output :
     [
      {
        pid: 0, id: 1, path: "/a", name: 'a',
        children: [
          { pid: 1, id: 2, path: "/b", name: "b" },
          { pid: 1, id: 3, path: "/c", name: "c" },
        ]
      }
    ]

 //2. changeTreekey(arr,value = 'value',label = 'label',children = 'children')   // 替换树形节点的属性

  const input = [{
      key:'key1',
      val:'val1',
      list:[
          {
              key:'key2',
              val:'val2',
              list:...
          }
      ]
  }]  
  const {  changeTreekey  } = utils
  changeTreekey(input) // [{
    value:'key1',
    label:'val1',
    children:[
      {
        value:'key2',
        label:'val2',
        children:...
      }
    ]
  }]
  


 //3. dateFormat 时间格式化 

  const {  dateFormat  } = utils

  dateFormat(date, format)
  // data => 传入的时间  format => yyyy-MM-dd hh:mm:ss qq SS 年月日 时分秒 季度毫秒
  // dateFormat(1613823401404, 'yyyy-MM-dd hh:mm:ss qq SS')


 //4. uniqueId  生成一个唯一id,包含数字和字母 
  const {  uniqueId  } = utils

  uniqueId()  // jfaaff55dd 


//5. random(num1, num2) 生成一个在num1与num2之间的随机数字(包括num1和num2)  
  const {  random  } = utils

  random(1,10)  // 8


//6. jsonp(url, params, callback)  // jsonp 跨域
const { jsonp } = utils
jsonp('http://www.dddd.com/test/',{name:1,age:2 }, (data)=>{ console.log( data ) })


//7. getRandomHex() 随机获取十六进制的颜色
const { getRandomHex } = utils
getRandomHex() // f8f8f8 

//8. getFileExtension() 获取文件的后缀名
const { getFileExtension  } = utils
getFileExtension('jhnfaj.html') // .html

//9. formatTime() //输入时间 到 现在的时间的 间隔
const { formatTime } = utils
formatTime(1613824221404) // 18分钟前

//10. getQueryObject // 解析URL的参数 
const { getQueryObject } = utils
getQueryObject('http://www.test.com?name=123&age=456') // { name:123,age:456 }

//11. param2Str // {name:123,age:456} 解析成 name=123&age=456
const { param2Str } = utils
param2Str({name:123,age:456}) // name=123&age=456

//12. param2Obj // ?name=123&age=456 解析成 {name:123,age:456}
const { param2Obj } = utils
param2Obj('?name=123&age=456') // {name:123,age:456}

//13. throttle //函数的节流
const { throttle } = utils
throttle(fn, delay)  //delay单位是毫秒

//14. debounce //函数的防抖
const { debounce } = utils
debounce(fn,delay)  //delay单位是毫秒

//15. deepClone //深拷贝
const { deepClone } = utils
deepClone(source)

//16. img2Base64 //图片转换成base64格式
const { img2Base64 } = utils
img2Base64(url) // 注意同源问题

//17. base64toBlob // base64转换成  Blob {size: 66870, type: "image/jpeg"}
const { base64toBlob } = utils
base64toBlob(base64) //  Blob {size: ..., type: "xxx/xxx"}

类型判断

import { types } from 'dty-utils' 

const { isString ,isObject,isHtmlElement,isFunction,isUndefined,getType } = types

console.log(isString('123')) // true
console.log(isObject({})) // true
console.log(isHtmlElement(document.body)) // true
console.log(isFunction(()=>{})) // true
console.log(isUndefined(undefined)) // true

console.log(getType('123')) //string
console.log(getType(123)) //number
console.log(getType(null)) //null
console.log(getType(undefined)) //undefined
console.log(getType(true)) // boolean
console.log(getType(Symbol('1'))) //symbol
console.log(getType([])) //array
console.log(getType({}) //object

本地存储 localStorage sessionStorage

import { storage } from 'dty-utils' 
// 至于localStorage和sessionStorage的区别我这在就不赘述了...
// sessionStorage
const {session_set,session_get,session_remove} = storage

session_set(key,value)  // value可以是对象
session_get(key) 
session_remove(key)

// localStorage
const {local_set,local_get,local_remove} = storage
local_set(key,value)  // value可以是对象
local_get(key) 
local_remove(key)

EventEmitter

import { EventEmitter } from 'dty-utils' 

const eventEmitter = new EventEmitter()

eventEmitter.on('event',(data)=>{ console.log(data) })
eventEmitter.once('event', (data)=>{ console.log(data)})
eventEmitter.emit('event', 'emit传递的参数!')
eventEmitter.off('event')