VUE|vue使用xe-utils通用函数库

目录
一、xe-Utils介绍
二、xe-utils API介绍
API全局参数
基础函数
常用函数
日期函数
【VUE|vue使用xe-utils通用函数库】高级函数
浏览器函数
三、如何全局使用xe-utils
3.1 安装xe-utils
3.1.1 ES6方式(推荐):
3.1.2 CDN安装
3.1.3 AMD安装
3.2 全局配置
3.3 全局参数配置(可省略)
3.4 使用
4、功能扩展(使用mixin)
4.1 写功能js
4.2 main.js中配置
4.3 调用自定义函数
5、常见的操作
5.1 日期操作
最近,做项目中发现了一个很流弊的通用函数库,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安装

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标签中:

script标签中:

4、功能扩展(使用mixin) 这个js只是网上给提供的常用函数,要是自己项目中有经常使用到的工具,当然了也可以自己额外整个公共的js当做工具类,但是要想也放到xe-utils这个工具类下面,可以使用mixin扩展。
4.1 写功能js
export function custom1 () { console.log('自定义函数')}

4.2 main.js中配置
XEUtils.mixin(customs)

4.3 调用自定义函数
XEUtils.custom1()

5、常见的操作 5.1 日期操作
// 日期格式化为字符串 let date = new Date(2019, 2, 2, 10, 30, 20, 95) XEUtils.toDateString(date) // 2019-02-02 10:30:20 XEUtils.toDateString(date, 'yyyy/MM/dd HH:mm:ss.S') // 2019/02/02 10:30:20.95 XEUtils.toDateString(date, 'E') // 周六 XEUtils.toDateString(date, '第 WW 周') // 第 05 周 XEUtils.toDateString(date, 'q') // 第一季度// 格式化为日期 XEUtils.toStringDate('2019-02-02 10:30:20.95') // Sat Feb 02 2019 10:30:20 GMT+0800 XEUtils.toStringDate('02/02/2019', 'MM/dd/yyyy') // Sat Feb 02 2019 00:00:00 GMT+0800 XEUtils.toStringDate('20190202103020', 'yyyyMMddHHmmss') // Sat Feb 02 2019 10:30:20 GMT+0800


    推荐阅读