JiaPeng366-CSDN博客

1、概念防抖：指在事件被触发的n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。节流：指在单位时间内，只能有一次触发事件的回调函数执行，如果在同一单位时间内事件再次被触发，则不生效。2、应用场景防抖：表单验证需要服务端配合，如input输入用户名，需要在输入过程中查询该用户是否注册过，连续的输入事件只有最后一次执行请求操作。节流：检测浏览器的resize事件，根据resize的变化需要实时计算的大小和位置的场景。连续的事件调用，会变成每单位时间只触发一次回调。3、函数实现函数防抖的实现

2022-04-08 10:47:17 443

原创 app嵌套H5与原生交互的方法

今天记录一下自己写的H5嵌套到原生app后，与原生app交互的方法。我在开发中的使用场景是这样的：用户在H5页面输入手机号，输入完后去手机通讯录查找，如果有就把通讯录存的名字拿过来，下面是代码。//输入手机号的input框失去焦点时，先判断手机号是否符合手机号规则，如果符合就调用下面的getPhoneName方法。//根据手机号查询通讯录中的名字触发与原生交互function getPhoneName(phone){ // 判断时苹果手机还是安卓手机，因为不同手机交互方法不一样。 if(/(

2020-08-18 10:23:12 1375

原创 js 数字千分位加逗号

今天记录一下上周写的一个js功能，数字千分位加逗号的方法，网上查了一下，有很多方法，下面把我使用的方法记录下来。function thousands (num) { if (num) { var str = num.toString() var reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g return str.replace(reg, '$1,') } els

2020-08-11 10:39:20 817

原创 vue select change事件传递自定义参数

今天记录一个小问题，最近get到的一个方法，不太常用，记录一下，增强记忆吧。之前在vue项目中，也经常使用select标签，也经常用change事件，经常用的change事件中，一直有个默认参数，就是选中的选项的信息，最近一个需求除了需了选中项信息外，还需要其他的参数，今天记录一下这种传参方式，直接上代码。// 普通用法，没有自定义参数@change="handleChange()"handleChange (value) { // value 是change事件默认传的信息}// 需要

2020-08-06 17:26:27 14921 6

原创 vue input v-model输入实时转大写（vue watch深度监听）

最近写录入车牌号的功能，产品让实现输入字母自动转化为大写，其实这个很容易实现，也有很多种方法实现，我是在vue项目中写的，今天记录一下我的实现方式，顺便带出来一个知识点”深度监听“。<div id="app"> <input v-model="addCarData.plateNumber" type="text" name=""></div>data: { addCarData: { plateNumber: '' }},watch: {

2020-07-30 16:31:44 1563

原创前端canvas画玉珏图（四分之三圆环进度条）

今天分享给大家的是玉珏(jue)图，本周做技术预言，看到设计里有个好看又奇怪的图，然后echart、heightChart找了一遍，并没有找到demo，百度查了一圈，还是没找到demo，不过看了一遍文章受到启发，决定自己写个demo。首先看下设计图首先看到的是四分之三圆。然后在四分之三圆中有个类似进度条的圆弧。只能用canvas画了，下面直接上代码...

2020-07-25 13:08:58 2234 1

原创 js跳出循环的三种方法(break, return, continue)

今天总结一下js种跳出循环的方法(return, break, continue)，并分别介绍一下用法、特点和区别。1、return语句首先来说return语句，return不只能用来跳出循环，一般常用在函数内部，来停止函数执行，并返回一个东西，今天只介绍他在跳出循环时的用法。for (var i = 1; i <= 5; i++) { if (i === 3) { return; } console.log(i); // Uncaught SyntaxError: Il

2020-07-17 16:07:45 21937 1

原创 JS浮点运算的精度问题

今天说一下js中 0.1 + 0.2 不等于 0.3 的问题有些同学没有遇到过这类问题，想试试的同学可以试一下下面的代码console.log(0.1 + 0.2); // 0.30000000000000004console.log(0.3 - 0.1); // 0.19999999999999998是不是很有意思，为什么会出现这样的情况呢，简单总结一下其实不光加法和减法运算，乘法和除法也会出现这样的情况，有人说是不是js计算有问题，当然不是，js这么厉害的语言怎么会有这种低级错误，总的来

2020-07-10 15:00:47 399

转载 js的执行顺序

前几天一个前端的朋友拿出来一道题，特别有意思，随意改动一下就会有意想不到的结果，答错两次之后，发现自己在js执行顺序的掌握上还是有所欠缺。研究了几天，总算是明白了，在此特别感谢简书上的一篇文章，讲的很详细，让我有种恍然大悟的感觉。文章最后会把文章链接附上。故事是从一道题开始的 async function async1() { console.log('async1 start'); await async2(); console.log('async1 end');

2020-07-03 15:44:11 594

原创 js常用正则表达式（个人常用整理和维护）

干前端这么多年，项目中也用了好多正则表达式，感觉有必要整理一个自己的正则表达式库，记录并经常维护，方便自己以后的使用。最后一次维护时间2020-07-02_numberReg: /^[0-9]*$/, // 数字_lengthNumberReg: /^\d{n}$/, // n位数字_minLengthNumberReg: /^\d{n}$/, // 至少n位数字_textReg: /^[\u4e00-\u9fa5]{0,}$/, // 汉字

2020-07-02 13:46:44 258

原创 event对象中 target 和 currentTarget 的区别

从概念上来说event.target 返回触发事件的元素event.currentTarget 返回绑定事件的元素只看这两句话不够直观，下面看代码<div id="btn">click me</div><script type="text/javascript"> var btn = document.getElementById('btn'); btn.onclick = function (event) { c

2020-06-24 17:19:58 291

原创 js数组循环常用的几种方法

1、for循环最基本的循环方式，也是速度比较快，效率比较高的循环方式，var arr = [1,2,3,4,5];for (var i = 0; i < arr.length; i++) { console.log(arr[i]);}2、forEach循环历数组中的每一项，没有返回值，对原数组没有影响，不支持IE，break无法跳出循环，retrun只能跳出当前循环，无法终止循环。var arr = [1,2,3,4,5];arr.forEach(function (item, i

2020-06-18 17:46:45 26949 1

原创 CSS3之filter(滤镜) 属性

前段时间，4月4号那天，新冠肺炎哀悼日那天，好多网站和APP，主题都变成了灰色，当时就感觉这些网站和APP太有心了。我一直以为这是一套主题呢，后来我查了下实现方式，原来css3有个属性filter，一行代码就能实现。知道了这个方式后也只是记到了脑子里，并没有写下来。前几天一个需求，弹窗背景要做成模糊半透明的效果，查了下实现方式，还是用到了那个filter属性，感觉有必要把这个属性记录下来，加深自己记忆的同时，也分享给大家。1、主题变成灰色首先看下效果图，正常情况下变灰之后实现方式其实很简单，运用

2020-06-13 15:08:39 437

原创 js递归方式实现深拷贝

上篇文章提到了对象的浅拷贝和深拷贝，当时深拷贝使用的是最简单的方法，如下JSON.parse(JSON.stringify(obj))这个方法能实现简单数据的深拷贝，但是对于复杂对象还是有局限性的，比如说会把时间对象转化成字符串，会丢失函数等等。今天亲自封装一个方法，来实现深拷贝。原理就是先判断各个字段类型，然后用递归解决嵌套数据。// 获取数据类型， js获取数据类型也有很多方法，我用了比较严谨的方法。const getObjType = obj => { var toString =

2020-06-06 17:24:56 2251

原创浅谈Immutable.js

最近在学习Immutable.js，正好遇见公司的每周技术分享会，把自己的一些总结和学到的记录下来，分享给大家。Immutable.js 简介Immutable.js是由 Facebook 工程师（ Lee Byron）花费 3 年时间打造，与 React 同期出现，虽然没有被默认放到 React工具集里，但是它的价值还是非常大的。它内部实现了一套完整的持久化数据结构（ Persistent Data Structure ），还有很多易用的数据类型（像 List、Map）。有非常全面的函数式操作方法（

2020-05-31 18:47:07 1298 1

原创 js 数组的处理方法之 splice 和 slice

今天测试人员给我提了个bug，说是数据不对，我看了一下显示的数据，立马就发现是把删除的元素展示了出来，然后就想到，数组的处理方法写错了，把 slice() 用成了 splice() ，想了想还是有必要把这个记录一下，提醒自己以后要细心。首先说一下今天的问题：后台数据返回了一个list数组(把项目数据简化了，能代表问题就行了)list=[ { id:1, name:' 张三' }， { id:2, name: '李四' }， { id:3, name: '王五' }]我需要展示的是数组除了第

2020-05-21 21:07:50 601

原创 Vue 中 v-if 和 v-show 的区别和用法

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar

2020-05-19 21:12:51 1805

JiaPeng366的博客

原创前端实用技巧--学习笔记

原创谷歌浏览器无法访问摄像头的解决方案

原创 js防抖和节流