刘新修

Vue (preventReClick)防暴点 +防抖（debounce）和节流（throttle）函数

[

2023/09/27 18:49 | by 刘新修 ]

1. 防暴点（preventReClick）

快速点击按钮时会频繁重复调用接口，为了防止这种情况，要对相应的按钮进行防暴力重复点击处理，最好是使用函数防抖或者函数截流来处理，但是现在已经要修改的按钮太多了，于是换一种方法，用指令的方式来达到相识的效果。

1.创建utils文件夹，在该文件夹下创建preventReClick.js文件

JavaScript代码

export default {
install(Vue) {
Vue.directive('preventReClick', {
inserted: function (el, binding) {
console.log(el.disabled)
el.addEventListener('click', (e) => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, binding.value || 3000)
//binding.value可以自行设置。如果设置了则跟着设置的时间走
//例如：v-preventReClick='500'
} else { // disabled为true时，阻止默认的@click事件
e.preventDefault()
e.stopPropagation()
}
})
}
}),
}

2.在main.js中全局引用

JavaScript代码

// 防止多次点击
import preventReClick from '@/util/preventReClick '
Vue.use(preventReClick);

3.在触发事件的按钮上就可以直接使用指令(button按钮和其他元素都可)

JavaScript代码

<div class="comment-btn" @click="submitMes()" v-preventReClick="3000">发送</div>
<el-button @click="submitMes()" v-preventReClick="3000">发送</el-button>

2. 防抖（debounce）

用户停下操作，就执行函数；只要不停止操作，永远不会执行函数内的操作
使用场景：防抖常应用于用户进行搜索输入节约请求资源，
eg：原来watch用户输入值改变马上请求接口，加入防抖，停止输入操作才会对接口进行访问

JavaScript代码

/**
* @description 函数防抖触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。
* @param {Function} func 需要执行的函数
* @param {Number} wait 间隔时间默认200ms
* @param {Boolean} immediate 是否立即执行 true(默认) 表立即执行，false 表非立即执行
* @return {*}
*/
export function VueDebounce(func, wait = 200, immediate = true) {
let timeout = null; // 定时器
return function () {
let that = this, // this对象
args = arguments; // 参数
if (timeout) clearTimeout(timeout);
if (immediate === true) { // 立即执行
var callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait)
if (callNow) {
// func.apply(that, args); // 普通用法
that[func](...args); // vue用法
}
}
else { // 非立即执行
timeout = setTimeout(() => {
// func.apply(this, args); // 普通用法
that[func](...args); // vue用法
}, wait);
}
}
}

用法：

JavaScript代码

import {VueDebounce} from "@/util/index"
methods: {
/**
* 点击事件函数防抖
* 用法：<el-button @click="debounceHandel">点击测试</el-button>
*/
debounceHandel: VueDebounce("handlerFunc"),
/**
* 点击事件：真正执行的函数
*/
handlerFunc(type) {
console.log("测试防抖事件");
this.$emit("click","这是参数"); // 如果用普通用法，则这里会找不到$emit，因为this还往上继承了vue的对象
},
}

3. 节流（throttle）

高频时间触发,但n秒内只会执行一次,所以节流会稀释函数的执行频率，是个固定的过程，如限制1s，则1s内只执行一次，无论怎样，都在会1s内执行相应的操作

使用场景：和防抖使用场景差不多，关键看固定时间内（1s）需要反馈，需要反馈使用节流，即：无论用户是否停下操作，都会固定时间执行函数操作

JavaScript代码

* @description 函数节流
* @param {Function} func 函数
* @param {Number} wait 延迟执行毫秒数,默认200
* @param {Number} type 1 表时间戳版，2 表定时器版
*/
xport function VueThrottle(func, wait=200 ,type) {
if(type===1){
let previous = 0;
}else if(type===2){
let timeout;
}
return function() {
let that= this;
let args = arguments;
if(type===1){
let now = Date.now();
if (now - previous > wait) {
// func.apply(that, args); // 普通用法
that[func](...args); // vue用法
previous = now;
}
}else if(type===2){
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
// func.apply(that, args)
that[func](...args); // vue用法
}, wait)
}
}
}

用法：

JavaScript代码

import {VueThrottle} from "@/util/index"
methods: {
/**
* 点击事件函数防抖
* 用法：<el-button @click="throttleHandel">点击测试</el-button>
*/
throttleHandel: VueThrottle("handlerFunc"),
/**
* 点击事件：真正执行的函数
*/
handlerFunc(type) {
console.log("测试防抖事件");
this.$emit("click","这是参数"); // 如果用普通用法，则这里会找不到$emit，因为this还往上继承了vue的对象
},
}

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(24)

蓝盾发布平台，查看当前的版本号

[

2023/09/13 14:21 | by 刘新修 ]

C#代码

output(normal): BK_CI_GIT_REPO_HEAD_COMMIT_AUTHOR=刘新修
output(normal): BK_CI_GIT_REPO_URL=http://172.16.101.177/health-product/health-front/health-manage-front.git
output(except): bk_repo_type_e-9937698f8027470f86c86096e78e8940=GIT
output(normal): BK_CI_GIT_REPO_NAME=health-product/health-front/health-manage-front
output(except): git.health-product.health-front.health-manage-front.new.commit=c3084bed035f479b0e4419b20c00fe4cd25f0bac

Windows相关 | 评论(0) | 引用(0) | 阅读(46)

Mock的基本语法及使用

[

2023/09/08 15:17 | by 刘新修 ]

JavaScript代码

//定义/mock/index.js
import Mock from 'mockjs'
Mock.mock("/api/login", {
code: 200,
msg: "登陆成功",
user: {
name: "zeng8",
score: 2048,
rank: 10
},
token: "kjkjalsdiiuioayeuryqowierqiwerqowiery"
})
// url可以使用正则匹配
// 拦截get请求，返回评论数据
Mock.mock(/\/api\/feed/, "get", function(config) {
//console.log("config" , config );
//通过config可以获取到前端发给服务器的数据
var po = config.url.indexOf("?"); //获取问号的位置
if (po != -1) {
var query = config.url.slice(po + 1); //获取到查询参数current=4转换为{current: 4}
var arr = query.split("&"); //按&分割为数组
var search = {}; //定义个对象
arr.forEach(item => {
var temp = item.split("="); //把数组每个元素按等于分割[current,4]
search[temp[0]] = temp[1]; //search[ "current"] =4
})
}
// 返回一个随机数据
return Mock.mock({
"code": 0,
"data|4": [{
id: "@id",
msg: "@cparagraph(2,3)", //段落2-3行
name: "@cname", //随机中文名
date: "@datetime" //随机日期
}],
"pagnation": {
"total|10-25": 1,
"size": 4,
"pageTotal|4-10": 1,
"current": search.current,
}
})
})
Mock.mock("/api/test", Mock.mock({
name: "@cname", //随机中文名
"age|100-200": 1, //100-200的随机数
"price|10-50.2-5": 1, //10-50随机数小数点2-5位
"live|1-2": true, //随机true或false
"start|1-5": "⭐", //把字符串重复1-5次
"friend|2": ["小红", "小明", "小刚", "小白", "小蓝"], //1是挑一个大于1是重复n次
"props|1-3": {
name: "mm",
age: 22,
leg: 2,
job: "web",
eye: 2
},
"tel": /13\d{9}/,
"des": function() {
return `大家好，我的名字是${this.name}，今年${this.age}岁`
},
"data|10": [{
"id|+1": 1024,
"ID": "@id",
date: "@date",
time: "@time",
datetime: "@datetime",
name: "@cname",
pic: "@dataImage('200x100')",
description: "@cparagraph(1,3)",
title: "@ctitle(8,12)",
url: /http:\/\/www\.[a-z]{2,8}\.(com|cn|org)/,
email: /[4-8]@\.(126|qq|163)\.(com|cn|org)/,
address: "@county(true)", //省市区地址
}]
}))

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(51)

vue封装定时器

[

2023/09/07 13:29 | by 刘新修 ]

main.js 文件

JavaScript代码

/*** sleep ***/
Vue.prototype.$sleep = time => {
return new Promise((resolve, reject) => {
window.setTimeout(() => {
resolve(true)
}, time)
})
}

增加测试页面

XML/HTML代码

<!--
* @Description: npage.vue
* @Version: 1.0
* @Author: Jesse Liu
* @Date: 2022-08-01 20:32:06
* @LastEditors: Jesse Liu
* @LastEditTime: 2023-09-07 13:24:11
-->
<template>
<div class="wscn-http404-container">
<h2 style="font-weight: normal; line-height: 160%;">userInfo ========= {{ userInfo }}</h2>
<h2 style="font-weight: normal; line-height: 160%;">configInformation ========= {{ configInformation }}</h2>
<h1 style="line-height:300px; text-align:center">npage.vue (新测试文件)</h1>
<div>time:</div>
</div>
</template>
<script>
import { mapState } from "vuex";
import { parseTime } from '@/utils'
import { downloadFile } from "@/utils/getFile";
export default {
name: 'PageTest',
computed: {
...mapState("user", ["userInfo","configInformation"]),
message() {
return 'PageTest'
},
parseTime: parseTime
},
mounted() {
this.$store.dispatch("case/casesList/downloadFile",{}).then((res)=>{
// let data = res.data;
// let headers = res.headers;
// /*** 调用下载文件 ***/
// downloadFile(data, headers)
})
/*** 多定时器同时调用 ***/
this.getStateA();
this.getStateB();
/*** 业务请求接口调用示例 ***/
this.casePage();
},
methods: {
/*** 定时器演示方法 ***/
async getStateA(){
/*** 定时器只管计算时间钩子标记 ***/
console.log('sleepStateA ~~~ 开始')
/*** 多定时处理任务A ***/
console.time('sleepStateA');
let sleepStateA = await this.$sleep(5000);
console.log('sleepStateA ~~~ 结束', sleepStateA)
console.timeEnd('sleepStateA');
return sleepStateA;
},
/*** 定时器演示方法 ***/
async getStateB(){
/*** 定时器只管计算时间钩子标记 ***/
console.log('sleepStateB ~~~ 开始')
/*** 多定时处理任务B ***/
console.time('sleepStateB');
let sleepStateB = await this.$sleep(10000);
console.log('sleepStateB ~~~ 结束', sleepStateB)
console.timeEnd('sleepStateB');
return sleepStateB;
},
/*** 模拟示例业务的状态 ***/
async getCaseState(){
/*** 定时器只管计算时间钩子标记 ***/
let sleepStateCase = await this.$sleep(10000);
return sleepStateCase;
},
/*** 模拟示例业务主方法 ***/
async casePage(state = true, n = 0){
/*** 定义及获取数据状态 ***/
let runling = true;
let getCaseState = await this.getCaseState();
/*** 业务逻辑处理及使用 ***/
if(state && getCaseState) {
/*** 请求接口拿状态和后端约定状态码(根据状态码去更改runling的布尔值) ***/
// 写你的vuex调用方法，如：this.$store.dispatch('user/record', {})
/*** 以下代码是为了演示模拟3次请求后，状态变更，供参考 ***/
/*** 假设后端接口告诉你可以终止执行调用的状态 (比如后端调用3次后就更改了状态) ***/
let index = n;
index +=1;
console.log('第['+ index + ']次调用后端接口~~');
if(index >= 3) {
runling = false;
}
this.casePage(runling, index);
}
else{
console.log('===========================================\n定时器已经结束关停，累计调用共: ' + n + '次~~');
}
}
}
}
</script>
<style lang="scss" scoped>
</style>

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(53)

创建自增ID用户表

[

2023/09/01 16:49 | by 刘新修 ]

SQL代码

CREATE DATABASE example;
USE example;
CREATE TABLE users (
id INT(11) NOT NULL AUTO_INCREMENT,
name VARCHAR(45) NOT NULL,
age INT(11) NOT NULL,
PRIMARY KEY (id)
);

数据库技术 | 评论(0) | 引用(0) | 阅读(65)

获取JSON对象key及vulue

[

2023/09/01 09:29 | by 刘新修 ]

JavaScript代码

var arr = [
{
"原告性别": "女",
"出生日期": "XX1年1月1X日",
"居住地址": "北京市丰台区XXXXX",
"所属民族": "汉族",
"电话号码": "XXXXXX78",
"原告姓名": "XXX"
},
{
"原告性别": "男",
"出生日期": "1992年6月10日",
"居住地址": "北京市通州区XXXXX",
"所属民族": "汉族",
"电话号码": "18701519435",
"原告姓名": "xxx"
}
]
/*** 遍历数组中的JSON对象 ***/
for (var i=0; i<arr.length; i++){
var keys=Object.keys(arr[i]);
console.log('keys:', keys);
}
//keys: (6) ['原告性别', '出生日期', '居住地址', '所属民族', '电话号码', '原告姓名']

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(85)

JS 中如何优雅的使用多层嵌套属性而不会发生报错

[

2023/08/29 10:58 | by 刘新修 ]

平时在写js的时候遇到多层属性嵌套，一般大家敢直接用点使用吗？

有没有开发的时候好好的，某一时刻突然出现一个控制台报错类似：Uncaught TypeError: xxx is not a function

一般这种情况就是没有判断是否有值，如果数据是后端返回的，有可能后端就是没有值或者值的类型不对，这些情况都可能导致出现程序出错，一般我们需要进行判断，常见的判断就是

JavaScript代码

if(obj.a && obj.a.b && obj.a.b.c && obj.a.b.c.d){
// do something
}

如果层级太深或者类似判断逻辑太多，写起来有点烦，能把自己蠢哭。。。下面有一些优雅的方式解决这个问题。

方法1：

扁平化处理：后台处理 / 前端预处理, 防止出现不存在值的情况

方法2：

ES6 使用 CoffeeScript: a?.b?.c?.d

方法3：

JavaScript代码

function checkNested(obj /*, level1, level2, ... levelN*/) {
var args = Array.prototype.slice.call(arguments),
obj = args.shift();
for (var i = 0; i < args.length; i++) {
if (!obj || !obj.hasOwnProperty(args[i])) {
return false;
}
obj = obj[args[i]];
}
return true;
}
var test = {level1:{level2:{level3:'level3'}} };
checkNested(test, 'level1', 'level2', 'level3'); // true
checkNested(test, 'level1', 'level2', 'foo'); // false

方法4：

https://github.com/letsgetrandy/brototype

JavaScript代码

var myURL;
if (Bro(app).doYouEven('config.environment.buildURL')) {
myURL = app.config.environment.buildURL('dev');
}

方法5：

lodash

JavaScript代码

var object = { 'a': [{ 'b': { 'c': 3 } }] };
_.get(object, 'a[0].b.c');
// => 3
_.get(object, ['a', '0', 'b', 'c']);
// => 3
_.get(object, 'a.b.c', 'default');
// => 'default'

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(85)

Object.getOwnPropertyNames()

[

2023/08/28 16:29 | by 刘新修 ]

JavaScript代码

// 类数组对象
const obj = { 0: "a", 1: "b", 2: "c" };
console.log(Object.getOwnPropertyNames(obj).sort());
// ["0", "1", "2"]
Object.getOwnPropertyNames(obj).forEach((val, idx, array) => {
console.log(`${val} -> ${obj[val]}`);
});

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(55)

js比较俩个对象是否相等

[

2023/08/28 15:20 | by 刘新修 ]

一、使用Object.getOwnPropertyNames()

该方法和Object.keys()功能一样，不同的地方在于Object.getOwnPropertyNames返回对象本身全部的属性，而Object.keys返回对象自身的（不含继承的）所有可枚举属性（不含Symbol属性）（即返回enumerable为false的属性）

共同点是俩者都不会返回自身原型链上的属性。

JavaScript代码

var obj = {"name":"liuxinxiu","age":18,"info":"1234"}
var obj2 = obj;
var obj3 = {"name":"liuxinxiu","age":18,"info":"123"}
function checkInfo(obj1, obj2){
//判断是否指向同一内存
if (obj1 === obj2) return true;
let bankInfo = Object.getOwnPropertyNames(obj1),
oldBankInfo = Object.getOwnPropertyNames(obj2)
//判断长度不相同直接返回不同
if(bankInfo.length !== oldBankInfo.length) return false
for(let i=0,max=bankInfo.length; i<max; i++){
let prop_name = bankInfo[i]
if(obj1[prop_name] !== obj2[prop_name]){
return false
}
}
return true
}
console.log(checkInfo(obj,obj3))

二、使用Object.keys()或者Object.entries().toString()

Object.keys()是将对象中键先取出来组成数组，然后先比较键。而后通过键在比较值

Object.entries()是将键和值分别组成俩个数组。然后使用toString将键值数组转化为字符串去比较

JavaScript代码

checkInfo() {
// object.keys
let bankInfo = Object.keys(this.params.bankInfo),
oldBankInfo = Object.keys(this.params.oldBankInfo)
if (oldBankInfo.length !== bankInfo.length) return false
for (let i = 0; i <= bankInfo.length - 1; i++) {
let key = bankInfo[i];
if (!oldBankInfo.includes(key)){
return false
}
if (this.params.oldBankInfo[key] !== this.params.bankInfo[key]){
return false
}
}
// object.entries
console.log(Object.entries(this.params.bankInfo).toString() === Object.entries(this.params.oldBankInfo).toString()) //true
console.log(Object.entries(this.params.bankInfo).toString()) //accountType,2,nationality,CHN,bankName,,bankCode,
console.log(Object.entries(this.params.oldBankInfo).toString()) //accountType,2,nationality,CHN,bankName,,bankCode,
}

三、使用JSON.stringify()或。适用于俩个对象属性顺序相同

JavaScript代码

let bankInfo = {
accountType : 2,
nationality:'CHN', //国籍
bankName : '', //银行名称
bankCode : '', //银行code
}
let oldBankInfo = {
accountType : 2,
nationality:'CHN', //国籍
bankName : '', //银行名称
bankCode : '', //银行code
}
let flag2 = JSON.stringify(bankInfo) == JSON.stringify(oldBankInfo)
console.log(flag2)

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(62)

shell(bash)替换字符串大全

[

2023/08/16 11:13 | by 刘新修 ]

1. 替换（只替换一个）

用varrB=${varA/str1/str2}

C#代码

$ var="AAAszip_BBB.zip";var2=${var/zip/ZIP};echo $var2};
AAAsZIP_BBB.zip
$ var="AAAszip_BBB.zip";var2=${var/.zip/.ZIP};echo $var2;
AAAszip_BBB.ZIP

2. 替换（替换所有）

用varB=${varA//str1/str2}

C#代码

$ var="AAAszip_BBB.zip";var2=${var//zip/ZIP};echo $var2;
AAAsZIP_BBB.ZIP

3. 替换（替换开头一个）

用varB=${varA/#str1/str2}

C#代码

$ var=".zipAAAszip_BBB.zip_CCC";var2=${var/#.zip/.ZIP};echo $var2;
.ZIPAAAszip_BBB.zip_CCC

不存在
varB=${varA//#str1/str2}

4. 替换（替换结尾一个）

用varB=${varA/%str1/str2}

C#代码

$ var="AAAszip_BBB.zip_CCC.zip";var2=${var/%.zip/.ZIP};echo $var2;
AAAszip_BBB.zip_CCC.ZIP

不存在
varB=${varA//%str1/str2}

而且可以很好地匹配到“.”点号

5. 截取，删除右边，保留左边，从右起最短匹配

用$varB=${varAa%<pattern>}，

C#代码

$ a="aaa=bbb";b=${a%=*};echo $b
aaa
$ a="http://localhost:3000/china/shanghai.html";b=${a%/*};echo $b
http://localhost:3000/china

6. 截取，删除右边，保留左边，从右起最长匹配

用$varb=${vara%%<pattern>}从右起最长匹配

C#代码

$ a="http://localhost:3000/china/shanghai.html";b=${a%%/*};echo $b
http:

7. 截取，删除左边，保留右边，从左起最短匹配

用$varb=${vara#<pattern>}

C#代码

$ a="aaa=bbb";b=${a#*=};echo $b
bbb
$ a="http://localhost:3000/china/shanghai.html";b=${a#*/};echo $b
/localhost:3000/china/shanghai.html

8. 截取，删除左边，保留右边，从左起最长匹配

用$varb=${vara##<pattern>}从左起最长匹配

C#代码

$ a="http://localhost:3000/china/shanghai.html";b=${a##*/};echo $b
shanghai.html

Linux/Unix | 评论(0) | 引用(0) | 阅读(95)

Vue (preventReClick)防暴点 +防抖（debounce）和节流（throttle）函数

2. 防抖（debounce）

蓝盾发布平台，查看当前的版本号

Mock的基本语法及使用

vue封装定时器

创建自增ID用户表

获取JSON对象key及vulue

JS 中如何优雅的使用多层嵌套属性而不会发生报错

方法1：

方法2：

方法3：

方法4：

方法5：

Object.getOwnPropertyNames()

js比较俩个对象是否相等

shell(bash)替换字符串大全

1. 替换（只替换一个）

2. 替换（替换所有）

3. 替换（替换开头一个）

4. 替换（替换结尾一个）

5. 截取，删除右边，保留左边，从右起最短匹配

6. 截取，删除右边，保留左边，从右起最长匹配

7. 截取，删除左边，保留右边，从左起最短匹配

8. 截取，删除左边，保留右边，从左起最长匹配

分类

个人简介

Follow me

搜索

最新日志

新浪微博

最新评论

链接

归档

日历

其他

< 2023 > < 10 >
日	一	二	三	四	五	六
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31