@jdxj/utils v0.0.0

@jdxj/utils

自己开发遇到一些常用的api的函数

安装

Using npm:

先npm install下来代码

$ npm i --save @jdxj/utils

在需要的项目工程里面使用

esmodule的方式引入

• 全部引入

  import * as utils from "@jdxj/utils";
  console.log(utils)

• 按需引入

 import {
     toType
 } from "@jdxj/utils";
 console.log(toType)

commonjs的方式引入

• 全部引入

   const utils = require("@jdxj/utils");
   console.log(utils)

• 按需引入

 const {
     toType
 } = require("@jdxj/utils");
 console.log(toType)

Using browser:

<script src="./my-utils.umd.js"></script>
<script>
    console.log('检查数据类型', $myUtails.toType(777))
</script>

api介绍

toType(any)

Description：检测数据类型api

Arguments

Returns：返回字符串的结果

...

Example

import {
    toType
} from "@jdxj/utils";
toType(999) //number
toType("999") //string
toType(true) //boolean

isWindow(any)

Description：检测某个变量是否为window对象

Arguments

Returns：返回验证的boolean的结果true/false

Example

import {
    isWindow
} from "@jdxj/utils";
isWindow() //false
isWindow({}) //false
isWindow(document) //false
isWindow(true) //false
isWindow(window) //true

isFunc(any)

Description：检测某个变量是否为function对象

Arguments

Returns：返回验证的boolean的结果true/false

Example

import {
    isFunc
} from "@jdxj/utils";
isFunc() //false
isFunc({}) //false
isFunc(document) //false
isFunc(true) //false
isFunc(_ => {}) //true

clone( target)

Description：数据的克隆

Arguments

Returns：返回深克隆后端数据

Example

import {
    clone
} from "@jdxj/utils";
let num = 0,
    _18n = 18n,
    func = () => {},
    emtyObj = {},
    obj = {
        name: "张三",
        age: 90,
        func,
        o: {
            i: [90]
        }
    },
    fn = clone;
let numRes = fn(num);
numRes = 16;
console.log("numRes", numRes, num); //16 0
let _18nRes = fn(_18n);
_18nRes = 9;
console.log("_18nRes", _18nRes, _18n); //9 18n
let funcRes = fn(func);
funcRes = 9;
console.log("funcRes", funcRes, func); //9  () => { }
let emtyObjRes = fn(emtyObj);
emtyObjRes.name = 9
console.log("emtyObjRes", emtyObjRes, emtyObj); //{name: 9}  () => { }
let objRes = fn(true, obj);
obj.o = 'o'
obj.func = 'func'
console.log("objRes", objRes, obj); //{ name: "张三", age: 90, func, o: { i: [90] } }  {name: '张三', age: 90, func: 'func', o: 'o'}

isEmptyObj(any)

Description：检测某个变量是否为空对象

除了基本数据类型（null, undefind除外）跟{}是true，其余全为false

Arguments

Returns：返回验证的boolean的结果true/false

Example

import {
    isEmptyObj
} from "@jdxj/utils";
isEmptyObj() //报错
isEmptyObj(undefind) //报错
isEmptyObj(null) //报错
isEmptyObj({}) //true
isEmptyObj(document) //false
isEmptyObj(true) //true
isEmptyObj(_ => {}) //false

each(obj, callback)

Description：遍历对象的api（支持数组，对象{}，类数组）

Arguments

Returns：返回自己

Example

import {
    each
} from "@jdxj/utils";
let obj = {
    name: "张三",
    age: 90,
    func,
    o: {
        i: [90]
    }
}
let res = each(obj, (key, value) => {
    console.log("🚀 ~ file: index.html:23 ~ numRes ~ value:", value)
    console.log("🚀 ~ file: index.html:23 ~ numRes ~ key:", key)
});
console.log(res === obj) //true

isArrayLike(arr)

Description：检测某个变量是否是数组对象

Arguments

Returns：返回验证的boolean的结果true/false

Example

  <li class="ui-li"></li>
  <li class="ui-li"></li>
  <li class="ui-li"></li>
  <li class="ui-li"></li>
  <li class="ui-li"></li>

 import {
     isArrayLike
 } from "@jdxj/utils";
 const liRes = document.getElementsByClassName("ui-li")
 console.log('liRes', isArrayLike(liRes)) //true
 console.log(isArrayLike([1, 56])) //true

isPlainObj(obj)

Description：检测某个变量是否是普通对象({})

Arguments

Returns：返回验证的boolean的结果true/false

Example

  <li class="ui-li"></li>
  <li class="ui-li"></li>
  <li class="ui-li"></li>
  <li class="ui-li"></li>
  <li class="ui-li"></li>

 import {
     isPlainObj
 } from "@jdxj/utils";
 const liRes = document.getElementsByClassName("ui-li")
 console.log('liRes', isPlainObj(liRes)) //false
 console.log(isPlainObj([1, 56])) //false
 console.log(isPlainObj({})) //true

debounce(cb, wait, immediate)

Description：防抖函数，处理用户对某个按钮多次点击的情况，减少触发频率；wait为boolean，则是表示是否立即开始，默认值间隔是300毫秒；immediate是否以第一次点击为触发条件

Arguments

Returns：无

Example

  <button id="btn">防抖函数测试</button>

 import {
     debounce
 } from "@jdxj/utils";
 //  方式一
 btn.onclick = debounce((e) => {
     console.log(888, e)
 }, true)
 //  方式二
 btn.addEventListener("click", debounce((e) => {
     console.log("🚀 ~ file: index.html:35 ~ btn.addEventListener ~ e:", e)
 }))

throttle(cb, wait)

Description：节流函数，处理用户对输入框输入的值的次数的限制，减少触发频率；wait为触发间隔的时间，默认值间隔是300毫秒；

Arguments

Returns：无

Example

  <input type="text" placeholder="节流函数测试" id="input">

 import {
     throttle
 } from "@jdxj/utils";
 //  方式一
 input.oninput = throttle((e) => {
     console.log(888, e)
 }, 1000)
 //  方式二
 input.addEventListener("input", throttle((e) => {
     console.log("🚀 ~ file: index.html:35 ~ btn.addEventListener ~ e:", e)
 }))

merge(...args)

Description：对象的合并，合并后返回新的对象，影响源数据（引用数据类型对象来说）；对象跟数组都可以合并，数组的是以索引为key，数组的值为value，对象依旧是key，value；参数的最后的数据如果遇到前面有相同的key，则会覆盖前面的

Arguments

Returns：返回自己

Example

import {
    merge
} from "@jdxj/utils";
let obj = {
    name: "张三",
    age: 90,
}
let res = merge(obj, {
    age: 10
}, [10, 20], {
    age: 8
}, ["张三"])
console.log(res) //{"0": "张三","1": 20,"name": "张三","age": 8}

getQueryString(obj)

Description：获取符合key=value格式的等号后边的值；obj是一个对象，name是等号左边的字符串的名字，str是要处理掉字符串，默认是href

Arguments

Returns：返回处理好的结果

Example

import {
    getQueryString
} from "@jdxj/utils";
let str = `name="张三"`
let res = getQueryString({
    name: "name",
    str
})
console.log(res) //  "张三" 

Note

计划中

api的支持

新版本浏览器都支持，不兼容ie