vue使用xe-utils通用函数库

最新推荐文章于 2024-08-21 08:46:24 发布

小湾生产队队长

最新推荐文章于 2024-08-21 08:46:24 发布

阅读量2.5w

点赞数 13

分类专栏： VUE 2.X VUE 3.X 文章标签： xe-utils

本文链接：https://blog.csdn.net/happy81997/article/details/103854568

版权

VUE 2.X 同时被 2 个专栏收录

42 篇文章 10 订阅

订阅专栏

VUE 3.X

28 篇文章 4 订阅

订阅专栏

最近，做项目中发现了一个很流弊的通用函数库，githup上人家把常用的函数给写好了，项目中只需要调用即可使用函数，不需要自己SB的整半天。这个函数库的名称叫做：xe-Utils

一、xe-Utils介绍

xe-utils提供了一套实用的基础函数、任意格式的日期转换函数，浏览器相关操作函数等。

最新版本见 Github，点击查看历史版本

二、xe-utils API介绍

API
全局参数

setup ( options ) 设置默认全局参数

基础函数

isNaN (val) 判断是否非数值
isFinite (val) 判断是否为有限数值
isUndefined (val) 判断 Undefined
isArray (val) 判断是否数组
isFloat (val) 判断是否小数
isInteger (val) 判断是否整数
isBoolean (val) 判断是否 Boolean 对象
isString (val) 判断是否 String 对象
isNumber (val) 判断是否 Number 对象
isRegExp (val) 判断是否 RegExp 对象
isObject (val) 判断是否 Object 对象
isPlainObject (val) 判断是否是一个对象
isDate (val) 判断是否 Date 对象
isError (val) 判断是否 Error 对象
isTypeError (val) 判断是否 TypeError 对象
isEmpty (val) 判断是否为空,包括空对象、空数值、空字符串
isNull (val) 判断是否为 Null
isSymbol (val) 判断是否 Symbol 对象
isArguments (val) 判断是否 Arguments 对象
isElement (val) 判断是否 Element 对象
isDocument (val) 判断是否 Document 对象
isWindow (val) 判断是否 Window 对象
isFormData (val) 判断是否 FormData 对象
isMap (val) 判断是否 Map 对象
isWeakMap (val) 判断是否 WeakMap 对象
isSet (val) 判断是否 Set 对象
isWeakSet (val) 判断是否 WeakSet 对象
isLeapYear (date) 判断是否闰年
isEqual (obj1, obj2) 深度比较两个对象之间的值是否相等
isDateSame (date1, date2, format) 判断两个日期是否相同

常用函数

toNumber ( num ) 转数值
toInteger ( num ) 转整数
toFixedNumber ( num, digits ) 和 Number.toFixed 类似，区别就是不会对小数进行四舍五入，结果返回数值
toFixedString ( num, digits ) 和 Number.toFixed 类似，区别就是不会对小数进行四舍五入，结果返回字符串
toArray ( array ) 将对象或者伪数组转为新数组
toStringJSON (str) 字符串转 JSON
toJSONString (obj) JSON 转字符串
getType (obj) 获取对象类型
getSize ( obj ) 返回对象的长度
uniqueId ( prefix ) 获取一个全局唯一标识
uniq ( array ) 数组去重
union ( ...array ) 将多个数的值返回唯一的并集数组
random ( min, max ) 获取一个指定范围内随机数
range ( start, stop, step ) 序号列表生成函数
clear (obj[, defs, assigns]) 清空对象; defs如果不传（清空所有属性）、如果传对象（清空并继承)、如果传值(给所有赋值)
remove (obj, iteratee) 移除对象属性
assign (destination, ...sources) 浅拷贝一个或者多个对象到目标对象中，如果第一值是true，则使用深拷贝
clone (obj, deep) 浅拷贝/深拷贝
destructuring (obj, ...target) 将一个或者多个对象值解构到目标对象
trim ( str ) 去除字符串左右两边的空格
trimLeft ( str ) 去除字符串左边的空格
trimRight ( str ) 去除字符串右边的空格
escape ( str ) 转义HTML字符串，替换&, <, >, ", ', `字符
unescape ( str ) 反转 escape
camelCase ( str ) 将带驼峰字符串转成字符串
kebabCase ( str ) 将字符串转成驼峰字符串
repeat ( str, count ) 将字符串重复 n 次
padStart ( str, targetLength, padString ) 用指定字符从前面开始补全字符串
padEnd ( str, targetLength [, padString] ) 用指定字符从后面开始补全字符串
startsWith ( str, val [, startIndex] ) 判断字符串是否在源字符串的头部
endsWith ( str, val [, startIndex] ) 判断字符串是否在源字符串的尾部
slice ( array, start, end ) 裁剪 Arguments 或数组 array，从 start 位置开始到 end 结束，但不包括 end 本身的位置
indexOf (obj, val) 返回对象第一个索引值
findIndexOf (obj, iteratee [, context]) 返回对象第一个索引值
lastIndexOf (obj, val) 从最后开始的索引值,返回对象第一个索引值
findLastIndexOf (obj, iteratee [, context]) 从最后开始的索引值，返回对象第一个索引值
includes (obj, val) 判断对象是否包含该值,成功返回 true 否则 false
includeArrays (array1, array2) 判断数组是否包含另一数组
each ( obj, iteratee [, context] ) 通用迭代器
arrayEach ( obj, iteratee [, context] ) 数组迭代器
objectEach ( obj, iteratee [, context] ) 对象迭代器
lastEach ( obj, iteratee [, context] ) 通用迭代器，从最后开始迭代
lastArrayEach ( obj, iteratee [, context] ) 数组迭代器，从最后开始迭代
lastObjectEach ( obj, iteratee [, context] ) 对象迭代器，从最后开始迭代
forOf ( obj, iteratee [, context] ) 通用迭代器,支持 return false 跳出循环 break
lastForOf ( obj, iteratee [, context] ) 通用迭代器,从最后开始迭代，支持 return false 跳出循环 break
keys (obj) 获取对象所有属性
values (obj) 获取对象所有值
entries (obj) 获取对象所有属性、值
first (obj) 获取对象第一个值
last (obj) 获取对象最后一个值
groupBy ( obj, iteratee [, context] ) 集合分组,默认使用键值分组，如果有 iteratee 则使用结果进行分组
countBy ( obj, iteratee [, context] ) 集合分组统计，返回各组中对象的数量统计
sortBy ( arr, iteratee [, context] ) 数组按属性值升序
shuffle ( array ) 将一个数组随机打乱，返回一个新的数组
sample ( array, number ) 从一个数组中随机返回几个元素
some ( obj, iteratee [, context] ) 对象中的值中的每一项运行给定函数,如果函数对任一项返回 true,则返回 true,否则返回 false
every ( obj, iteratee [, context] ) 对象中的值中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回 true,否则返回 false
filter ( obj, iteratee [, context] ) 根据回调过滤数据
find ( obj, iteratee [, context] ) 查找匹配第一条数据
findKey ( obj, iteratee [, context] ) 查找匹配第一条数据的键
map ( obj, iteratee [, context] ) 指定方法后的返回值组成的新数组
objectMap ( obj, iteratee [, context] ) 指定方法后的返回值组成的新对象
pick (obj, array) 根据 keys 过滤指定的属性值或者接收一个判断函数，返回一个新的对象
omit (obj, array) 根据 keys 排除指定的属性值或者接收一个判断函数，返回一个新的对象
copyWithin ( array, target, start [, end] ) 浅复制数组的一部分到同一数组中的另一个位置,数组大小不变
sum ( obj, iteratee [, context] ) 求和函数，将数值相加
mean ( obj, iteratee [, context] ) 求平均值函数
reduce ( array, iteratee [, initialValue] ) 接收一个函数作为累加器，数组中的每个值（从左到右）开始合并，最终为一个值
chunk ( array, size ) 将一个数组分割成大小的组。如果数组不能被平均分配，那么最后一块将是剩下的元素
min ( arrb[, iteratee] ) 获取最小值
max ( arr [, iteratee] ) 获取最大值
commafy ( num [, options] ) 数值千分位分隔符、小数点

日期函数

now ( ) 返回当前时间戳
timestamp ( date[, format] ) 将日期转为时间戳
toStringDate ( str, format ) 任意格式字符串转为日期
toDateString ( date [, format, options] ) 日期格式化为任意格式字符串
getWhatYear ( date, year [, month] ) 返回前几年或后几年的日期,可以指定年初(first)、年末(last)、月份(0~11)，默认当前
getWhatMonth ( date, month [, day] ) 返回前几月或后几月的日期,可以指定月初(first)、月末(last)、天数，默认当前
getWhatWeek ( date, week [, day] ) 返回前几周或后几周的日期,可以指定星期几(0~6)，默认当前
getWhatDay ( date, day [, mode] ) 返回前几天或后几天的日期
getDayOfYear ( date [, year] ) 返回某个年份的天数,可以指定前几个年或后几个年，默认当前
getYearDay ( date ) 返回某个年份的第几天
getYearWeek ( date ) 返回某个年份的第几周
getMonthWeek ( date ) 返回某个月份的第几周
getDayOfMonth ( date [, month] ) 返回某个月份的天数,可以指定前几个月或后几个月，默认当前
getDateDiff ( startDate, endDate [, rules] ) 返回两个日期之间差距,如果结束日期小于开始日期 done 为 fasle

高级函数

toArrayTree ( array, options ) 一个高性能的树结构转换函数，将一个带层级的数据列表转成树结构
toTreeArray ( array, options ) 将一个树结构转成数组列表
property ( path ) 返回一个获取对象属性的函数
pluck ( array, key ) 获取数组对象中某属性值，返回一个数组
invoke ( list, path, ...arguments ) 在list的每个元素上执行方法,任何传递的额外参数都会在调用方法的时候传递给它
zip ( ) 将每个数组中相应位置的值合并在一起
unzip ( arrays ) 与 zip 相反
delay (callback, wait[, ...arguments]) 该方法和 setTimeout 一样的效果，区别就是支持额外参数
bind (callback, context[, ...arguments]) 创建一个绑定上下文的函数
once (callback, context[, ...arguments]) 创建一个只能调用一次的函数,只会返回第一次执行后的结果
after (count, callback, context) 创建一个函数, 调用次数超过 count 次之后执行回调并将所有结果记住后返回
before (count, callback, context) 创建一个函数, 调用次数不超过 count 次之前执行回调并将所有结果记住后返回
throttle (callback, wait[, options]) 创建一个策略函数，当被重复调用函数的时候，至少每隔多少秒毫秒调用一次该函数
debounce (callback, wait[, options]) 创建一个防反跳策略函数，在函数最后一次调用多少毫秒之后才会再次执行，如果在期间内重复调用会重新计算延迟

浏览器函数

serialize ( query ) 序列化查询参数
unserialize ( str ) 反转序列化查询参数
browse ( ) 获取浏览器信息
locat ( ) 获取地址栏信息
parseUrl ( url ) 解析 URL 参数
getBaseURL ( ) 获取上下文路径
cookie ( name, value, options ) Cookie 操作函数

三、如何全局使用xe-utils

这玩意肯定需要全局使用，这样工程中任何地方都能方便使用。

3.1 安装xe-utils

3.1.1 ES6方式（推荐）：

npm install xe-utils vxe-utils --save

备注：最好连同vxe-utils一起安装了

3.1.2 CDN安装

<script src="https://cdn.jsdelivr.net/npm/vxe-utils@1.3.4/dist/vxe-utils.js"></script>

3.1.3 AMD安装

require.js安装实例：

// require 配置

require.config({

 paths: {

  // ...,

  'xe-utils': './dist/xe-utils.min',

  'vxe-utils': './dist/vxe-utils.min'

 }

})

// ./main.js 安装

define(['Vue', 'xe-utils', 'vxe-utils'], function (Vue, XEUtils, VXEUtils) {

 Vue.use(VXEUtils, XEUtils)

})

3.2 全局配置

在main.js中通过Vue.use()来全局安装：

import Vue from 'vue'
import XEUtils from 'xe-utils'
import VXEUtils from 'vxe-utils'
 
// mounts 可以设置['cookie', 'browse', 'locat']
Vue.use(VXEUtils, XEUtils, {mounts: ['cookie']})

3.3 全局参数配置（可省略）

这步操作，可以省略，即全部采用默认的。


XEUtils.setup({
  cookies: {
    path: '/'
  },
  treeOptions: {strict: false, parentKey: 'parentId', key: 'id', children: 'children', data: null},
  formatDate: 'yyyy-MM-dd HH:mm:ss.SSS',
  formatString: 'yyyy-MM-dd HH:mm:ss',
  formatStringMatchs : {
    E: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
    q: [null, '第一季度', '第二季度', '第三季度', '第四季度']
  },
  commafys: {spaceNumber: 3, separator: ',', fixed: 0}
})

3.4 使用

在vue文件中，template标签利用$utils.方法名调用，script中利用this.$utils.方法名调用：

template标签中：

<template>
  <div>{{ $utils.toDateString(startDate, 'yyyy-dd-MM HH:mm:ss') }}</div>   //直接使用$utils.函数名称来调用函数
</template>

script标签中：

<script>
export default {
  name: 'App',
  data: {
    return {
      endDate: null
    }
  },
  created () {
    this.endDate = this.$utils.toDateString(new Date(), 'MM/dd/yyyy HH:mm:ss.SSS')
  }    //使用this.$utils.函数名调用
}
</script>