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

xelf-utils

rui-utils

1. 更新日志

0.1.0 2022-12-07

2. 工具包说明

2.1. 工具包安装

2.1.1. 使用 npm 安装：

2.1.2. VUE项目全局引用：

2.1.3. 局部引用工具包

2.2 数组工具方法

2.2.1. isArray

2.2.2 isEmptyArr

2.2.3 toSeparated

2.2.4 removeItem

2.2.5 insertItem

2.2.6 removeFirst

2.2.7 insertFirst

2.2.8 removeLast

2.2.9 insertLast

2.3. DOM工具方法

2.3.1 getBrowseInfo

2.3.2 getDomInfo

2.3.3 getElemInfos

2.3.4 isBrowseType

2.3.4 isMobileBrowse

2.4. 函数工具方法

2.4.1 isFunction

2.5. 数值工具方法

2.5.1 isNumber

2.5.2 isInteger

2.5.3 isFloat

2.6. 对象工具方法

2.6.1 hasOwnProp

2.6.2 isUndefined

2.6.3 isObject

2.6.4 isEmptyObj

2.6.5 copy

2.7. 字符串工具方法

2.7.1 isString

2.7.2 isEmptyStr

2.7.3. desensitized

2.7.4. desensitizedIdno

2.7.4. desensitizedModile

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads