- 博客(134)
- 收藏
- 关注
RSS订阅原创 关于微信小程序 “扫普通链接二维码打开小程序”动态传递多个参数开发过程记录与总结
项目中需要线下 扫描二维码 进入到小程序指定的页面，二维码中 要动态传递多个参数，接下来看看具体怎么实现，整个过程还比较顺利，特把整个过程中遇到的坑点做以总结。
2024-01-18 18:15:30
981
原创 合并分支中 rebase 和 merge 的区别
git merge 会让2个分支的提交按照提交时间进行排序，并且会把最新的2个commit合并成一个commit。最后的分支树呈现非线性的结构git reabse 将dev的当前提交复制到master的最新提交之后，会形成一个线性的分支树添加好友备注【进阶学习】拉你进技术交流群。
2023-12-29 13:46:27
377
原创 WeakMap 和 Map 的区别，WeakMap 原理，为什么能被 GC？
WeakMap 中，每个键对自己所引用对象的引用都是弱引用，在没有其他引用和该键引用同一对象，这个对象将会被垃圾回收（相应的key则变成无效的），所以，WeakMap 的 key 是不可枚举的。最早最简单的垃圾回收机制，就是给一个占用物理空间的对象附加一个引用计数器，当有其它对象引用这个对象时，这个对象的引用计数加一，反之解除时就减一，当该对象引用计数为 0 时就会被回收。JS 中的垃圾数据都是由垃圾回收（Garbage Collection，缩写为 GC）器自动回收的，不需要手动释放，它是如何做的呢？
2023-12-29 11:05:10
964
原创 如果 100 个请求，你怎么用 Promise 去控制并发？
现在面试过程当中 ，手写题必然是少不了的，其中碰到比较多的无非就是当属 请求并发控制 了。现在基本异步编程的理解了。
2023-12-28 14:06:31
869
原创 10 分钟了解 nextTick ，并实现简易版的 nextTick
在 Vue.js 中，有一个特殊的方法nextTick，它在 DOM 更新后执行一段代码，起到等待 DOM 绘制完成的作用。本文会详细介绍nextTick的原理和使用方法，并实现一个简易版的nextTick，加深对它的理解。nextTick简单的说，nextTick方法是在 Vue.js 中常见的一种异步更新 DOM 的机制。它的原理是利用 JavaScript 的事件循环机制以及浏览器的渲染流程来实现延迟执行 DOM 更新操作。它的出现主要是为了解决 Vue 的异步更新导致的 DOM 更新后的操作问题。
2023-12-28 13:41:11
942
原创 分享11 种有用的 JavaScript 技巧
今天这篇文章，我想与你分享 11个有用的JavaScript实用小技巧，它们将极大地提高你的工作效率。虽然，我们通过递归函数将多维数组转换为一维数组，但是有一个非常简单的方法可以解决这个问题。许多翻译网站都有此功能，你可以选择文本并将其翻译成另一个国家的语言。以上就是我今天想与你分享的11个有用的技巧，希望对你有所帮助。非常方便的帮助我们获取浏览器中的cookie信息。
2023-12-27 16:17:19
1243
原创 分析diff算法与虚拟dom（理解现代前端框架思想）
React和Vue作为目前国内主力的前端开发框架，想必大家在日常的开发当中也是非常熟悉了。不可否认的它们的存在大大地提高了我们的开发效率以及使得我们的代码可维护性得到提高，但是使用它们的“巧妙”的之后，对技术有着追求的你，是不是应该了解一下这些框架背后的一些思想呢？如果还没有，没关系，我们一起来！
2023-12-27 14:21:26
1150
原创 如何实现准时的setTimeout
想得到准确的，我们第一反应就是如果我们能够主动去触发，获取到最开始的时间，以及不断去轮询当前时间，如果差值是预期的时间，那么这个定时器肯定是准确的，那么用 while 可以实现这个功能。运行代码如下，通过一个计数器来记录每一次 setTimeout 的调用，而设定的间隔 * 计数次数，就等于理想状态下的延迟，通过以下例子来查看我们计时器的准确性。依旧非常的稳定，因此通过系统的时间补偿，能够让我们的 setTimeout 变得更加准时，至此我们完成了如何让 setTimeout 准时的探索。
2023-12-26 15:04:06
891
原创 分享3种常用的前端埋点方式
因为埋点实际上是对关键节点的数据进行上报是和服务端交互的一个过程，所以我们可以和后端约定一个接口通过ajax去进行数据上报。方法可用于通过 HTTP POST[1] 将少量数据 异步[2] 传输到 Web 服务器。前端埋点上报常使用ajax，img，navigator.sendBeacon。不推荐使用ajax。如果考虑兼容性的话，img是不二之选。
2023-12-26 13:55:48
833
原创 React、Vue3中父组件如何调用子组件内部的方法
当父组件需要调用子组件的方法时，可以通过useImperativeHandle钩子函数实现。以下例子是ts实现方式。在子组件中使用钩子，将指定的方法暴露给父组件，以便父组件可以通过子组件的引用来调用该方法。在子组件中使用了 useImperativeHandle 钩子将 someMethod 方法暴露给父组件。注意，为了使用 useImperativeHandle，需要将子组件包裹在 forwardRef 函数中，并在参数列表中添加 ref。上述代码中。
2023-12-26 09:00:00
443
原创 React组件在什么情况下会重新渲染
当我们使用React编写组件时，组件的重新渲染是一个重要的概念。重新渲染是指React组件在特定情况下会重新执行其渲染函数，更新用户界面以反映最新的数据。很多情况下，组件不必要的重新渲染会严重影响性能，所以要充分了解触发组件重新渲染的条件。当Context的值发生变化时，订阅了该Context的组件将重新渲染。在React中，组件的props是父组件传递给子组件的数据。当这些props发生变化时，子组件将重新渲染以反映最新的数据。当一个子组件嵌套在一个父组件中时，父组件重新渲染，子组件也会重新渲染。
2023-12-25 13:46:23
422
原创 JS 现代化的深克隆
前端手写深拷贝/深克隆是一道回头率超高的笔试题，但笔试版一般不适用于生产环境，JSON 的奇技淫巧和 Lodash 的工具函数也各有缺点。您知道吗，JS 现在有一种原生方法可以深层复制对象？您是否注意到，上述示例中我们不仅复制了对象，还复制了嵌套数组，甚至是Date对象？不仅可以如上操作，还可以：克隆无限嵌套的对象和数组克隆循环引用。
2023-12-25 13:31:38
900
原创 如何设计更优雅的 React 组件?
在导入依赖项的下方，通常会放那些使用 TypeScript 或 Flow 等静态类型检查器定义的文件级常量和类型定义。组件中的所有magic值，例如字符串或者数字，都应该放在文件的顶部，导入依赖项的下方。由于这些都是静态常量，这意味着它们的值不会改变。因此将它们放在组件中是没有意义的，因为放在组件中的话，它们会在每次重新渲染组件时重新创建。对于更复杂的静态数据结构，可以将其提取到一个单独的文件中，以保持组件代码整洁。下面是使用 TypeScript 声明的组件propsid: number;
2023-12-22 13:01:36
1014
原创 js 如何判断对象自身为空？很多人错了~
如何判断一个对象为空是我们在开发中经常会遇到的问题，今天我们来聊聊几种经常使用的方法，以及在不同的场景下我们如何去使用。判断一个对象是否为空时，使用方法最为完美。添加好友备注【进阶学习】拉你进技术交流群。
2023-12-22 12:58:29
305
原创 浏览器渲染原理
如果主线程解析到link的位置，此时link的CSS资源文件还没下载解析好，主线程不会等待，继续解析后面的HTML。合成线程拿到每个层、每个块的位图后，生成一个个的quad（指引）信息，指明位图信息位于屏幕上的位置，以及会考虑到transform的旋转、偏移、缩放等矩阵变换。这就是transform效率高的主要原因，因为不会引起样式的计算、布局、生成绘制指令等，它与渲染主线程无关，这个过程发生在合成线程中，且只需要进行最后一步-画。当进行了会影响布局树的操作后，需要重新计算布局树，就会引发重新。
2023-12-21 17:25:59
873
原创 代码提交分支规范
feature-${ver}：当前开发分支，从master分支创建。线上环境出包回归通过，feature-v_1.2.0代码合并到master，并由feature-v_1.2.0分支打tag。feature-jenkins：自动打包分支，由开发分支往该分支合并代码，自动触发jenkins打包流程。feature-${dev}：个人开发分支，从版本分支拉取创建，修改提交到版本分支。封版之后，feature-v_1.2.0版本分支出包线上环境回归。个人从版本分支创建/同步个人分支：feature-lisj。
2023-12-21 17:21:30
772
原创 页面滚动时隐藏element-ui下拉框/时间弹框
在系统中，当（有垂直滚动时）点击下拉框后滚动页面，会发现下拉项会遮盖住页面中的元素，不会隐藏。在页面滚动或者缩放时隐藏下拉项即可（借助点击目标元素，下拉项会自动隐藏的特点）1、监听当前滚动元素的scroll事件。2、定义滚动监听的容器。3、隐藏popper。
2023-07-26 17:55:17
1283
原创 video/audio timeupdate事件触发粒度（更新频率）调节
一旦触发该监听器，就立即分5次执行，每50毫秒执行一次，执行5次，恰好就是250毫秒。所以这个timeupdate事件触发频率也是250毫秒触发一次。一般来说，视频的进度条底层默认都是250毫秒更新一次的。其实可以在里面加上计时器。
2023-06-08 16:37:43
880
原创 在nuxt引入element插件，报错，The client-side rendered virtual DOM tree is not matching server-rendered conten
翻译：[Vue warn]：客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。这可能是由于不正确的HTML标记造成的，例如在。上图中出现的这个问题是element-ui没有允许在服务端使用导致的。组件，该组件只是占位且用于仅在客户端渲染其他组件.在nuxt引入element插件，报错。在这element-ui组件最外层加上。警告: Nuxt 版本小于。中嵌套块级元素，或者缺少。
2023-05-30 15:34:21
296
原创 JS 生成唯一UUID的几种方法
在开发中偶尔会遇到需要生成唯一id的时候，比如对数组的任意一项进行多次增删改，这时就需要给每一项添加唯一标识符来加以区分。以下总结了几种生成唯一标识的方法，仅供参考。
2023-02-11 11:12:12
687
原创 vue el-checkbox、el-switch绑定值问题
后端返回的值为1（number类型）对应el-switch值true（打开）状态，值为0（number类型）对应el-switch值false（关闭）状态。注：增加两个属性值即可 :true-label="1" :false-label="0"二、el-switch值true、false改为number类型的1和0。一、el-checkbox绑定值用0 1表示。
2023-02-07 15:37:03
3548
原创 ES6的一些常用用法思考
恰好，这位leader有代码洁癖，面对3~5年经验的成员，还写这种水平的代码，极为不满，不断对代码进行吐槽。不是不用ES6的解构赋值，而是服务端返回的数据对象中的属性名不是我想要的，这样取值，不是还得重新创建个遍历赋值。在项目中，一些没分页的列表的搜索功能由前端来实现，搜索一般分为精确搜索和模糊搜索。欢迎来对以上十点leader的吐槽进行反驳，你的反驳如果有道理的，下次代码评审会上，我替你反驳。
2023-02-03 16:32:34
376
1
原创 indexedDB存储
随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。
2023-02-02 15:28:18
888
原创 一个关于image访问图片跨域的问题
通过 'img' 加载的图片，浏览器默认情况下会将其缓存起来。当我们从 JS 的代码中创建的 'img' 再去访问同一个图片时，浏览器就不会再发起新的请求，而是直接访问缓存的图片。但是由于 JS 中的 'img' 设置了 crossorigin，也就意味着它将要以 CORS 的方式请求，但缓存中的图片显然不是的，所以浏览器直接就拒绝了。连网络请求都没有发起。
2023-01-16 17:34:52
6805
1
原创 JS 点击某元素以外的地方触发事件
本来就只是使用e.target就行了，但是点击事件的target的机制问题，单纯地使用e.target并不能根本解决这个问题，因为目标区域内可能有很多的元素，这个点击事件会选择其内部的元素，就举当前的html代码为例子，现在我的目标区域demo内有一个p标签，如果我点到这个p标签，e.target会指向这个p标签，而不会去指向这个demo元素。点击颜色画板之外的区域，隐藏颜色画板。这个功能多用于关闭自己设置的弹窗，设置好最外层的判断元素，点击弹窗之外，弹窗就会关闭，这个在用户体验方面是非常有利的一个功能。
2023-01-16 17:23:53
1904
1
原创 AntDesign DatePicker 控件日期时间禁用问题
二、设置只能选择今天的当前时间以后的时间（今天）三、设置只能选择当前时间以前的时间（今天）一、设置日期只能选择当前日期及以后的日期。
2023-01-12 14:18:13
1428
原创 JS获取音频的总时长，解决Audio元素duration为NaN || Infinity 问题
当我们在加载一个线上mp3地址或者获取audio的duration的时候，会发现有拿到duration是Infinity的情况，这时如果我们动态的展示录音时间时候就会有问题。首先明确一下这是chrome浏览器自己的存在的一个bug，因为我们拿到的录音数据流没有定义长度，所以浏览器无法解析出当前音频的时长。
2022-12-08 22:14:04
5221
1
原创 React使用西瓜播放器
西瓜播放器是一个Web视频播放器类库，它本着一切都是组件化的原则设计了独立可拆卸的 UI 组件。更重要的是它不只是在 UI 层有灵活的表现，在功能上也做了大胆的尝试：摆脱视频加载、缓冲、格式支持对 video 的依赖。尤其是在 mp4 点播上做了较大的努力，让本不支持流式播放的 mp4 能做到分段加载，这就意味着可以做到清晰度无缝切换、加载控制、节省视频流量。同时，它也集成了对 flv、hls、dash 的点播和直播支持。if (!cid ||!
2022-09-14 17:52:31
1485
原创 Echarts 折线图超出上下限部分变色 结合visualMap处理
第一：查看series中是否设置了线条的颜色，比如lineStyle的color，设置了之后就会以这个为准，visualMap里面的颜色就不会生效了。我会经常分享自己所学所看的干货，在进阶的路上，共勉！注意点：在series 里面不能设置线的颜色，要不然会以series里面设置的颜色为准，设置的范围变色将不起作用。第二：如果上面方法还不行，试试按需引入visualMap的js文件。前言：介绍单个折线图的处理方法和多个折线图不同颜色的处理方法。一：单折线图代码逻辑。二：多折线图代码逻辑。...........
2022-09-01 11:32:30
4241
1
原创 flv.js简单使用示例
播放器，纯原生JavaScript开发（ECMAScript6编写），没有用到Flash。，通过MediaSourceExtensions喂给浏览器，实现了FLV格式视频的播放。它的工作原理是Flv.js在JavaScript中流式解析flv文件流，并实时转封装为。在下载好的文件夹中找到dist文件夹中的flv.min.js复制出来。如果你已经安装了nodejs可以使用npm来安装flv.js。当然你也可以使用其他方式进行下载。可以使用简单的服务器测试。...
2022-07-18 18:57:46
3879
原创 用html2canvas遇到因为有滚动条截图不完整问题的解决方法
本文章向大家介绍在vue项目中用html2canvas遇到因为有滚动条截图不完整问题的解决方法(设置height和windowHeight)，需要的朋友可以参考一下。1、安装npm install html2canvas --save2、使用import html2canvas from 'html2canvas';基本逻辑html2canvas(document.getElementById('demo'), { backgroundColor: '...
2022-05-27 15:47:38
9191
9
原创 数字金额和汉字金额大写转换方法
前端：方法一(简单粗暴)：function digitUppercase(num) { var strOutput = ""; var strUnit = '仟佰拾亿仟佰拾万仟佰拾元角分'; num += "00"; var intPos = num.indexOf('.'); if (intPos >= 0) num = num.substring(0, intPos) + num.substr(intPos + 1, 2); strUnit = strU
2022-05-09 11:44:35
622
原创 React 模拟实现全局Toast提示
用react模拟一个toast提示框，提示的位置可挂载到指定的dom，不指定dom的话默认会挂载到body上,具体逻辑自行调整即可效果如下：实现逻辑，index.tsximport React, { useState, useEffect, useRef, forwardRef, useImperativeHandle, Ref } from 'react';import styles from './index.less';import ReactDOM from 're...
2022-05-09 11:21:35
1014
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人