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标签利用$utils.方法名调用，script中利用this.$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)

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

常用的JavaScript设计模式

• 单体模式

• 工厂模式

• 例模式

  

函数

• 函数的定义

• 局部变量和全局变量

• 返回值

• 匿名函数

• 自运行函数

• 闭包

  

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

t_70)

函数

• 函数的定义

• 局部变量和全局变量

• 返回值

• 匿名函数

• 自运行函数

• 闭包

  

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-7AKqun14-1712499268012)]