全部文章
共 1299 篇文章
手写React-Lazyload
前言 平时网页中会有很多图片，图片有一个加载过程，很多情况，我们是不需要一开始直接加载的，当浏览器的视图滚动到图片时，开始加载可以节省网络资源，这就是我们常说的懒加载，当然CSR下的组件配合React.lazy的动态导入也是可以进行懒加载的。 思路 使用 IntersectionObserver API就可以实现懒加载的效果 我们可以用 IntersectionObserver 去监听需要懒加载的元素，当该元素滚动到视图区域时，请求该资...
Vue原理之Object.defineProperty和Proxy分析
在数据变化时重新render依赖相关函数(组件)，从而更新视图。 简单来说就是当我们某一个数据对象的属性发生变化时，能被Vue框架所监测到， 比如使用属性的时候会监测到某对象的某属性被读取了，当该属性发生变化时，会监测到该属性被修改了， 再加上一些额外的一些处理逻辑，最终去更新视图。 在ES6之前，我们是只能通过Object.defineProperty可以将对象的某个属性设置get 和 set 函数来监测其属性值的变化，以下是简单的示...
CSS萤火虫按钮特效
如图所示，这是一个很炫酷的按钮悬浮特效，鼠标悬停时，按钮呈现发光的效果，周边还出现类型萤火虫的效果。本文将解析如何实现这个按钮特效，基于这个动图可以分析出需要实现的要点： 有一个跟随鼠标移动的圆点 按钮悬停时有高亮发光的效果 悬停时按钮周边的萤火中效果 实现过程 跟随鼠标移动的圆点 这个部分需要基于JS实现，但不是最主要的实现代码 如果单纯做一个跟随鼠标移动的点很简单，只需要监听鼠标事件获取坐标实时更新到需要移动的元素上即可。但是仔细看...
axios中的那些天才代码
经常调接口的同学一定非常熟悉aixos下面的两种使用方式： axios(config) axios.post(url, config) 不知道各位大佬有没有思考过这样的问题： axios到底是个什么东西？我们为什么可以使用这两种方式请求接口呢？axios是怎么设计的？ 为了搞明白上面的问题，我们先按照传统思路仿照axios源码实现一个简单的axios。 手写一个简单的axios 创建一个构造函数 上面的代码中，我们实现了一个基本的Axi...
你真的以为虚拟dom会更快吗
那么部分直接背八股文的同学可能就会回答，虚拟dom性能高，速度快，然后就没有下文了，这种情况面试官在往深度一问可能一些同学就当场宕机了，那么针对虚拟dom，就引出了一些不得不说的问题了 dom工作原理 开始之前，我们来了解一下dom的工作原理，不知道大家是否好奇，们写的是js代码，但是浏览器是用c++写的，那么浏览器是如何处理的呢？比如下面这个代码，我们都知道它实际上是创建了一个div的dom结点 那么浏览器拿到这段代码做了什么了呢？...
还在复制粘贴 eslint 配置？封装个预置函数，彻底解放你的双手
阅读本文您将收获： 1. 了解 预置函数的设计思路。 2. 了解 预置函数实现的具体过程。 3. 了解 预置函数在实际项目中的应用。 预置函数基于 ，若版本在此之前，请查看 设计比较简单， 配置文件 中，直接调用预置函数 并导出其返回结果。 函数允许针对特定项目场景，传入自定义的配置规则，覆盖预置规则。 函数中预置了一系列 规则配置，主要分为两部分 默认启用配置 和 按需启用配置 。 默认启用配置 包括大多数项目都需要的基础配置，诸如...
React hook useEffect 和 useState 和 Vue nextTick 疑惑
场景： 上传一个excel 解析excel表格，填入数据bomTableData。 使用数据渲染表格 同时 使用此数据进行http请求，获取response结果，再次赋值bomTableData，重新渲染。 React 数据为空 经查询得知： 是异步的，这意味着当你调用 时，状态更新并不会立即反映在下一行代码中。在 中打印 时， 可能仍然是旧值。 为了在状态更新后立即执行某些操作，你可以使用 来监控状态的变化。当 更新时， 将被触发，并...
跨域及解决方案
同源策略是浏览器的一个重要安全机制，它用于限制一个来源的文档或脚本如何能够与另一个来源的资源进行交互。同源策略要求只有当两个URL的协议、主机和端口都相同时，才被认为是同源。否则，浏览器会认为它们是跨域的。 在早期，服务器端渲染的应用通常不会有跨域问题，因为前端代码和后端API都是在同一个服务器上运行的。随着前后端分离的出现，前端代码和后端API经常部署在不同的服务器上，这就引发了跨域问题。 先来看一下跨域问题怎么产生的： 首先我们在l...
Canvas星空类特效
思路 1. 绘制单个星星 2. 在画布批量随机绘制星星 3. 添加星星移动动画 4. 页面resize处理 Vanilla JavaScript实现 1. 初始化一个工程 2. 绘制单个星星 参考链接： 3. 在画布批量绘制星星 其实要绘制星星，我们只需要在画布上基于离屏画布来在指定位置将离屏画布渲染成图片即可，但是批量绘制以及后续的动画需要我们能记录每颗星星的位置、状态和行驶轨迹，所以可以考虑创建一个星星的类。 获取当前画布，批量添加...