常用方法封装
coder__wang
脚踏实地行,海阔天空飞
展开
-
JS判断对象是否发生变化,常用于监听页面表单是否修改并给出保存提示
本文主要封装方法,实现用户离开表单编辑页面时弹出提示框,若表单数据发生变化,则提示用户是否保存当前页面的信息,如图:原创 2023-09-04 21:48:57 · 1272 阅读 · 0 评论 -
vue+element表单校验封装
vue+elementui技术栈的小伙伴们,在平时项目里,特别是OA项目,会大量用到表单以及表单校验。经常会处理一些必填项,对它们是否有值的判断显得有些繁琐和臃肿,本文将封装方法,解决该问题。最近业务中频繁增加必填项,之前的常规做法就是在提交、修改或者其他操作之前,判断必填项是否填写,做个拦截:在每一个操作之前加上这些必填项的验证,如果有少量的必填项,可以这样处理,但是有大量必填项的时候,代码就会显得非常冗余。现在尝试将抽出来形成方法,在提交、修改等操作之前调用该方法,.原创 2021-11-08 18:31:50 · 1908 阅读 · 0 评论 -
vue自定义指令防抖和节流
函数防抖和节流在平时业务中经常会用到,一般都是调用已经封装好的方法,下面介绍一种新的思路:vue自定义指令!下面这段代码以防抖为例,el-input标签直接写上v-debounce,传入arg参数:search和expression表达式:‘input’,1000,seach为需要防抖的函数,'input'为绑定的事件名称,1000(ms)表示防抖间隔时间。<template> <el-input v-debounce:search="'input',1000" v-mo原创 2021-11-03 19:17:39 · 810 阅读 · 0 评论 -
前端性能优化之防抖、节流
本篇主要封装防抖、节流方法,并简述它们的使用场景:防抖:/** * 如果短时间内触发多次同一事件,只执行一次 * @param {*} callback callback: 需要处理的回调函数 * @param {*} delay delay:期限 * @returns */export function debounce(callback, delay) { return function (event) { // 如果上次事件还没有真正处理, 取消它 //原创 2021-08-23 17:04:58 · 150 阅读 · 0 评论 -
js数组元素为基本类型和对象去重
常见的数组去重主要有俩方面:由基本类型组成的数组去重 由对象组成的数组根据对象某个属性去重基本类型去重:export function unique(array) { const arr = [] const contain = {} array.forEach(item => { if (!contain.hasOwnProperty(item)) { arr.push(item) contain[item] = true } }原创 2021-08-20 19:13:39 · 80 阅读 · 0 评论 -
js获取本地时间
小伙伴们平时开发过程中,对获取到的本地时间有没有进行一些特殊的处理啊。比如页面需要展示这样的时间:2021.07.22、2021/07/22、2021-07-22等 。下面我们封装一个方法,可以获取自定义格式的日期格式,可自定义精确到年月日时分秒哦~ 上代码:/** * * @param {number|string} timestamp,默认是当前时间戳 * @param {string} format 'year' || 'month' || 'day' || 'hour' || 'mi原创 2021-07-22 22:34:32 · 835 阅读 · 0 评论 -
js树形数据结构的扁平化
前面我们封装了一维数组(具备树形结构相关属性)处理成树形结构的方法::https://www.cnblogs.com/coder--wang/p/15013664.html接下来我们来一波反向操作,封装一个可以将树形结构的数据扁平化的方法。这种场景在业务中还是很常见的,比如一个级联选择器,有时候你需要判断某个id或者某个字段,是否存在于该级联选择器的多维数组中,亦或者你需要将该多维数组中的字段进行处理,那么此时,对这个树形的复杂数组进行降维就显得很有必要了!下面直接上代码:/** * * @.原创 2021-07-21 23:46:34 · 6996 阅读 · 3 评论 -
js浮点数保留位数方法封装
大家在平时业务中应该经常跟小数打交道吧,有没有被小数点的保留位数问题搞得头疼啊。比如,保留一位小数,保留俩位小数,保留三位小数,向上取整、四舍五入等等。而我最近在项目中正好遇到类似的问题:有的地方要求保留一位小数,有的地方要求保留俩位,有的地方要求四舍五入,有的地方要求向下取整。。。这些情形,总不能一个个来处理吧?于是乎,干脆封装一个方法,解决上述令人头疼的问题!话不多说,上代码:/** * * @param {number|string} num 需要处理的数字 * @param {num原创 2021-07-20 23:43:37 · 466 阅读 · 0 评论