- 博客(86)
- 收藏
- 关注
RSS订阅原创 教你使用vue实现一个定高虚拟列表
虚拟列表对于大部分一线开发同学来说是一点都不陌生的东西了，有的同学是直接使用第三方组件。但是面试时如果你简历上面写了虚拟列表，却给面试官说是通过三方组件实现的，此时空气可能都凝固了。有的特殊场景我们不能分页，只能渲染一个长列表。这个长列表中可能有几万条数据，如果全部渲染到页面上用户的设备差点可能就会直接卡死了，这时我们就需要虚拟列表来解决问题。一个常见的虚拟列表是下面这样的，如下图：其中实线框的item表示在视口区域内真实渲染DOM，虚线框的item表示并没有渲染的DOM。
2025-04-07 10:53:39
630
原创 怎么使用vue3实现一个优雅的不定高虚拟列表
很多同学将虚拟列表当做亮点写在简历上面，但是却不知道如何手写，那么这个就不是加分项而是减分项了。实际项目中更多的是不定高虚拟列表，这篇文章来教你不定高如何实现。不定高的意思很简单，就是不知道每一项item的具体高度，如下图：现在我们有个问题，在不定高的情况下我们就不能根据当前滚动条的scrollTop去计算可视区域里面实际渲染的第一个item的index位置，也就是start的值。没有start，那么就无法实现在滚动的时候只渲染可视区域的那几个item了。
2025-04-07 10:44:29
1254
原创 前端请求API你知道哪些？？？
浏览器中用于发起网络请求的 API 主要包括以下几种：XMLHttpRequest：这是一个老牌的 API，用于在浏览器和服务器之间发送 HTTP 请求。它支持异步请求，并可以通过设置回调函数来处理响应。尽管它已经被更现代的 API 取代，但在一些旧的浏览器或特定的场景中仍然有用。对于前端开发的我们来说，这个API再熟悉不过了，XHR 是最早接触到的网络请求 API，可以说是“老朋友”了。在很多老项目中，我们和后端沟通基本都用它。
2025-04-06 12:29:21
865
原创 优雅的 H5 下拉刷新如何实现
下图是我实现的效果，分为三步：开始下拉时，屏幕顶部会出现加载动画；加载过程中，屏幕顶部高度保持不变；加载完成后，加载动画隐藏。如图所示，蓝色框代表视口，绿色框代表容器，橙色框代表加载动画。最开始时，加载动画处于视口外；开始下拉之后，容器向下移动，加载动画从上方进入视口；结束下拉后，容器又开始向上移动，加载动画也从上方退出视口。知道原理，我们现在开始写实现代码，首先是布局的代码：我们把 box 元素当作容器，把 loader-box，loader-box + loading 元素当作动画，至于 h1 元
2025-04-06 11:34:05
861
原创 打造适配所有屏幕的H5页面大小[特殊字符][特殊字符]
萝卜青菜，各有所爱；正如我们对于手机的选择一样，每个人都有自己偏好的品牌和型号，而这些设备的屏幕大小也千差万别。面对如此多样化的终端环境，如果一个H5页面仅仅针对某一特定尺寸的手机进行设计，那么当其他用户尝试访问时，可能会遇到布局错乱、元素显示不全等问题，极大地影响了用户体验。在这样的背景下，如何设计出能够完美适配所有屏幕的H5页面，成为了开发者们亟需解决的重要课题。
2025-04-05 11:30:53
1186
原创 CSS砌体布局，一行代码解决布局问题！
事情起因是这样的，大家在刷抖音，小红书等短视频平台、发现他们的布局是这样的瀑布流布局。知道是瀑布流后，怎么做呢？我们第一反应是flex，grid？是的这是大部分人的固态思维我认为这极为麻烦，因为你甚至还需要用到大量的@meida，javascript来解决细节问题，代码极其冗杂。全文的大前提：不考虑图片顺序。但是砌体布局使用columns后仅仅一行代码就能完成上述的功能！！🤩，这你还不学起来？我查阅了许多博客，发现大多数对于使用column仅仅也就是介绍了多列布局，但是！！！！
2025-04-03 11:48:44
815
原创 new Image() 预加载 为什么比 ＜img＞直接加载要好？
虽然从技术上讲，直接在标签中加载图片和使用 new Image() 设置 src 都会触发相同的图片加载过程，但是 使用 new Image() 进行预加载 提供了更灵活的控制，使得你可以在页面渲染时避免图片加载阻塞，提升页面的加载速度和用户体验。
2025-04-03 11:35:30
988
原创 Vue的scoped原理是什么？
可以看到，带了scoped的style标签中的css，编译后会被加上一个属性选择器，名字以data-v开头，后面跟的是一个字符串，这个其实可以自己定义，只要保证全局唯一就行了，比如可以取当前文件的路径，然后用摘要函数md5或者sha256去生成一个哈希，取这个哈希值就行了。我之前不知道这个知识点的时候，被这个坑了一把，不知道为啥自己组件的样式被改了，当时找了半天才看到是父组件改的，所以我之后定义组件根节点的class名字的时候，尽量定义成一个独一无二的，免得无意中被父组件的同名类名的样式污染了。
2025-04-02 13:13:32
727
原创 95%开发者都踩过的坑：前端性能优化的逆向思维指南
性能优化，一个掣肘用户体验的关键模块。它没有固定的标准定义或唯一的解决方案。但是我们从整个项目的开发-部署-用户体验的整个过程中，总能摸到很多有普适性的规范或者优化理念。我们的目的是什么？优化啥？应当是：更快的加载和响应速度、更稳定的功能表现、更简洁的代码与架构设计、更好用更人性化。说人话是：性能优化应当是让用户能感觉到爽的，并且产生用户粘性的所有方式的总称好吧，也没有那么人话…那知道了我们性能优化的目的，我们要如何搞，才可以达到这个目的呢？针对网络层面的优化，针对渲染层面的优化。
2025-04-01 14:37:49
1296
原创 Source Map 是如何让你定位打包后代码的？[特殊字符] [特殊字符] [特殊字符]
Source Map 是一种用来“还原源码位置”的技术，它记录了打包或压缩后的代码与原始代码之间的映射关系，让你在浏览器调试时能看到你真正写的代码。它的核心是 mappings 字段，这一段内容通过 VLQ + Base64 编码，把每个压缩后代码的位置对应到源码中的行列、变量名等。浏览器通过读取 JS 文件中的注释 //# sourceMappingURL=xxx.map，去加载 .map 文件，并借此实现源码级调试、断点、错误定位等功能。
2025-04-01 12:00:06
668
原创 90%的开发者都栽过跟头：你的分页数据正在“量子波动“
从外卖订单到医疗影像，从证券交易到电商浏览，分页数据的时空一致性是现代数字世界的基石。理解异步本质建立防御机制预判用户行为我们得以在充满不确定性的网络世界中，为用户构建确定性的交互体验。这不仅是技术挑战，更是对用户体验的终极尊重——当每个点击都能获得精准响应，便是数字文明最优雅的证明。
2025-03-31 15:56:58
753
原创 【工具推荐】提升终端体验必备工具：Oh My Zsh 安装教程与常见问题解答
是开发者社区最受欢迎的 Zsh 配置框架之一，通过简洁的语法、丰富的主题和强大的插件生态，让终端操作效率倍增。它支持自动补全、语法高亮、Git 状态提示等功能，是优化开发工作流的利器。通过正确安装和配置 Oh My Zsh，你不仅能享受流畅的终端体验，还能通过官方文档快速解决问题。现在就开始你的高效命令行之旅吧！若你发现文件"丢失"，实则是被安全重命名。立即尝试这些工具，体验命令行如丝般顺滑的操作吧！Oh My Zsh 的强大之处在于其。通过合理配置插件，你的终端将化身为。，无需额外安装，只需在。
2025-03-24 15:43:22
1074
原创 V8引擎探秘】解剖JavaScript数组的“五脏六腑“[特殊字符]
1️⃣元素类型阶梯（性能逐级下降）2️⃣内存扩容策略预先分配额外空间（类似餐厅预留空桌🍽️）缩容条件：使用量不足容量50%3️⃣性能黄金法则避免制造"孔洞"（别用超大数组用TypedArray替代保持元素类型稳定（别在数字数组里混入对象）🎯实战锦囊紧凑的"士兵方阵"（FixedArray）带缺口的"多米诺骨牌"（Holey Array）散落的"储物箱"（Dictionary）选对方阵类型，你的代码性能就能起飞🛫！
2025-03-20 09:49:43
422
原创 面试常考的函数柯里化 curry 到底怎么写是最优解
函数柯里化（Currying）是函数式编程中的一个重要概念，它将一个接受多个参数的函数转换成一系列接受单一参数的函数。在面试中面试官经常使用这个题目来考察面试者的函数式编程理解、代码抽象能力、闭包和作用域理解这几方面的能力。想要写好函数柯里化，那么我们需要知道什么是柯里化。柯里化是一种关于函数的高阶技术。它不仅用于 JS，还被用于其他编程语言。它是一种函数的转换–>将一个函数从可调用的 转换为可调用的。。下面来看一个例子：熟悉闭包的同学或许一眼就看出来，这里利用了闭包的特性来实现了一个基础的柯里化函数。
2024-10-30 14:43:00
473
原创 使用 dayjs 准确实现展示【几年前、几月前、几日前】...
不管是在博客类、新闻类项目中都必定少不了时间的展示，例如：炉石新闻页、掘金用户主页的动态展示在对时间上要求比较高得情况下，我们自己写肯定就不太行了，毕竟自己手搓得话一方面是收益和成本不一致（手写计算有些时间考虑不了很全：闰年、二月、大小月…）、另外市面上都有很成熟的第三方库了，提供的方法还能覆盖更多的场景。干嘛不适用呢？接下来我就以dayjs这个库来完成一样的效果…这篇文章实现了一个较完善的时间展示功能，避免了手动处理日期复杂性带来的潜在问题。dayjs。
2024-10-28 22:20:22
654
原创 Vue+sortable+el-table表格排序使用指南
这两天遇到一个需求：在点击【设置优先级】的按钮后弹出关于玩法类型的table，点击【排序】按钮可以后可以进行排序。由于组内使用的组件库是element-ui，那我首先就想到了使用 el-table组件，但奈何其版本原因不能相应的拖拽排序的API。了解到有。接下来我就以Vue+el-table+sortable 为例看看我是怎么实现这个需求的。
2024-10-24 22:02:43
753
原创 【兼容性记录】video标签在 IOS 和 安卓中的问题
业务需求背景：由于业务中涉及到有视频播放的内容，所以就使用了video标签去做，但是video标签在ios 设备和安卓设备中的默认行为不一致，故记录下解决方法（折中办法）。
2024-09-13 17:57:30
2151
转载 面试官：如何防止接口重复请求？我给出了三个方案！
前段时间老板心血来潮，要我们前端组对整个的项目都做一下接口防止重复请求的处理（似乎是有用户通过一些快速点击薅到了一些优惠券啥的）。。。听到这个需求，第一反应就是，防止薅羊毛最保险的方案不还是在服务端加限制吗？前端加限制能够拦截的毕竟有限。可老板就是执意要前端搞一下子，行吧，搞就搞吧，you happy jiu ok。
2024-08-07 13:18:42
315
原创 几分钟教你实现一个酷炫的扫光效果
话不多说，咱们先来看看本篇文章中我们实现的效果。是不是发现这个效果非常的熟悉？没错，这经常能够在一些电商网站可以看到，那这究竟是怎么实现的呢？接下来由我来带领大家尝试做一个类似这样的效果出来。扫光样式可以通过线性渐变来创建，这种方法简单且效果良好。扫光动画的实现通常需要改变元素的位置或背景位置，这可以通过 CSS 的transform或属性来实现。对于文本元素，可以通过改变来实现扫光动画。但是，需要注意的是，如果背景尺寸等于容器尺寸，那么设置的百分比将无效。
2024-08-06 14:56:26
1295
原创 什么？？？到现在你都还不会手写Promise！
Promise对于我们来说并不陌生，无论是在面试还是开发过程中，它都会频繁出现。虽然我们经常使用它，但如果能深入理解其底层原理，无疑能够提升我们的开发效率。因此，深入学习Promise是非常必要的。那么，接下来就让我们一起揭开Promise的神秘面纱，一起手写一个Pormise吧！完整代码前端-JavaScrip-Promise-手写Promise在开始之前，我们以常见的PromisePromise 解决了什么问题Promise 常用的 API 有哪些实现 Promise 某个方法。
2024-07-27 17:13:34
797
原创 都2024年了你还没有开始探索 CSS 属性 mask 吗？
打开控制台其实我们可以看到这里是在img这里主要使用了mask这个属性：在我们去掉这个mask属性以后，会发现轮播图会有一个白色的背景，这更加让我确定了这个mask属性就是实现这个样式的关键点。所以，接下来让我们来探究一下这个mask到底是何方神圣，居然能完成这样的样式。我们先来看看MDN对maskmask允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。这个解释肯定让小伙伴们糊里糊涂的，简单来说就是遮罩图片中不透明的部分会和原图片合在一起。拿上面天谕群星计划。
2024-07-23 20:07:39
1069
原创 border-image：一个比 boder 更加吸引人的CSS属性
在开始正文之前我们先看看炉石传说的一个页面中的两个地方：加载更多按钮和tab切换。打开控制台，我们可以发现这两个地方都有一个相同的地方：都使用了这个属性。那这个属性有什么用那，接下来由我来向大伙详细介绍一下这个属性。看完前言的小伙伴是不想着这两个例子我使用backgrond就可以解决了，为啥还要这个属性？我刚开始接触的时候也是这样想的，但我在对一个项目进行换肤的时候就出现了一个问题：很多地方都是文字不用修改，但是边框要进行修改，导致我每个地方都需要重新进行切图，换皮😅😅😅另外，我们在使用的同时还可以使用。
2024-07-22 16:02:35
967
原创 TypeScript 中的Partial到底怎么用
是一个内置的工具类型，它可以将某个类型里的所有属性都变为可选项。类型时要怎么使用呢。在 TypeScript 中，，如果我们在其他地方使用。
2024-07-18 10:09:37
225
原创 如何做一个透明度渐现且向上位移逐行出现的文字效果
在这个夜黑风高的夜晚，你的眼睛已经开始有些疲惫。你的手指在键盘上轻轻地敲击着，仿佛在弹奏一首无声的夜曲。你的思绪在代码的海洋中飘荡，寻找着最后一行需要完成的代码。就在这时，你的老板走了过来，他的脸上带着一丝期待也带着一丝压榨廉价劳动力的理所当然。他说：“我需要你给我们产品首页的标题做一个动画。但是，我希望这个动画能够突出标题的内容，而不是动画本身。我不希望动画太过炫酷，以免分散用户的注意力。”你虽然心生不满，但又不得不做，毕竟老板最近行情不好。既来之，则安之，心想着等行情好了，马上就跑。
2024-07-08 20:44:42
797
原创 TypeScript中的类型谓词如何使用
如果 isVNode(maybeVNode) 返回 true，那么在这个 if 代码块中，TypeScript 编译器会认为。在 TypeScript 中，类型谓词是一种特殊的返回类型，它可以帮助 TypeScript 编译器在特定的代码块中。函数是一个类型谓词，它检查一个值是否是。类型，因此可以安全地访问。
2024-07-04 11:53:30
343
原创 TypeScript 如何快速获取函数的所有参数类型
是 TypeScript 的一个内置工具类型，用于获取函数的参数类型组成的元组。然后我们可以使用这个类型来声明变量。，并确保我们只能将正确类型的参数赋给。函数的参数类型组成的元组，即。
2024-07-04 11:35:29
580
原创 原来逆水寒官网这样用CSS进行适配的
这段时间对逆水寒很是着迷，这不我又打开了它的官网，不得不说网易前端官网做的是真炫酷！！！同样是前端的开发者(自己还是小菜鸡罢了)，就不得不想扣扣官方的细节了，拿出我们老生常谈的问题—适配，官方做的很漂亮，窗口缩小不会影响页面内容位置的偏移，当我将窗口缩小的时候还会出现滚动条让我可以滚动滚动条来看到完整的页面内容。有兴趣的同学可以去打开官网尝试一下。这种页面其实在很多地方都可以看到，如：产品官网，可视化大屏看板等等。所以这个怎么实现呢？接下来让我们来尝试复现一下。
2024-07-02 14:23:42
666
原创 纯CSS 实现 img 图片换色
时的颜色，后两个参数分别是 X、Y 轴的偏移量。这里的原理就是让原本的。偏移处用户视图区域(偏移值可以更改)，然后让新的图片偏移到原。来换色，而在日常开发过程中通常会遇到设计那边要求图片在。时换色，那么怎么利用 CSS 来完成这个效果呢。这样的图片却不可以通过。
2024-06-28 17:13:02
1409
原创 通用CSS样式记录
时的颜色，后两个参数分别是 X、Y 轴的偏移量。这里的原理就是让原本的。这篇文章主要记录一下我在日常开发中使用到且可提高效率的CSS样式。偏移处用户视图区域(偏移值可以更改)，然后让新的图片偏移到原。来换色，而在日常开发过程中通常会遇到设计那边要求图片在。时换色，那么怎么利用 CSS 来完成这个效果呢。这样的图片却不可以通过。
2024-06-28 10:00:28
243
翻译 一文让你知道在 React 18 中自动批处理为什么会有更少的渲染？？？
批处理是指 React 为了更好的性能而将多个状态更新分组到一个重新渲染进程中。例如，如果你有两个state在同一个点击事件中需要更新，React 会将这两个state作为一次渲染。所以，这就是运行下面的代码后，明明在点击事件中更新了两个state为什么运行代码的时候只看见了一次渲染😮// 到这里还没重新渲染f);// 到这里还没重新渲染// React 只会在结束时才会执行渲染return (Demo：React17 中事件处理程序的批处理。
2024-05-25 18:53:11
338
原创 windows 搭建 go开发环境
go语言（或 Golang）是Google开发的开源编程语言，诞生于2006年1月2日下午15点4分5秒，于2009年11月开源，2012年发布go稳定版。Go语言在多核并发上拥有原生的设计优势，Go语言从底层原生支持并发，无须第三方库、开发者的编程技巧和开发经验。go是非常年轻的一门语言，它的主要目标是“兼具Python 等动态语言的开发速度和C/C++等编译型语言的性能与安全性”很多公司，特别是中国的互联网公司，即将或者已经完成了使用 Go 语言改造旧系统的过程。
2024-05-22 16:22:16
721
原创 一文读懂JS中的原型和原型链prototype和__proto__
在我们学习JS的过程中，我们总会接触到一些词：“原型”，“原型链”。那么今天我就来带大家来学习学习原型和原型链的知识吧！
2024-04-06 22:36:20
505
原创 Docker 搭建私人仓库
官方私人镜像仓库搭建很简单(就是需要有魔法，否则就异步到第二种方法吧)，只需要 login、pull、tag、push 几种命令就完事了。而本地私人镜像仓库则比较麻烦一点而且只能存储在本地不能公开。下面我们就来简单的介绍一下怎么搭建自己的私人仓库吧！
2024-03-21 15:40:23
2427
转载 【MacOS m2】安装配置 MySQL
如果系统弹窗显示下列警告，打开系统设置，打开“隐私与安全性”，找到“安全性”的二级菜单，里面应该会出现“已阻止使用‘mysql…一路点击继续到 Configuration，Configuration选择“Use Legacy Password Encryption”，然后点击Next。在终端输入如下代码，然后输入你在上文中设置的登录密码，敲击 enter，即可进入到 MySQL 命令行控制界面。打开系统设置，拖到最下方，找到MySQL，双击后有如图所示的两个绿色的小圆形，代表安装成功。
2024-02-02 18:02:48
430
转载 【MacOS m2】homebrew 下载安装 Redis
启动 redis 客户端，打开终端并输入命令 redis-cli。该命令会连接本地的 redis 服务。redis 默认端口号 6379，默认 auth 为空，输入以下命令即可连接。redis 默认是前台启动，如果想以守护进程的方式运行(后台运行)，可以在。redis 的配置文件 redis.conf 存放在。可以通过下面命令查看redis是否正在运行。Homebrew 安装的软件会默认在。,修改成 yes 即可。执行以下命令开始安装。
2024-02-02 17:21:33
137
原创 【macOS】mac M2 安装 Homebrew & nvm
首先，需要确保系统中安装了 bash、git 和 curl，对于 macOS 用户需额外要求安装 Command Line Tools (CLT) for Xcode。不过这个方法也会出现问题—无法连接 github (开了代理也会报错)，后面我也就放弃了。所以这个方法暂时不行，后面如果这个问题被解决了这个也是一个很省事的安装方法。在这个过程中可能还会弹出安装 git 的提示，直接安装等待即可。然后再次输入上面的命令，输入1选择清华源就开始安装了。打开终端，复制如下命令，按回车执行(需要输入密码)
2024-01-29 14:56:35
1767
react-native 远程调试 APK
2023-11-25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人