Xelf-utils NPM

rui-utils

我自己的JS工具库。

1. 更新日志

0.1.0 2022-12-07

首次提交
提供了数组、DOM、方法、数值、对象、字符串等工具包。

2. 工具包说明

2.1. 工具包安装

2.1.1. 使用 npm 安装：

npm i -S rui-utils

2.1.2. VUE项目全局引用：

// main.js 文件中如下配置
import RuiUtils from 'rui-utils'
Vue.use(RuiUtils)

// 配置后在组件中如下使用工具包：
this.$Tool.Arr.isArray(arr)

2.1.3. 局部引用工具包

import Tool from 'rui-utils'
Tool.Arr.isArray(arr)

import {Arr} from 'rui-utils'
Arr.isArray(arr)

2.2 数组工具方法

2.2.1. isArray

方法定义：

isArray(arr)

说明：

判断传入的参数是否是数组对象

参数说明：

@param {Array} arr // 待判定对象
@returns 输入参数为数组类型返回true，反之返回false

调用示例：

const arr = [1,2,3,1]
const str = '123456'
const obj = { id: '1' }

Tool.Arr.isArray(arr) // 返回 true
Tool.Arr.isArray(str) // 返回 false
Tool.Arr.isArray(obj) // 返回 false

2.2.2 isEmptyArr

方法定义：

isEmptyArr(arr)

说明：

判断传入的参数是否是非空的数组对象

参数说明：

@param {Array} arr // 待判定对象
@returns 输入参数为数组类型且不为空返回true，反之返回false

调用示例：

const arr = [1,2,3,1]
const arr1 = []
const str = '123456'
const obj = { id: '1' }

Tool.Arr.isEmptyArr(arr) // 返回 false
Tool.Arr.isEmptyArr(arr1) // 返回 true
Tool.Arr.isEmptyArr(str) // 返回 false
Tool.Arr.isEmptyArr(obj) // 返回 false

2.2.3 toSeparated

方法定义：

toSeparated(arr, separator = ',')

说明：

将传入的数组转换为以指定分隔符分隔的字符串，
此方法仅支持字符串数组，非字符串数组可能无法得到你想要的结果

参数说明：

@param {Array} arr // 数组对象
@param {String} separator // 分隔符，默认逗号“，”分隔
@returns 以指定分隔符分隔的字符串

调用示例：

const arr = ['123','4','5','6']

Tool.Arr.toSparated(arr) // '123,4,5,6'
Tool.Arr.toSparated(arr, '@') // '123@4@5@6'

2.2.4 removeItem

方法定义：

removeItem(arr, index, len = 1)

说明：

删除数组对象的指定下标元素

参数说明：

@param {Array} arr // 数组对象
@param {Integer} index // 下标
@param {Integer} len // 删除个数,默认为1
@return 返回删除后的数组，会改变原数组

调用示例：

const arr = ['123','4','5','6']

Tool.Arr.removeItem(arr, 1) // ['123','5','6']

2.2.5 insertItem

方法定义：

insertItem(arr, index, item)

说明：

向数组的指定下标处插入元素

参数说明：

@param {Array} arr // 数组对象
@param {Integer} index //下标
@param {Any} item // 插入元素
@return 返回插入后的数组，会改变原数组

调用示例：

const arr = ['123','4','5','6']
const item = 'xxx'

Tool.Arr.insertItem(arr, 1, item) // ['123','xxx','4','5','6']

2.2.6 removeFirst

方法定义：

removeFirst(arr)

说明：

删除数组的第一个元素

参数说明：

@param {Array} arr 数组对象
@return 返回删除的项 会改变原数组

调用示例：

const arr = ['a', 'b', 'c']
Tool.Arr.removeFirst(arr) // ['b', 'c']

2.2.7 insertFirst

方法定义：

insertFirst(arr, item)

说明：

向数组的最前面添加元素

参数说明：

@param {Array} arr 数组对象
@param {Any} item 插入元素
@return 返回新的数组长度， 会改变原数组

调用示例：

const arr = ['a', 'b', 'c']
Tool.Arr.insertFirst(arr, 'x') // ['x', 'a', 'b', 'c']

2.2.8 removeLast

方法定义：

removeLast(arr)

说明：

移除数组的最后一项

参数说明：

@param {Array} arr 数组对象
@return 返回删除的项，会改变数组长度

调用示例：

const arr = ['a', 'b', 'c']
Tool.Arr.removeLast(arr) // ['a', 'b']

2.2.9 insertLast

方法定义：

insertLast(arr, item)

说明：

移除数组的最后一项

参数说明：

@param {Array} arr 数组对象
@param {Any} item 插入元素
@returns 返回添加后的数组长度， 会改变原来数组

调用示例：

const arr = ['a', 'b', 'c']
cosnt item = 'x'

Tool.Arr.insertLast = (arr, item) // ['a', 'b', 'c', 'x']

2.3. DOM工具方法

2.3.1 getBrowseInfo

方法定义：

getBrowseInfo ()

说明：

获取浏览器信息
包含：

  isNode, // 是否为Node运行环境
  isMobile, // 是否为移动端浏览器
  isEdge, // 是否为Edge浏览器
  isChrome, // 是否为Chrome浏览器
  isFirefox, // 是否为Firefox浏览器
  isMsie, // 是否为Ms IE浏览器
  isSafari // 是否为Safari浏览器

参数说明：

@Return 返回信息对象如下
  { isNode, isMobile, isEdge, isChrome, isFirefox, isMsie, isSafari }

调用示例：

Tool.Dom.getBrowseInfo() 
// 返回信息对象如下
// { isNode, isMobile, isEdge, isChrome, isFirefox, isMsie, isSafari }

2.3.2 getDomInfo

方法定义：

getDomInfo ()

说明：

获取DOM信息

包含：
  scrHeight,  // 屏幕高度
  scrWidth,   // 屏幕宽度
  avaiHeight, // 屏幕可视（不包含任务栏）高度
  avaiWidth,  // 屏幕可视（不包含任务栏）宽度
  docHeight,  // Document高度（整个页面的高度，包含显示区域以外的内容）
  docWidth,   // Document宽度（整个页面的高度，包含显示区域以外的内容）
  viewHeight, // 显示部分高度
  viewWidth,  // 显示部分宽度
  scrollTop,  // 垂直滚动条位置
  scrollLeft  // 水平滚动条位置

参数说明：

@Return 返回信息对象如下
  { scrHeight, scrWidth, avaiHeight, avaiWidth, docHeight, docWidth,
    viewHeight, viewWidth, scrollTop, scrollLeft }

调用示例：

Tool.Dom.getDomInfo() 
// 返回信息对象如下
// { scrHeight, scrWidth, avaiHeight, avaiWidth, docHeight, docWidth,
//   viewHeight, viewWidth, scrollTop, scrollLeft }

2.3.3 getElemInfos

方法定义：

getElemInfos (el)

说明：

获取传入元素的信息

包括：

  clientHeight, // 元素可视部分（width/height 和 padding 之和）高度
  clientWidth,  // 元素可视部分（width/height 和 padding 之和）款度
  offsetHeight, // 元素占据页面（包括 width/height、padding、border 以及滚动条的宽度）的高度
  offsetWidth,  // 元素占据页面（包括 width/height、padding、border 以及滚动条的宽度）的宽度
  scrollHeight, // 元素的总（包括隐藏的未显示的内容）高度
  scrollWidth,  // 元素的总（包括隐藏的未显示的内容）宽度
  scrollTop,    // 垂直滚动条的位置
  scrollLeft    // 水平滚动条的位置

参数说明：

@Param {Element} 页面元素对象
@Return 返回信息对象如下：
  { clientHeight, clientWidth, offsetHeight,offsetWidth, scrollHeight, scrollWidth, scrollTop, scrollLeft }

调用示例：

const el = document.getElementById('xx')
Tool.Dom.getElemInfos(el) 
// 返回信息对象如下
// { clientHeight, clientWidth, offsetHeight,offsetWidth, scrollHeight, scrollWidth, scrollTop, scrollLeft }

2.3.4 isBrowseType

方法定义：

isBrowseType (type)

说明：

校验浏览器是否为指定类型

参数说明：

@param {String} type 浏览器类型名称，可选值 'Edge'、 'Chrome'、 'Firefox'、 'msie'、 'Safari'
@returns 是指定类型浏览器时返回 true，否则返回 false

调用示例：

const el = document.isBrowseType('Edge')
// 如果当前运行的浏览器为 Edge 返回 true，否则返回 false。

2.3.4 isMobileBrowse

方法定义：

isMobileBrowse ()

说明：

校验浏览器是否为指定类型

参数说明：

@returns 运行在移动端浏览器时返回 true，否则返回 false

调用示例：

const el = document.isMobileBrowse()
// 运行在移动端浏览器时返回 true，否则返回 false

2.4. 函数工具方法

2.4.1 isFunction

方法定义：

isFunction (val)

说明：

判断传入参数是否为Function类型

参数说明：

@param {Any} arg 传入参数
@returns 如传入参数为Function类型返回true，否则返回false

调用示例：

const fun = function() {}
const str = '21315'
const num = 123
const obj = {}

Tool.Fun.isFunction(fun) // true
Tool.Fun.isFunction(str) // false
Tool.Fun.isFunction(num) // false
Tool.Fun.isFunction(obj) // false

2.5. 数值工具方法

2.5.1 isNumber

方法定义：

isNumber (val)

说明：

判断输入参数是否为数值，此方法不对输入参数进行类型转换。

参数说明：

@param {Any} val 输入参数，可为任意类型
@return 输入参数是数值时返回true，反之返回false。

调用示例：

cosnt str = '123'
const obj = {}
const arr = []
const f = 1.2
const int = 33
const nan = Number.NaN

Tool.Num.isNumber(str) // false
Tool.Num.isNumber(obj) // false
Tool.Num.isNumber(arr) // false
Tool.Num.isNumber(f) // true
Tool.Num.isNumber(int) // true
Tool.Num.isNumber(nan) // false

2.5.2 isInteger

方法定义：

isInteger (val)

说明：

判断输入参数是否为整数值，此方法不对输入参数进行类型转换。

参数说明：

@param {Any} val 输入参数，可为任意类型
@returns 输入参数是整数值时返回true，反之返回false。

调用示例：

cosnt str = '123'
const obj = {}
const arr = []
const f = 1.2
const int = 33
const nan = Number.NaN

Tool.Num.isInteger(str) // false
Tool.Num.isInteger(obj) // false
Tool.Num.isInteger(arr) // false
Tool.Num.isInteger(f) // false
Tool.Num.isInteger(int) // true
Tool.Num.isInteger(nan) // false

2.5.3 isFloat

方法定义：

isFloat (val)

说明：

判断输入参数是否为浮点数值，此方法不对输入参数进行类型转换。

参数说明：

@param {Any} val 输入参数，可为任意类型
@returns 输入参数是浮点数值时返回true，反之返回false。

调用示例：

cosnt str = '123'
const obj = {}
const arr = []
const f = 1.2
const int = 33
const nan = Number.NaN

Tool.Num.isFloat(str) // false
Tool.Num.isFloat(obj) // false
Tool.Num.isFloat(arr) // false
Tool.Num.isFloat(f) // true
Tool.Num.isFloat(int) // false
Tool.Num.isFloat(nan) // false

2.6. 对象工具方法

2.6.1 hasOwnProp

方法定义：

hasOwnProp (obj, prop)

说明：

校验指定的对象obj中是否包含名称为b的属性

参数说明：

@param {Object} obj 对象实例
@param {String} prop 属性命名
@returns 参数对象包含指定属性返回true，反之返回false

调用示例：

const obj = { b: 'xx' }
const prop = 'b'
const prop1 = 'c'

Tool.Obj.hasOwnProp(a, prop) // true
Tool.Obj.hasOwnProp(a, prop1) // false

2.6.2 isUndefined

方法定义：

isUndefined (obj)

说明：

判断对象实例是否为 undefined

参数说明：

@param {Object} obj 对象实例
@returns 参数对象为undefined返回true，反之返回false

调用示例：

const objx = {}

Tool.Obj.isUndefined(obj) // true
Tool.Obj.isUndefined(objx) // false

2.6.3 isObject

方法定义：

isObject (obj)

说明：

判断对象实例是否为 undefined

参数说明：

@param {Any} obj 对象实例
@returns 参数对象为Object返回true，反之返回false

调用示例：

const objs = 'xxxx'
const obj = {}
const arr = []
const num = 123

Tool.Obj.isObject(objs) // false
Tool.Obj.isObject(obj) // true
Tool.Obj.isObject(arr) // false
Tool.Obj.isObject(num) // false

2.6.4 isEmptyObj

方法定义：

isEmptyObj (obj)

说明：

判断参数对象是否为空对象

参数说明：

@param {Object} obj 对象实例
@returns 参数对象为空Object返回true，反之返回false

调用示例：

const obj = {}
const obj1 = { a: 'x', b: 'y' }

Tool.Obj.isEmptyObj(obj) // true
Tool.Obj.isEmptyObj(obj1) // false

2.6.5 copy

方法定义：

copy (obj)

说明：

返回源对象的一个独立的全新的对象拷贝，拷贝后的对象修改不影响源对象。

参数说明：

@param {Object} obj 对象实例
@returns 返回源对象的一个独立的全新的对象拷贝

调用示例：

const obj = { a: '1', b: '2' }
const cobj = Tool.Obj.copy(obj)
console.log(obj) // { a: '1', b: '2' }
console.log(cobj) // { a: '1', b: '2' }
obj.a = '6'
cobj.a = '9'
console.log(obj) // { a: '6', b: '2' }
console.log(cobj) // { a: '9', b: '2' }

2.7. 字符串工具方法

2.7.1 isString

方法定义：

isString (val)

说明：

判断输入参数是否为字符串

参数说明：

@param {Any} val 待判定对象
@returns 参数对象为String返回true，反之返回false

调用示例：

const num = 1
const str = 'aaa'
const obj = {}

Tool.Str.isString(num) // false
Tool.Str.isString(str) // true
Tool.Str.isString(obj) // false

2.7.2 isEmptyStr

方法定义：

isEmptyStr(val)

说明：

判断输入参数是否为空字符串

参数说明：

@param {String} val 待判定字符串
@returns 参数对象为空字符串返回true，反之返回false

调用示例：

const num = 1
const str = 'aaa'
const obj = {}
const nullStr = ''

Tool.Str.isEmptyStr(num) // false
Tool.Str.isEmptyStr(str) // false
Tool.Str.isEmptyStr(obj) // false
Tool.Str.isEmptyStr(nullStr) // ture

2.7.3. desensitized

方法定义：

desensitized(str, bgn, end)

说明：

对字符串进行脱敏操作

参数说明：

@param str 字符串
@param bgn 开头保留的字符数
@param end 结尾保留的字符数
@returns 脱敏后的字符串

调用示例：

const str = 'abcdefghijklmnopqrstuvwxyz'

desensitized(str, 3, 5) // 'abc*****************vwxyz'

2.7.4. desensitizedIdno

方法定义：

desensitizedIdno(idno)

说明：

对身份证号码进行脱敏处理

参数说明：

@param idno 身份证号码
@returns 脱敏后的身份证号码

调用示例：

const idno = '210112195112050505'

desensitizedIdno(idno) // 210112**********05

2.7.4. desensitizedModile

方法定义：

desensitizedModile(mno)

说明：

对手机号进行脱敏处理

参数说明：

@param mno 手机号码
@returns 脱敏后的手机号码

调用示例：

const mno = '13940586549'

desensitizedModile(mno) // 139****4567

@infinitebrahmanuniverse/nolb-xe @everything-registry/sub-chunk-3178

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago