websocket封装
简介 websocket在前端开发中，是一个必须掌握的技术！你可以不用，但必须掌握！ 前几天，就遇到这样一个需求，要求界面的数据通过 实时推送，并且必须支持 断网重连、自动心跳 ！ 自动心跳是定期向服务端发送小型数据包，如果一段时间内服务端没有收到心跳响应，系统可能会断开连接。 websokect的API非常简单 但是，要封装一个支持断网重连、自动心跳的websokect没有那么容易！ 封装成功演示 核心优势 我们先看我封装的webso...
用 JavaScript 画一颗【随机树】
用 JavaScript 画一棵树？ 产品说要让前端用 JavaScript 画一棵树出来，但是这难道不能直接让 UI 给一张图片吗？ 后来一问才知道，产品要的是一颗 随机树 ，也就是树的 茂盛程度、长度、枝干粗细 都是随机的，那这确实没办法叫 UI 给图，毕竟 UI 不可能给我 10000 张树的图片吧？ 所以第一时间想到的就是 Canvas ，用它来画这棵 随机树（文末有完整代码） Canvas 画一颗随机树 接下来使用 Canva...
亲手实现一个图片标注工具
本文为稀土掘金技术社区首发签约文章，30 天内禁止转载，30 天后未获授权禁止转载，侵权必究！ 业务中涉及图片的制作和审核功能，审核人员需要在图片中进行标注，并说明存在的问题，标注过程中需要支持放大缩小，移动等交互，将业务剥离，这个需求，可以定义为实现一个图片标注功能。 实现这个功能并不容易，其涉及的前端知识点众多，本文带领大家从零到一，亲手实现一个，支持缩放，移动，编辑的图片标注功能，文字描述是抽象的，眼见为实，实现效果如下所示： 技...
JavaScript 中最难理解的三个知识点
哈喽,大家好 我是 👨🏻💻。今天来来和大家聊聊前端面试中最难的三座大山，分别指： ， ， 💪 原型与原型链 说到 ，就不得不提一下 ，首先我们看下面一个简单的例子： \ 首先创造空的对象，再让 指向这个对象，通过 进行赋值，最终返回 ，这其实也是 一个对象的过程。 其实： 是 的语法糖； 是 的语法糖； 是 的语法糖。 那什么是原型那？ 在 js 中，所有对象都是 的实例，并继承 的属性和方法，但是有一些是隐性的。 我们来看一...
不定高虚拟列表
之前用原生 JS 实现过定高的虚拟列表， 本文会引用其中的部分思路以及变量名称等，文中不再过多解释其含义，建议提前阅读 👇： 因为定高的虚拟列表没有过多的计算，所以原生 JS 手写不是多大问题。这次我们来实现一个不定高的虚拟列表，主要使用 Vue3 + TS 来将其封装为组件，并利用 Vue3.3 的泛型组件以及 defineSlots 新特性来让我们组件类型更加规范 参考实现 👉： 由于原作者使用的是 React，并且不定高的实现...
完全掌握分片渲染和虚拟列表
大家好，我是小杜杜，有关 高性能，大数据量 的列表渲染的示例已经非常常见，可以说是前端必须要了解的功能点，今天我们一起手写一下，看看如何去更好的实现～ 我们知道有些场景下，接口会返回出大量的数据，渲染这种列表叫做 ,今天主要说下处理 的两种方式： 和 ，请各位小伙伴多多支持～ 在正式开始前，希望各位小伙伴牢牢记住： js执行永远要比dom快的多 ，所以对于执行大量的数据，一次性渲染，非常容易造成卡顿、卡死的情况 疑问点 我们先来看看以下...
瀑布流的效果是怎么实现的
还记得那是周五的一个晚上，那天正在寝室用笔记本玩赛博朋克2077 happy 中🥰，突然女朋友给我发了一个小红书的超链接，我像往常一样无视发送的内容直奔链接准备看完赶紧应付几句话继续游戏🤣 打开链接以为跟其他类似产品一样都会让你直接选择下载 App，没想到小红书的 PC 端惊到我了，首页出乎意料的好看 那时候年轻的我还不知道瀑布流是什么，只是觉得这个布局配合卡片的一些点击交互很有感觉，啧啧啧，我一个大男的看一些女性的推荐都被吸引到了...
如何巧妙应对iOS键盘难题
前言 写过移动端的同学或多或少都遇到过软键盘带来的各种各样的问题，最典型的就是输入框被软键盘遮挡、fixed元素失效等问题，并且这些问题在iOS上的表现让人难以接受。 webview的差异 在移动端上，我们的H5页面一般是运行在宿主APP提供的 中，简单点理解，你其实可以把它当作浏览器，就是用来展现页面内容的。目前移动端主流系统分为 与 ，然而两者提供的 容器也存在着诸多差异，今天我们就只探讨两者软键盘带来的影响。 首先，我们先来写个简...
Zustand不仅使用起来简单，源码更简单
说起 Zustand，很多使用 React 的小伙伴肯定不陌生 它是一个 React 状态管理库，类似于 Redux、Mobx 一起来看下 Zustand 的周下载量，大概在 250w，妥妥的第一梯队 再来看下 Zustand 的 github 标星，截止目前（2024 3 27）已经有 41.6k，妥妥的高赞仓库 如此优秀的 React 状态管理库不得不研究下。 顺便说一下，Zustand 的作者写了三个状态管理库，凭借一己之力，搅混...