一、xe-Utils介绍

二、xe-utils API介绍

API全局参数

基础函数

常用函数

日期函数

高级函数

浏览器函数

三、如何全局使用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安装

<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>

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

vue使用xe-utils通用函数库相关推荐

[vue] 你有自己用vue写过UI组件库吗？
[vue] 你有自己用vue写过UI组件库吗? {{item.title}}<dl v-if="item.list.length > 0"><dd v-fo ...
5 款最棒的 Vue 移动端 UI 组件库 - 特别针对国内使用场景推荐
本文完整版:<最棒的 Vue 移动端 UI 组件库 - 特别针对国内使用场景推荐> Vue 移动端 UI 组件库推荐 Vant 3 - 有赞移动 UI 组件库,支持 Vue 3 微信小程序 ...
vue手机端项目php,MintUI基于Vue.js移动端组件库详解
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库,需要的朋友参考下吧,希望能帮助到大家. 官网 ...
vue 中引入阿里图标库，封装iconPicker组件
一.引入阿里图标库 1.vue项目引入阿里图标库二.封装iconPicker组件 1.子组件 <template><el-popoverplacement="bottom ...
Vue 移动端UI组件库
1. vonic vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约. 文档 | github地址 | 在线预览 2. vux vux 基于We ...
TIA博途中通用函数库指令FIFO先入先出的具体使用方法
TIA博途中通用函数库指令FIFO先入先出的具体使用方法前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站. 如下图所示,在TIA博途中添加通用函数库指 ...
Vue移动端UI组件库
1. vonic vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约. 中文文档 | github地址 | 在线预览 image 2. vux ...
vue.js 拖拽排序_快速轻巧的Vue.js拖放可排序库
vue.js 拖拽排序 vue-smooth-dnd (vue-smooth-dnd) A fast and lightweight drag&drop, sortable library f ...
vue中使用第三方UI库的移动端rem适配方案
需求:使用vue-cli脚手架搭建项目,并且使用第三方的UI库(比如vant,mint ui)的时候,因为第三方库用的都是用px单位,无法使用rem适配不同设备的屏幕. 解决办法:使用px2rem-l ...

vue使用xe-utils通用函数库

一、xe-Utils介绍

二、xe-utils API介绍

API
全局参数

基础函数

常用函数

日期函数

高级函数

浏览器函数

三、如何全局使用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 日期操作

vue使用xe-utils通用函数库相关推荐

最新文章

热门文章

vue使用xe-utils通用函数库

一、xe-Utils介绍

二、xe-utils API介绍

API 全局参数

基础函数

常用函数

日期函数

高级函数

浏览器函数

三、如何全局使用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 日期操作

vue使用xe-utils通用函数库相关推荐

最新文章

热门文章

API
全局参数