- 博客(24)
- 收藏
- 关注
RSS订阅原创 轻松运用React 和 Vue！React 和 Vue的 diff 算法差异
下面用生活中整理书架的比喻来解释 React 和 Vue 的 diff 算法差异，并用代码示例对比性能优化策略，即使没有技术背景也能快速理解：2. Vue 的 diff 算法（聪明的排序机器人）策略：双端对比（同时从头部、尾部扫描），假设元素可能只是顺序调换。。原理：优先用 key 匹配相同元素（key 必须稳定！）；发现顺序变化时复用元素，只移动位置而非重新创建。示例：示例：同一书架更新原书架：[书A, 书B, 书C]新书架：[书D, 书A, 书B, 书C
2025-05-26 11:49:59
308
原创 会使用promise吗？Promise.allSettled vs Promise.all 的区别
Promise.all：用于“全有或全无”场景，要求所有操作必须成功。Promise.allSettled：用于需要容忍部分失败的场景，需完整的结果追踪。选择依据：是否需要部分成功的结果数据，以及是否接受快速失败策略。
2025-05-20 14:15:35
387
原创 通俗易懂，一看就懂的React与Vue的区别
选 React：项目复杂、团队技术强、需要高度灵活性（如大型应用、跨平台）。选 Vue：追求开发效率、项目轻量、团队需要低学习成本。
2025-05-16 11:12:55
375
原创 只需一行代码，任意网页秒变可编辑
在我们日常工作中，可能会遇到截图页面的场景，有时页面有些内容不符合要求，我们可能需要进行一些数值或内容的修改。如果你会PS，修改内容难度不高，如果你是前端，打开控制台也能通过修改dom的方式进行简单的文字修改。今天，我就来分享一个冷门又实用的前端技巧 —— 只需一行 JavaScript 代码，让任何网页瞬间变成可编辑的！打开浏览器控制台（F12），复制粘贴这行代码，回车即可。甚至，还可以直接复制图片多媒体等文件。如果你想关闭此功能，输入即可。
2025-05-08 17:45:08
208
原创 uniapp 音频组件uni.createInnerAudioContext()播放base64格式文件
项目中因为对于接口数据进行加密处置，对于后台返回的图片/音频都返回base64流，在 uni-app 中，不支持直接使用 Base64 格式的音频数据，所以需要处理。
2025-05-08 16:57:56
327
原创 vue3页面自定义title，动态修改title
Vue项目中，通过在路由的index.js文件中添加路由守卫beforeEach，可以实现在每次跳转页面时动态设置为当前页面的标题。首先创建并导出路由器实例，然后在beforeEach钩子中更新标题，确保代码位于和之间。每个子路由需配置meta属性，包含页面标题。这样，每个子路由切换时，浏览器标题将随之更新。
2025-05-08 13:57:24
369
原创 uniapp添加左滑动画删除
uniapp项目中需要实现左滑出现删除红色卡片，当左滑另外一条数据时候，上一条的删除按钮隐藏，卡片回到初始位置，如图所示：白色卡片左滑可删除，下面是实现思路。
2025-05-07 16:47:58
239
原创 十万条数据批量更新： document.createDocumentFragment()；
是在浏览器中创建一个文档片段（Document Fragment）的方法。文档片段是一种轻量级的临时容器，用于在内存中构建和操作 DOM 结构，然后将其一次性插入到文档中，以提高性能和效率。通常情况下，向 DOM 中频繁添加、移动、修改元素会触发浏览器的重绘和回流操作，这可能影响性能。使用文档片段可以在内存中进行这些操作，然后一次性将更改应用到文档中，从而减少了频繁的 DOM 操作。下面是一个使用在这个示例中，我们首先使用创建了一个文档片段fragment。
2025-05-07 10:22:25
181
原创 JavaScript 测手机浏览器的五种方法
的参数是一个 CSS 查询语句，表示只对屏幕宽度不超过 700 像素的设备生效。这种方法的优点是简单方便，缺点是不可靠，因为用户可以修改这个字符串，让手机浏览器伪装成桌面浏览器。字符串解析为一个对象，该对象的mobile属性，返回一个布尔值，表示用户是否使用移动设备。属性用于获取屏幕的当前方向，只有移动设备才有这个属性，桌面设备会返回undefined。对象返回用户设备的屏幕信息，该对象的width属性是屏幕宽度（单位为像素）。表示所有指针里面，只要有一个指针是不精确的，就符合查询条件。
2024-12-30 16:29:43
936
原创 VUE3 + Element Plus el-button添加回车enter事件实现登录
el-input框绑定键盘回车搜索事件 加上@keydown.enter=“handleEnter()”
2024-12-18 10:48:03
1232
原创 JavaScript 37个常用片段，收藏备用！
实用 JavaScript 代码片段，涵盖字符串、数组、日期、数字、对象、Web 操作等多个方面。这些代码片段简洁易懂，可以直接复制粘贴使用，节省时间，提高代码质量。2. 反转字符串3. 检查字符串是否为回文二. 数组1. 数组扁平化一层2. 从数组中移除假值它接受一个数组作为参数，并返回一个新数组，其中所有假值（例如 false、0、null、undefined、NaN）都被移除。4. 随机打乱数组顺序5. 移除数组中所有重复元素，只保留一个6. 根据唯一值对数组去重7.
2024-12-16 14:32:49
260
原创 vue全局方法封装: 构造树型结构数据, 导出下载, 时间格式化
在日常需求开发中, 如数据树状结构处理, 文档下载, 时间日期处理… 一般会在当前页面对数据直接处理, 如果项目中处理同类数据太多, 即可提出来进行封装。
2024-12-13 09:52:16
385
原创 VScode 添加代码片段
日常的开发过程中，我们都会有一些常用的代码片段，这些代码片段是通用的, 可以直接复制到各个项目中使用，非常方便。下面介绍在vscode快速添加代码片段的方法。
2024-12-12 15:43:53
583
原创 vue3 + elementPlus封装table组件
讲述项目中列表页重复工作多而封装 table 组件。介绍封装思路，如接收数据和配置项、循环列等，还说明了组件使用及效果展示，包括特殊项配置.
2024-12-12 13:54:55
1038
1
转载 人人都能懂的构造函数
大家都知道原型和原型链是 JavaScript 中最经典的问题之一，而构造函数又是原型和原型链的基础，所以先了解清楚构造函数以及它的执行过程可以更好地帮助我们学习原型和原型链的知识。本文将从以下几个方面来探讨构造函数：1.什么是构造函数2.为什么要使用构造函数3.构造函数的执行过程4.构造函数的返回值1.什么是构造函数在 JavaScript 中，用 new 关键字来调用的函数，称...
2020-04-08 16:23:32
253
原创 BFC规则 + 原理
不得不懂的BFC原理BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。不同类型的 Box，会参与不同的 Formatting Context（决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染，也就是说BFC内部的元素和外部的元素不会互相影响...
2020-04-07 12:33:12
1474
原创 二倍精灵图操作方法
为什么要有精灵图？ 最早的时候网速十分有限，为了提升用户体验，我们会将一张大图分解成多张小图来提高页面打开速度，但是网速得到了提升，为了能够让服务器承载更多的请求，我们要减少浏览器对服务器的请求，最直接的方式，就是将多张较小的图片放在一张大图上，从而减轻服务器的压力。而将多张小图放到一张大图上的操作就叫做精灵图，也可以叫做雪碧技术 也叫做css sprite。精灵图的操作方法1、先了解...
2020-04-02 12:07:52
1469
原创 重点掌握：Flex布局 + 原理
Flex布局 + 原理意为"弹性布局"，通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。注意！设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。flex主轴和侧轴在flex布局当中有主轴和侧轴两个方向。也是X轴和Y轴，行和列。1、默认主轴方向是X轴方向，水平向右。2、默认侧轴方向是Y轴方向，水平向下。flex常见属性...
2020-04-01 21:53:49
374
原创 Display显示 + Visibility可见性 + Overflow溢出
Display显示 + Visibility可见性 + Overflow溢出 在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。1. ## display 显示display 设置或检索对象是否及如何显示。none 隐藏功能block 除了转换成块级元素外，还有显示元素功能特点：隐藏之后，不保留位置（如空气...
2020-04-01 20:58:22
202
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人