全部文章
共 1306 篇文章
前端数据监控平台
比如客户说：你们的页面咋白屏了？ 开发：具体可以给我说一下，白屏之前你做了什么吗？ 客户：我就点了一下按钮 开发：你能告诉我是哪个页面的哪个按钮吗？ 最后，客户极其不耐烦的地丢过来一张没有缺少url的白屏给你看，试图证明他说的是真的，真白屏了。 最后不再理睬你！ 开发人员试图找到解决方案，想快速解决线上bug，但是客户却以为你在质疑他。 真的有点秀才遇上兵有理说不清，其实真的没有谁对谁错，只是双方立场不同，作为客户，你的系统bug了，我...
小程序录音实现
最近的项目开发中做了一个微信小程序录音的功能，遇到了一些问题，是如何解决的？ 本文会从两种解决方案（微信小程序录音API/H5录音嵌入webview中），从优点、难点、缺陷、实现等进行讲解，并附有代码。 微信小程序 API 创建全局的唯一录音器，可以在当前页面或者小程序内其他页面操作，不影响录音运行。 缺陷 1. 熄屏 、 锁屏后 会停止录音 2. 切换 APP 也会停止录音 3. 小程序进入后台并被「挂起」后，如果很长时间（目前是 3...
网络-navigator.sendBeacon前言
navigator.sendBeacon 是浏览器的 API，用于在浏览器后台发送异步请求,它不会等服务端响应。 它可以用于在页面卸载或关闭的时候，发送数据，以及在不阻塞页面卸载的情况下发送数据。 使用 方法发送的请求是异步的，不会阻塞页面的卸载或关闭过程。 这对于需要在用户离开页面之前发送数据的情况非常有用。 优点 不受页面卸载过程的影响，确保数据可靠发送。 普通的 请求如 和 在页面关闭或者刷新、前进、后退等操作时 , 这些请求有可...
ES2024|ES15已发布 前端可以判断表情包了？ 正则 “v” 标记成为亮点
This was approved on June 26th, 2024 by the Ecma GA. 2024 年 6 月 26 日，第 127 届 Ecma 大会批准了 ECMAScript 2024 语言规范，这意味着它现在正式成为标准。 项目地址： 文档地址： 在 JavaScript 正则表达式中， 标志是 标志的扩展，提供了一些新的功能，使得处理 Unicode 和字符类操作更加灵活和强大。本文将详细解读 标志的两大主要功...
前端学正则
语法 其中修饰符是可选的。 实例： /test/i 是一个正则表达式。 test 是一个 正则表达式主体 (用于检索)。 i 是一个 修饰符 (含义是搜索不区分大小写)。 正则表达式修饰符 修饰符 修饰符用于执行区分大小写和全局匹配: | 修饰符 | 描述 | | | | | | 执行对大小写不敏感的匹配。 | | | 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 | | m | 执行多行匹配。 | 示例g： 方括号 方括号...
前端项目中的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 函数来监测其属性值的变化，以下是简单的示...