前端项目中的Server-sent Events(SSE)项目实践及其与websocket的区别在前端开发中，实时数据更
前端项目中的 项目实践 前言 在前端开发中，实时数据更新是提升用户体验的重要因素之一。 是一种高效的技术，允许服务器通过单向连接将实时数据推送到客户端。下面将从 的基本改变，使用场景展开了解，并提供一个实际案例来更好的理解如何在前端项目中应用 。 的主要特点 1. 单项数据流：数据从服务器推送到客户端。 2. 自动重连：在链接丢失时，浏览器会自动尝试重新链接。 3. 简单易用：基于 协议，不需要额外的库或协议。 的使用场景 适用于需要从...
如何减少 options 请求
想要回答这个问题需要先明白什么是简单请求和非简单请求 浏览器请求方式可以划分为简单请求和非简单请求 简单请求 简单请求你可以理解为那些不会对服务器造成风险的请求。根据 CORS（跨源资源共享，Cross Origin Resource Sharing） 的定义，简单请求必须满足以下条件： 使用 、 或 方法。 仅包含少量特定的请求头部，如 、 、 、 （但只能是 、 或 ）。 不包含自定义的请求头部（即除了浏览器默认的上面那些）。 非简...
手写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 数据为空 经查询得知： 是异步的，这意味着当你调用 时，状态更新并不会立即反映在下一行代码中。在 中打印 时， 可能仍然是旧值。 为了在状态更新后立即执行某些操作，你可以使用 来监控状态的变化。当 更新时， 将被触发，并...