vue使用xe-utils通用函数库，设计思想与代码质量优化程序性能优化开发效率优化

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标签利用 $u t i l s . 方法名调用， scr i pt 中利用 t hi s .$ utils.方法名调用：

template标签中：

{{ $utils.toDateString(startDate, 'yyyy-dd-MM HH:mm:ss') }} //直接使用$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

[

创作挑战赛
新人创作奖励来咯，坚持创作打卡瓜分现金大奖
](https://blogdev.blog.csdn.net/article/details/124124117?utm_campaign=marketingcard&utm_source=happy81997&utm_content=103854568)