H5/JS/CSS/
第一页 1 2 3 4 5 6 7 8 9 10 下页 最后页 [ 显示模式： 摘要 | 列表 ]

字符串遍历拼接、字符串局部清除、字符串局部插入，等逻辑

[不指定 2024/12/24 19:57 | by 刘新修 ]
JavaScript代码
  1. /*** 清空指定字符串之间的内容(包括起始字符) ***/  
  2. function deleteBetweenCharacters(str, startChar, endChar) {  
  3.     /*** 容错处理 ***/  
  4.     if (typeof(str) == 'undefined' ||  
  5.         typeof(startChar) == 'undefined' ||  
  6.         typeof(endChar) == 'undefined') {  
  7.         return false;  
  8.     }  
  9.   
  10.     /*** 起始替换逻辑 ***/  
  11.     let startIndex = str.indexOf(startChar);  
  12.     let endIndex = str.indexOf(endChar);  
  13.   
  14.     while (startIndex !== -1 && endIndex !== -1) {  
  15.         str = str.substring(0, startIndex) + str.substring(endIndex + 1);  
  16.         startIndex = str.indexOf(startChar);  
  17.         endIndex = str.indexOf(endChar);  
  18.     }  
  19.     return str;  
  20. }  
  21.   
  22. /*** 向字符串指定位置插入字符(业务标记符) ***/  
  23. function insertString(str, insertStr, index) {  
  24.     /*** 容错处理 ***/  
  25.     if (typeof(str) == 'undefined' ||  
  26.         typeof(insertStr) == 'undefined' ||  
  27.         typeof(index) == 'undefined') {  
  28.         return false;  
  29.     }  
  30.     return str.slice(0, index) + insertStr + str.slice(index);  
  31. }  
  32.   
  33. /*** 业务处理主函数 ***/  
  34. function main (str, startChar, endChar, itemNames) {  
  35.     /*** 容错处理 ***/  
  36.     if (typeof(str) == 'undefined' ||  
  37.         typeof(startChar) == 'undefined' ||  
  38.         typeof(endChar) == 'undefined' ||  
  39.         typeof(itemNames) == 'undefined') {  
  40.         return false;  
  41.     }  
  42.   
  43.     var newStrData = str;  
  44.     var startIndex = str.indexOf(startChar);  
  45.     /*** 如果是首次出现 ***/  
  46.     if (str.indexOf('--') == -1) {  
  47.         str = insertString(newStrData, '--', startIndex);  
  48.         /*** 调用清除方法 ***/  
  49.         let data = deleteBetweenCharacters(str, startChar, endChar);  
  50.         let replacedStr = data? data.replace(/--/g, itemNames) : '';  
  51.         return replacedStr;  
  52.     }  
  53. }  
  54. // 示例用法  
  55. // const inputString = "This is 【some】 example 【string】 with 【special】 characters.";  
  56. // const str = main(inputString, "【", "】")  
  57. // console.log(str);  
  58.   
  59. /*** 业务源数据 ***/  
  60. let dataList = [  
  61.     {idStorage: 1, name: 'red', riskItem: '', suggest: '建议核实【】实际配件价格，剔除多定金额。'},  
  62.     {idStorage: 1, name: 'red1', riskItem: '', suggest: '建议核实【高压电池包】【高压电池包】实际配件价格，剔除多定金额。'},  
  63.     {idStorage: 2, name: 'sese', riskItem: '', suggest: '建议核实【】实际配件价格，剔除多定金额。'},    
  64.     {idStorage: 1, name: 'red', riskItem: '', suggest: '建议核实【】实际配件价格，剔除多定金额。'},  
  65.     {idStorage: 3, name: 'bbbd', riskItem: '', suggest: '建议核实【】实际配件价格，剔除多定金额。'}  
  66.   ];  
  67.   
  68. /*** 拼接字符串小模板(备用) ***/  
  69. let itemNames = '【' + dataList.filter(item => item.idStorage === 1).map(item => item.name).join('】【') + '】';  
  70. console.log('itemNames', itemNames)  
  71.   
  72. /*** 拷贝源数据备用 ***/  
  73. var arr = JSON.parse(JSON.stringify(dataList))  
  74. for (var i = 0; i < arr.length; i++) {  
  75.     if (arr[i].idStorage == 1) {  
  76.         arr[i].suggest = main(arr[i].suggest, "【", "】", itemNames)  
  77.     }  
  78. }  
  79. console.log('arr', arr)  
JavaScript代码
  1. const inputString = "This is 【some】 example 【string】 with 【special】 characters.";  
  2. const str = deleteBetweenCharacters(inputString, "【", "】")  
  3. console.log(str);  
  4. //This is  example  with  characters.  

 

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

JS时间格式排序

[不指定 2024/12/17 22:15 | by 刘新修 ]
JavaScript代码
  1. /** 
  2.  * @description 2.根据日期时间混合排序 
  3.  * @param {Object[]} dataList - 要排序的数组 
  4.  * @param {string} property - 传入需要排序的字段 
  5.  * @param {boolean} bol - true: 升序；false: 降序；默认为true 升序 
  6.  * @return {Object[]} dataList - 返回改变完顺序的数组 
  7.  */  
  8. function dateSort(dataList, property, bol = true) {  
  9.   dataList.sort(function (a, b) {  
  10.     if (bol) {  
  11.       // return a[property].localeCompare(b[property]); // 升序  
  12.       return Date.parse(a[property]) - Date.parse(b[property]);  // 升序  
  13.     } else {  
  14.       // return b[property].localeCompare(a[property]); // 降序  
  15.       return Date.parse(b[property]) - Date.parse(a[property]);  // 降序  
  16.     }  
  17.   })  
  18.   return dataList;  
  19. }  
  20.   
  21. let arrList = [  
  22.       { id: 1, name: 'test1', score: 99, dateTime: '2024-03-25 13:51:03' },  
  23.       { id: 2, name: 'test2', score: 89, dateTime: '2024-03-24 23:01:52' },  
  24.       { id: 3, name: 'test3', score: 102, dateTime: '2024-03-15 01:51:12' },  
  25.       { id: 4, name: 'test4', score: 100, dateTime: '2024-03-23 10:30:39' },  
  26.       { id: 5, name: 'test5', score: 111, dateTime: '2024-03-23 11:21:42' },  
  27.     ]  
  28. // console.log('升序：', dateSort(arrList, 'dateTime')); // 升序  
  29. console.log('降序：', dateSort(arrList, 'dateTime', false)); // 降序  

 

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

fetch获取wasm模块实例

[不指定 2024/11/14 11:18 | by 刘新修 ]

fetch获取wasm模块实例

JavaScript代码
  1. /*** 完整的实例 ***/  
  2. fetch("/pkg/wasm-lib/wasm_lib_bg.wasm")  
  3.     .then((response) => response.arrayBuffer())  
  4.     .then(bytes => {  
  5.         var module = new WebAssembly.Module(bytes);  
  6.         var imports = {  
  7.             "__wbindgen_init_externref_table": ()=> {}  
  8.         };  
  9.         var instance = new WebAssembly  
  10.             .Instance(module, { wbg: imports});  
  11.         console.log(instance.exports.add(1,2));  
  12.     })  

axios获取wasm模块实例

JavaScript代码
  1. /*** 请求.wasm文件流 ***/  
  2. this.$store.dispatch("test/getWasmStream",{}).then(async (res) => {  
  3.     WebAssembly.compile(res.data).then(module => {  
  4.         // 使用编译好的模块  
  5.   
  6.         // 打印静态属性  
  7.         var imports = WebAssembly.Module.imports(module);  
  8.         var exports = WebAssembly.Module.exports(module);  
  9.         var strJSON = JSON.stringify({"imports":imports, "exports":exports}, null, 2)  
  10.         console.log('strJSON', strJSON)  
  11.   
  12.         var imports = {  
  13.             "__wbindgen_init_externref_table": ()=> {}  
  14.         };  
  15.   
  16.         /*** 使用WASM模块(运行实例) ***/  
  17.         var instance = new WebAssembly.Instance(module, {wbg: imports})  
  18.         //console.log(instance.exports.add(3,6))  
  19.   
  20.         this.exports = instance.exports;  
  21.   
  22.     }).catch(error => {  
  23.         console.error(error);  
  24.     });  
  25. }).catch((error)=> {  
  26.     console.log('Action failed', error);  
  27. });  

loadWebAssemblyModule.js 封装

JavaScript代码
  1. /* 
  2.  * @Description: loadWebAssemblyModule.js 
  3.  * @Version: 1.0 
  4.  * @Author: Jesse Liu 
  5.  * @Date: 2022-11-14 10:32:06 
  6.  * @LastEditors: Jesse Liu 
  7.  * @LastEditTime: 2024-11-14 10:55:25 
  8.  */  
  9.   
  10. /*** AJAX加载WASM模块的函数 ***/  
  11. const getWebAssemblyModule = (url) =>  {  
  12.     /*** 返回一个Promise ***/  
  13.     return new Promise(function(resolve, reject) {  
  14.         var xhr = new XMLHttpRequest();  
  15.         xhr.open('GET', url, true);  
  16.         xhr.responseType = 'arraybuffer';  
  17.         xhr.onload = function() {  
  18.             if (xhr.status === 200) {  
  19.                 // 加载成功，编译WASM模块  
  20.                 var arrayBuffer = xhr.response;  
  21.                 WebAssembly.compile(arrayBuffer).then(function(module) {  
  22.                     resolve(module);  
  23.                 }).catch(function(error) {  
  24.                     reject(error);  
  25.                 });  
  26.             } else {  
  27.                 // 出错了  
  28.                 reject(new Error('Error loading WASM module: ' + xhr.statusText));  
  29.             }  
  30.         };  
  31.         xhr.send();  
  32.     });  
  33. }  
  34.   
  35. /*** fetch加载WASM模块的函数 ***/  
  36. const fetchWebAssemblyModule = (url) =>  {  
  37.     /*** 返回一个Promise ***/  
  38.     return new Promise(function(resolve, reject) {  
  39.         fetch(url)  
  40.         .then((response) => response.arrayBuffer())  
  41.         .then(bytes => {  
  42.             var module = new WebAssembly.Module(bytes);  
  43.             resolve(module);  
  44.         })  
  45.         .catch(error => {  
  46.             console.error('Fetch 错误:', error)  
  47.             reject(error);  
  48.         });  
  49.     });  
  50. }  
  51.   
  52. export { fetchWebAssemblyModule, getWebAssemblyModule };  

 

 

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

原生JS获取公网IP地址

[不指定 2024/10/11 16:39 | by 刘新修 ]
JavaScript代码
  1. function getUserIP(callback) {  
  2.     var ip_dups = {};  
  3.     var RTCPeerConnection = window.RTCPeerConnection  
  4.         || window.mozRTCPeerConnection  
  5.         || window.webkitRTCPeerConnection;  
  6.     var useWebKit = !!window.webkitRTCPeerConnection;  
  7.     var mediaConstraints = {  
  8.         optional: [{RtpDataChannels: true}]  
  9.     };  
  10.     var servers = {  
  11.         iceServers: [  
  12.             {urls: "stun:stun.services.mozilla.com"},  
  13.             {urls: "stun:stun.l.google.com:19302"},  
  14.         ]  
  15.     };  
  16.     var pc = new RTCPeerConnection(servers, mediaConstraints);  
  17.     function handleCandidate(candidate){  
  18.         var ip_regex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/  
  19.         var hasIp = ip_regex.exec(candidate)  
  20.         if (hasIp) {  
  21.             var ip_addr = ip_regex.exec(candidate)[1];  
  22.             if(ip_dups[ip_addr] === undefined)  
  23.                 callback(ip_addr);  
  24.             ip_dups[ip_addr] = true;  
  25.         }  
  26.     }  
  27.     pc.onicecandidate = function(ice){  
  28.         if(ice.candidate) {  
  29.             handleCandidate(ice.candidate.candidate);  
  30.         }    
  31.     };  
  32.     pc.createDataChannel("");  
  33.     pc.createOffer(function(result){  
  34.       pc.setLocalDescription(result, function(){}, function(){});  
  35.     }, function(){});  
  36.     setTimeout(function(){  
  37.         var lines = pc.localDescription.sdp.split('\n');  
  38.         lines.forEach(function(line){  
  39.             if(line.indexOf('a=candidate:') === 0)  
  40.                 handleCandidate(line);  
  41.         });  
  42.     }, 1000);  
  43. }  
  44.   
  45.   
  46. getUserIP((ip) => {  
  47.   console.log("ipppp === ",ip)  
  48.   //ipppp ===  121.90.11.160  
  49. })  
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(462)

js的Blob以及和File、base64的转化

[不指定 2024/08/02 11:27 | by 刘新修 ]

Blob是什么

在JavaScript中，Blob（二进制大对象）对象是一种用于表示原始数据的类文件对象，它存储了任意类型的数据，通常是二进制数据，但也可以包含文本数据或其他格式的数据。Blob对象通常用于在客户端浏览器中处理二进制数据，比如文件上传、数据传输等场景。（Blob对象可以将任意类型的数据转换为二进制形式进行存储和处理。这使得Blob对象成为处理各种数据类型的有效工具，包括文本、图像、音频、视频等。在JavaScript中，Blob对象提供了一种统一的接口来处理这些数据，无论是从用户上传的文件中获取数据，还是从其他来源获取数据，都可以使用Blob对象来进行二进制处理。）

Blob的用途

Blob对象常见的使用情况包括：

  • 文件上传：当用户通过网页上传文件时，浏览器会创建一个Blob对象来表示上传的文件数据，然后可以将该Blob对象发送到服务器端进行处理。

  • 数据传输：在客户端与服务器端进行数据交互时，可以使用Blob对象来存储和传输二进制数据，例如通过XMLHttpRequest或Fetch API发送Blob对象。

  • 图像处理：在客户端对图像进行处理时，可以将图像数据存储在Blob对象中，并通过Canvas API等技术进行操作和显示。

  • 媒体处理：在处理音频或视频等媒体数据时，可以使用Blob对象来存储和处理媒体数据。

和file文件流的关系

以下是Blob对象和File对象之间的联系和区别：

  • Blob对象：
    Blob对象是二进制数据的容器，可以包含任意类型的数据，如文本、图像、音频或视频等。
    可以通过构造函数 new Blob(data, options) 创建 Blob 对象，其中 data 是包含数据的数组或数组缓冲区，options 是一个可选对象，用于指定 Blob 的 MIME 类型和结束符等信息。

  • File对象：
    File对象是Blob对象的一种扩展，通常用于表示用户系统中的文件，具有文件名和最后修改日期等属性。
    可以通过 new File(data, name, options) 构造函数创建 File 对象，其中 data 是包含数据的数组或数组缓冲区，name 是文件名，options 是一个可选对象，用于指定文件的 MIME 类型和最后修改日期等信息。

联系与区别：
File对象是Blob对象的子类，因此所有可以对Blob对象执行的操作也同样适用于File对象。
File对象在表示文件时具有额外的元数据，如文件名和最后修改日期等。
在实际使用中，Blob对象通常用于处理二进制数据，而File对象则用于处理用户系统中的文件，如文件上传和操作。

因此，可以说File对象是Blob对象的一种特殊情况，用于在JavaScript中表示用户系统中的文件，并提供了额外的文件相关的属性。

Blob和File文件流，base64的转化

Blob对象转文件： 可以使用File构造函数将Blob对象转换为文件对象。File构造函数接受一个Blob对象和一个文件名作为参数，然后返回一个文件对象。

JavaScript代码
  1. var blob = new Blob(["blob data"], { type: "text/plain" });  
  2. var file = new File([blob], "filename.txt");  

Blob对象转Base64： 可以使用FileReader对象将Blob对象转换为Base64编码的字符串。FileReader对象可以读取Blob对象中的数据，并以指定的编码格式输出。

JavaScript代码
  1. var blob = new Blob(["blob data"], { type: "text/plain" });  
  2. var reader = new FileReader();  
  3. reader.readAsDataURL(blob);  
  4. reader.onload = function () {  
  5.   var base64String = reader.result;  
  6. };  

Base64转Blob对象： 可以将Base64编码的字符串转换回Blob对象。这可以通过创建一个新的Blob对象并指定Base64字符串的数据类型完成。

JavaScript代码
  1. var base64String = "base64 data";  
  2. var byteCharacters = atob(base64String);  
  3. var byteNumbers = new Array(byteCharacters.length);  
  4. for (var i = 0; i < byteCharacters.length; i++) {  
  5.   byteNumbers[i] = byteCharacters.charCodeAt(i);  
  6. }  
  7. var byteArray = new Uint8Array(byteNumbers);  
  8. var blob = new Blob([byteArray], { type: "image/jpeg" });  
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(1029)

js格式化iso 8601格式的日期为其他格式-处理默认golang time类型格式问题

[不指定 2024/07/25 10:29 | by 刘新修 ]

golang time类型格式默认序列化为json的时候，是iso 8601格式

比如：2023-03-09T23:43:43+08:00

ISO 8601 格式的时间表示法，常用于表示世界范围内的时间和日期。ISO 8601 格式使用连字符 "-" 分隔日期和时间部分，并以字母 "T" 分隔日期和时间部分，其中 "T" 后面跟着时间部分。在这个时间表示中，"2023-03-09" 表示日期部分，"23:43:43+08:00" 表示时间部分和时区偏移量。其中，"+08:00" 表示相对于 UTC 时间偏移了 8 个小时，也就是北京时间。

//[ISO 8601标准中的日期和时间格式解析]

//2024-07-24T15:36:00+08:00 (要使用"+08:00",UTC时间偏移了8个小时，也就是北京时间:表示东八区)

//2024-07-24T15:36:00-05:00 (而"-05:00"则表示西五区的美国东部时间)

//其中"T"用来分割日期和时间，时间后面跟着的"-07:00"表示西七区，注意"-"是连字符，不是减号

//其中"Z"为UTC时区标识

JS - ISO 8601格式时间，转换时间戳方法

JavaScript代码
  1. /*** ISO日期时间戳转时间对象 ***/  
  2. const isoString = '2021-03-25T15:00:00Z';  
  3. const date = new Date(isoString);  
  4.   
  5. /*** 时间对象转ISO日期时间戳字符串 ***/  
  6. const date = new Date();  
  7. const isoString = date.toISOString();  

 

JS时区转换方法

JavaScript代码
  1. //UTC时区时间  
  2. var iso8601String = "2022-01-01T12:00:00.000Z";  
  3. var date = new Date(iso8601String);  
  4. console.log('date', date)  
  5.   
  6. //打印转换的时间戳  
  7. var utcStr = date.toUTCString(); //转换为UTC字符串  
  8. var ut_localTimeString = date.toLocaleString("en-US", {timeZone: "UTC", hour12: false});                //UTC等于伦敦0时区  
  9. var uk_localTimeString = date.toLocaleString("en-US", {timeZone: "Europe/London", hour12: false});      //欧洲-伦敦  
  10. var us_localTimeString = date.toLocaleString("en-US", {timeZone: "America/New_York", hour12: false});   //北美-纽约  
  11. var cn_localTimeString = date.toLocaleString("en-US", {timeZone: "Asia/Shanghai", hour12: false});      //亚洲-上海  
  12. //console.log('utcStr', utcStr)  
  13. console.log('ut_localTimeString(UTC)', ut_localTimeString);  
  14. console.log('uk_localTimeString(UK)', uk_localTimeString);  
  15. console.log('us_localTimeString(US)', us_localTimeString);  
  16. console.log('cn_localTimeString(CN)', cn_localTimeString);  

 

如下JS格式化时间方法

JavaScript代码
  1. function formatDate(dateString, format = 'yyyy-MM-dd HH:mm:ss') {  
  2.   const date = new Date(dateString);  
  3.   
  4.   const year = date.getFullYear();  
  5.   const month = String(date.getMonth() + 1).padStart(2, '0');  
  6.   const day = String(date.getDate()).padStart(2, '0');  
  7.   const hour = String(date.getHours()).padStart(2, '0');  
  8.   const minute = String(date.getMinutes()).padStart(2, '0');  
  9.   const second = String(date.getSeconds()).padStart(2, '0');  
  10.   
  11.   const formattedDate = format  
  12.     .replace(/yyyy/g, year)  
  13.     .replace(/MM/g, month)  
  14.     .replace(/dd/g, day)  
  15.     .replace(/HH/g, hour)  
  16.     .replace(/mm/g, minute)  
  17.     .replace(/ss/g, second);  
  18.   
  19.   return formattedDate;  
  20. }  
  21.   
  22. // 示例用法  
  23. console.log(formatDate('2022-03-09 23:43:43')); // 输出：2022-03-09 23:43:43  
  24. console.log(formatDate('03/09/2022', 'yyyy年MM月dd日')); // 输出：2022年03月09日  
  25. console.log(formatDate('09 Mar 2022 23:43:43 GMT', 'yyyy-MM-dd HH:mm:ss')); // 输出：2022-03-09 23:43:43  

 

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

解决JS两数相加的精度问题

[不指定 2024/07/11 08:40 | by 刘新修 ]

JS中小数相加存在的精度问题

首先来看一段示例：

JavaScript代码
  1. console.log(0.1+0.2);//0.30000000000000004  
  2. console.log(0.2+0.7);//0.8999999999999999  

JS中两数小数相加产生精度问题的原因：

1、js中的数字类型只有number类型，不区分浮点型和整形，直接以浮点型double类型（双精度浮点类型）参与运算。

2、十进制数在做加减法运算前，首先转换为二进制类型再做相加减运算。

3、一些浮点数在转换为二进制数是会出现无线循环的情况，但由于double数据类型是以64位存储表示一个数据，其中第1位为符号位，第2位到第12位为指数位，其余52位为小数位，如此一来，一些浮点数转换为二进制产生无限循环的情况下，double类型数据只能存储64位，所以产生精度缺失问题。

解决办法

该方法仅为其中一个办法：

JavaScript代码
  1. <script>  
  2.         // 精确乘法计算  
  3.         function FloatMul(arg1, arg2) {  
  4.             var m = 0,  
  5.             s1 = arg1.toString(),//将第一个数据转换成字符出类型  
  6.             s2 = arg2.toString();//将第二个数据转换成字符出类型  
  7.             try {  
  8.             m += s1.split(".")[1].length;//截取数据的小数部分，得到小数位数  
  9.             } catch (e) {}  
  10.             try {  
  11.             m += s2.split(".")[1].length;//截取数据的小数部分，得到小数位数  
  12.             //将两个数据的小数位数长度相加  
  13.             } catch (e) {}  
  14.             var result = (Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) / Math.pow(10, m);//将两个数扩大对应的小数位数倍转换成数字类型在相乘，乘完再除于对应的扩大倍数得到最终结果  
  15.             return isNaN(result) ? 0 : result;  
  16.         }  
  17.   
  18.         //获得两个小数相加的精确值  
  19.         const accountAdd = (arg1, arg2) => {  
  20.             let r1, r2, m;  
  21.             try {  
  22.             r1 = arg1.toString().split(".")[1].length;//将第一个数据转换成字符出类型，截取数据的小数部分，得到小数位数  
  23.             } catch (e) {  
  24.             r1 = 0;  
  25.             }  
  26.             try {  
  27.             r2 = arg2.toString().split(".")[1].length;//将第一个数据转换成字符出类型，截取数据的小数部分，得到小数位数  
  28.             } catch (e) {  
  29.             r2 = 0;  
  30.             }  
  31.             m = Math.pow(10, Math.max(r1, r2));//取出得到的最长位数，将10扩大最长位数倍  
  32.             return (FloatMul(arg1, m) + FloatMul(arg2, m)) / m;  
  33.         };  
  34.   
  35.         let sum = accountAdd(2.3443, -1.987);  
  36.         console.log(sum);//0.3573  
  37.     </script>  

思路：

1、先将两个小数数据用精确乘法扩大相同倍数，扩大后相加再处于扩大倍数得到最后结果。

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

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

[不指定 2023/09/27 18:49 | by 刘新修 ]

 1. 防暴点（preventReClick）

快速点击按钮时会频繁重复调用接口，为了防止这种情况，要对相应的按钮进行防暴力重复点击处理，最好是使用函数防抖或者函数截流来处理，但是现在已经要修改的按钮太多了，于是换一种方法，用指令的方式来达到相识的效果。
1.创建utils文件夹，在该文件夹下创建preventReClick.js文件
JavaScript代码
  1. export default {  
  2.     install(Vue) {  
  3.         Vue.directive('preventReClick', {  
  4.             inserted: function (el, binding) {  
  5.                 console.log(el.disabled)  
  6.                 el.addEventListener('click', (e) => {  
  7.                     if (!el.disabled) {  
  8.                         el.disabled = true  
  9.                         setTimeout(() => {  
  10.                             el.disabled = false  
  11.                         }, binding.value || 3000)  
  12.                         //binding.value可以自行设置。如果设置了则跟着设置的时间走  
  13.                         //例如：v-preventReClick='500'  
  14.                     } else { // disabled为true时，阻止默认的@click事件  
  15.                         e.preventDefault()  
  16.                         e.stopPropagation()  
  17.                     }  
  18.                 })  
  19.             }  
  20.         }),  
  21.     }  
2.在main.js中全局引用
JavaScript代码
  1. // 防止多次点击  
  2. import preventReClick from '@/util/preventReClick '  
  3. Vue.use(preventReClick);  
3.在触发事件的按钮上就可以直接使用指令(button按钮和其他元素都可)
JavaScript代码
  1. <div class="comment-btn" @click="submitMes()" v-preventReClick="3000">发送</div>  
  2. <el-button @click="submitMes()" v-preventReClick="3000">发送</el-button>  

2. 防抖（debounce）

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

JavaScript代码
  1. /** 
  2.  * @description 函数防抖 触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。 
  3.  * @param {Function} func 需要执行的函数 
  4.  * @param {Number} wait 间隔时间 默认200ms 
  5.  * @param {Boolean} immediate  是否立即执行 true(默认) 表立即执行，false 表非立即执行 
  6.  * @return {*} 
  7.  */  
  8. export function VueDebounce(func, wait = 200, immediate = true) {  
  9.     let timeout = null;  // 定时器  
  10.     return function () {  
  11.         let that = this, // this对象  
  12.             args = arguments; // 参数  
  13.         if (timeout) clearTimeout(timeout);  
  14.         if (immediate === true) { // 立即执行  
  15.             var callNow = !timeout;  
  16.             timeout = setTimeout(() => {  
  17.                 timeout = null;  
  18.             }, wait)  
  19.             if (callNow) {  
  20.                 // func.apply(that, args); // 普通用法  
  21.                 that[func](...args); // vue用法  
  22.             }  
  23.         }  
  24.         else { // 非立即执行  
  25.             timeout = setTimeout(() => {  
  26.                 // func.apply(this, args); // 普通用法  
  27.                 that[func](...args); // vue用法  
  28.             }, wait);  
  29.         }  
  30.     }  
  31. }  

用法：

JavaScript代码
  1. import {VueDebounce} from "@/util/index"  
  2. methods: {  
  3.     /** 
  4.      * 点击事件 函数防抖 
  5.      * 用法：<el-button @click="debounceHandel">点击测试</el-button> 
  6.      */  
  7.     debounceHandel: VueDebounce("handlerFunc"),  
  8.    
  9.     /** 
  10.      * 点击事件：真正执行的函数 
  11.      */  
  12.     handlerFunc(type) {  
  13.       console.log("测试防抖事件");  
  14.       this.$emit("click","这是参数"); // 如果用普通用法，则这里会找不到$emit，因为this还往上继承了vue的对象  
  15.     },  
  16.   }  
  17.    

3. 节流（throttle）

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

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

JavaScript代码
  1. * @description 函数节流  
  2. * @param {Function} func 函数  
  3. * @param {Number} wait 延迟执行毫秒数,默认200  
  4. * @param {Number} type 1 表时间戳版，2 表定时器版  
  5. */  
  6. xport function VueThrottle(func, wait=200 ,type) {  
  7.    if(type===1){  
  8.        let previous = 0;  
  9.    }else if(type===2){  
  10.        let timeout;  
  11.    }  
  12.    return function() {  
  13.        let that= this;  
  14.        let args = arguments;  
  15.        if(type===1){  
  16.            let now = Date.now();  
  17.   
  18.            if (now - previous > wait) {  
  19.                // func.apply(that, args); // 普通用法  
  20.                that[func](...args); // vue用法  
  21.                previous = now;  
  22.            }  
  23.        }else if(type===2){  
  24.            if (!timeout) {  
  25.                timeout = setTimeout(() => {  
  26.                    timeout = null;  
  27.                    // func.apply(that, args)  
  28.                    that[func](...args); // vue用法  
  29.                }, wait)  
  30.            }  
  31.        }  
  32.    }  

用法：

JavaScript代码
  1. import {VueThrottle} from "@/util/index"  
  2. methods: {  
  3.     /** 
  4.      * 点击事件 函数防抖 
  5.      * 用法：<el-button @click="throttleHandel">点击测试</el-button> 
  6.      */  
  7.     throttleHandel: VueThrottle("handlerFunc"),  
  8.    
  9.     /** 
  10.      * 点击事件：真正执行的函数 
  11.      */  
  12.     handlerFunc(type) {  
  13.       console.log("测试防抖事件");  
  14.       this.$emit("click","这是参数"); // 如果用普通用法，则这里会找不到$emit，因为this还往上继承了vue的对象  
  15.     },  
  16.   }  
  17.    
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(1720)

Mock的基本语法及使用

[不指定 2023/09/08 15:17 | by 刘新修 ]
JavaScript代码
  1. //定义/mock/index.js  
  2.   
  3. import Mock from 'mockjs'  
  4. Mock.mock("/api/login", {  
  5.     code: 200,  
  6.     msg: "登陆成功",  
  7.     user: {  
  8.         name: "zeng8",  
  9.         score: 2048,  
  10.         rank: 10  
  11.     },  
  12.     token: "kjkjalsdiiuioayeuryqowierqiwerqowiery"  
  13. })  
  14. // url可以使用正则匹配  
  15. // 拦截get请求，返回评论数据  
  16. Mock.mock(/\/api\/feed/, "get", function(config) {  
  17.     //console.log("config" , config );  
  18.     //通过config可以获取到前端发给服务器的数据  
  19.     var po = config.url.indexOf("?"); //获取问号的位置  
  20.     if (po != -1) {  
  21.         var query = config.url.slice(po + 1); //获取到查询参数current=4转换为{current: 4}  
  22.         var arr = query.split("&"); //按&分割为数组  
  23.         var search = {}; //定义个对象  
  24.         arr.forEach(item => {  
  25.             var temp = item.split("="); //把数组每个元素按等于分割[current,4]  
  26.             search[temp[0]] = temp[1]; //search[ "current"] =4  
  27.   
  28.         })  
  29.     }  
  30.   
  31.     // 返回一个随机数据  
  32.     return Mock.mock({  
  33.         "code": 0,  
  34.         "data|4": [{  
  35.             id: "@id",  
  36.             msg: "@cparagraph(2,3)", //段落2-3行  
  37.             name: "@cname", //随机中文名  
  38.             date: "@datetime" //随机日期  
  39.         }],  
  40.         "pagnation": {  
  41.             "total|10-25": 1,  
  42.             "size": 4,  
  43.             "pageTotal|4-10": 1,  
  44.             "current": search.current,  
  45.         }  
  46.     })  
  47. })  
  48.   
  49. Mock.mock("/api/test", Mock.mock({  
  50.     name: "@cname", //随机中文名  
  51.     "age|100-200": 1, //100-200的随机数  
  52.     "price|10-50.2-5": 1, //10-50随机数 小数点2-5位  
  53.     "live|1-2": true, //随机true或false  
  54.     "start|1-5": "⭐", //把字符串重复1-5次  
  55.     "friend|2": ["小红", "小明", "小刚", "小白", "小蓝"], //1是挑一个大于1是重复n次  
  56.     "props|1-3": {  
  57.         name: "mm",  
  58.         age: 22,  
  59.         leg: 2,  
  60.         job: "web",  
  61.         eye: 2  
  62.     },  
  63.     "tel": /13\d{9}/,  
  64.     "des": function() {  
  65.         return `大家好，我的名字是${this.name}，今年${this.age}岁`  
  66.     },  
  67.     "data|10": [{  
  68.         "id|+1": 1024,  
  69.         "ID": "@id",  
  70.         date: "@date",  
  71.         time: "@time",  
  72.         datetime: "@datetime",  
  73.         name: "@cname",  
  74.         pic: "@dataImage('200x100')",  
  75.         description: "@cparagraph(1,3)",  
  76.         title: "@ctitle(8,12)",  
  77.         url: /http:\/\/www\.[a-z]{2,8}\.(com|cn|org)/,  
  78.         email: /[4-8]@\.(126|qq|163)\.(com|cn|org)/,  
  79.         address: "@county(true)", //省市区地址  
  80.     }]  
  81. }))  
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(1463)

vue封装定时器

[不指定 2023/09/07 13:29 | by 刘新修 ]

main.js 文件

JavaScript代码
  1. /*** sleep ***/  
  2. Vue.prototype.$sleep = time => {  
  3.   return new Promise((resolve, reject) => {  
  4.     window.setTimeout(() => {  
  5.       resolve(true)  
  6.     }, time)  
  7.   })  
  8. }  

增加测试页面

XML/HTML代码
  1. <!--  
  2. * @Description: npage.vue  
  3. * @Version: 1.0  
  4. * @Author: Jesse Liu
  5. * @Date: 2022-08-01 20:32:06  
  6. * @LastEditors: Jesse Liu  
  7. * @LastEditTime: 2023-09-07 13:24:11  
  8. -->  
  9. <template>  
  10.   <div class="wscn-http404-container">  
  11.       <h2 style="font-weight: normal; line-height: 160%;">userInfo ========= {{ userInfo }}</h2>  
  12.       <h2 style="font-weight: normal; line-height: 160%;">configInformation ========= {{ configInformation }}</h2>  
  13.       <h1 style="line-height:300px; text-align:center">npage.vue (新测试文件)</h1>  
  14.       <div>time:</div>  
  15.   </div>  
  16. </template>  
  17.   
  18. <script>  
  19. import { mapState } from "vuex";  
  20. import { parseTime } from '@/utils'  
  21. import { downloadFile } from "@/utils/getFile";  
  22. export default {  
  23.   name: 'PageTest',  
  24.   computed: {  
  25.     ...mapState("user", ["userInfo","configInformation"]),  
  26.     message() {  
  27.       return 'PageTest'  
  28.     },  
  29.     parseTime: parseTime  
  30.   },  
  31.   mounted() {  
  32.   
  33.     this.$store.dispatch("case/casesList/downloadFile",{}).then((res)=>{  
  34.         // let data = res.data;  
  35.         // let headers = res.headers;  
  36.           
  37.         // /*** 调用下载文件 ***/  
  38.         // downloadFile(data, headers)  
  39.     })  
  40.   
  41.     /*** 多定时器同时调用 ***/  
  42.     this.getStateA();  
  43.     this.getStateB();  
  44.   
  45.     /*** 业务请求接口调用示例 ***/  
  46.     this.casePage();  
  47.   },  
  48.   methods: {  
  49.     /*** 定时器演示方法 ***/  
  50.     async getStateA(){  
  51.   
  52.         /*** 定时器只管计算时间钩子标记 ***/  
  53.         console.log('sleepStateA ~~~ 开始')  
  54.   
  55.         /*** 多定时处理任务A ***/  
  56.         console.time('sleepStateA');  
  57.         let sleepStateA = await this.$sleep(5000);  
  58.         console.log('sleepStateA ~~~ 结束', sleepStateA)  
  59.         console.timeEnd('sleepStateA');  
  60.   
  61.         return sleepStateA;  
  62.     },  
  63.     /*** 定时器演示方法 ***/  
  64.     async getStateB(){  
  65.   
  66.         /*** 定时器只管计算时间钩子标记 ***/  
  67.         console.log('sleepStateB ~~~ 开始')  
  68.   
  69.         /*** 多定时处理任务B ***/  
  70.         console.time('sleepStateB');  
  71.         let sleepStateB = await this.$sleep(10000);  
  72.         console.log('sleepStateB ~~~ 结束', sleepStateB)  
  73.         console.timeEnd('sleepStateB');  
  74.   
  75.         return sleepStateB;  
  76.     },  
  77.   
  78.     /*** 模拟示例业务的状态 ***/  
  79.     async getCaseState(){  
  80.   
  81.         /*** 定时器只管计算时间钩子标记 ***/  
  82.         let sleepStateCase = await this.$sleep(10000);  
  83.         return sleepStateCase;  
  84.     },  
  85.     /*** 模拟示例业务主方法 ***/  
  86.     async casePage(state = true, n = 0){  
  87.   
  88.         /*** 定义及获取数据状态 ***/  
  89.         let runling = true;  
  90.         let getCaseState = await this.getCaseState();  
  91.   
  92.         /*** 业务逻辑处理及使用 ***/  
  93.         if(state && getCaseState) {  
  94.             /*** 请求接口拿状态和后端约定状态码(根据状态码去更改runling的布尔值) ***/  
  95.             // 写你的vuex调用方法，如：this.$store.dispatch('user/record', {})  
  96.   
  97.   
  98.             /*** 以下代码是为了演示模拟3次请求后，状态变更，供参考 ***/  
  99.             /*** 假设后端接口告诉你可以终止执行调用的状态 (比如后端调用3次后就更改了状态) ***/  
  100.             let index = n;  
  101.                 index +=1;  
  102.                 console.log('第['+ index + ']次调用后端接口~~');  
  103.   
  104.                 if(index >= 3) {  
  105.                   runling = false;  
  106.                 }  
  107.             this.casePage(runling, index);  
  108.         }  
  109.         else{  
  110.             console.log('===========================================\n定时器已经结束关停，累计调用共: ' + n + '次~~');  
  111.         }  
  112.     }  
  113.   
  114.   }  
  115. }  
  116. </script>  
  117.   
  118.   
  119. <style lang="scss" scoped>  
  120. </style>  

 

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(1379)
第一页 1 2 3 4 5 6 7 8 9 10 下页 最后页 [ 显示模式： 摘要 | 列表 ]