王乐平-CSDN博客

原创我的新书《PWA入门与实践》上市了

前言我初接触PWA是在2017年年初，当时参加了一个前端分享会，其中一个主题就是与PWA相关的，介绍了PWA的Service Worker和安装到桌面的能力，以及这门技术未来的发展趋势，听完这个分享后，我就为PWA的一些能力所吸引。Web本身的优势就非常明显，如可分享，可搜索，无须下载，在任何设备上有相同的展示等，现在再加上PWA的能力，让Web在原有的基础上具备了类原生应用程序的功能，这对...

2020-05-07 11:21:17 2236

原创内源 npm 无法同步官方 npm 解法

内源的 NPM 通常通过全局配置了内源 NPM，采用 T+1 进行官方 NPM 的缓存同步。但可能会存在没有sync机制的场景，当依赖的一个外部包发了新版本是无法立即消费的。可以采用以下方式修正。

2024-03-29 20:16:45 246

原创 Git 内幕探索：从底层文件系统到历史编辑的全面指南

blob（Binary Large Object）是一种数据类型，用于存储文件的内容。每个文件在 Git 中都被存储为一个 blob 对象。blob 对象包含了文件的原始内容，它们是 Git 中最基本的数据单元之一。内容存储：blob 对象存储文件的实际内容。这些内容以二进制格式存储，并且是文件的原始数据。Git 不关心文件的类型，它将所有文件都视为二进制文件，并以 blob 对象的形式存储它们。唯一标识：每个 blob 对象都有一个唯一的 SHA-1 哈希值，这个哈希值是通过 blob 对象的内容

2024-03-08 00:44:29 1123

原创告别繁琐的数据校验：用JSON Schema简化你的代码

JSON Schema 是一种基于 JSON 的格式，用于描述 JSON 数据的结构和验证 JSON 数据。它为 JSON 数据提供了一个清晰的描述，可以用来验证、文档化，以及界定数据的接口。下面是 JSON Schema 的一些核心特点和应用方式的详细介绍：描述数据格式：使用 JSON Schema，你可以详细描述 JSON 数据的预期结构，包括哪些字段是必需的，字段的数据类型是什么（如字符串、数字、布尔值等），以及字段的其他属性（如字符串的最小长度、最大长度、正则表达式模式等）。数据验证：JSO

2024-03-03 00:54:34 1056

原创提升 Node.js 服务端性能：Fastify 框架

Fastify 是一个高效且快速的 Node.js web 框架，专为提供最佳的性能而设计。它是相对较新的，但已经因其高性能和低开销而受到许多开发者的欢迎。Fastify 提供了一个简洁的开发体验，同时支持快速的路由和插件架构，使得开发者可以快速构建和扩展他们的应用。Fastify 可以被视为 Node.js 中的一个高效、现代化的 web 框架，是构建快速 web 应用的一个优秀选择。主要特性和原则：

2024-02-27 23:00:50 845

原创使用PM2实现高效的应用监控与管理

PM2还允许你定义自己的指标来监控。你可以在你的应用中集成 PM2的 API 来发送自定义指标，这样就可以在 PM2的监控工具中查看这些指标了。

2024-02-25 01:16:24 887

原创实时反馈的力量：如何用nodemon改善你的编码实践

nodemon是一个帮助开发基于 Node.js 的应用程序的工具，通过在检测到目录中的文件更改时自动重启 node 应用程序来实现。nodemon不需要对您的代码或开发方式进行任何额外的更改。nodemon是 node 的一个替换包装器。使用nodemon时，只需在执行脚本时将命令行中的node替换为nodemon即可。

2024-02-22 21:20:01 542

原创常见Web安全

使用 JavaScript 发起请求，并在请求中添加一个自定义的头部（如。

2024-02-22 21:17:26 602

原创走近 Next.js：全栈框架的简介与应用

微信搜索“”关注公众号。

2024-02-17 12:42:53 1559

原创极致日志记录：Pino 为你带来的性能与便利性

微信搜索“”关注公众号。

2024-02-16 17:29:54 1159

原创告别后端依赖：用 MSW 实现独立的前端应用 Mock

);},});});});Mock Service Worker 旨在使用标准的 Fetch API 类进行请求拦截和响应模拟，无需对代码进行更改和配置，可以在各种环境中使用。

2024-02-14 12:42:08 1083

原创 Promise 常见题目

delayAll 函数应确保从 functions 中的每个 Promise 都被延迟执行，形成返回延迟的 Promise 的函数的新数组。promise 的解析值应该是一个按照它们在 functions 中的顺序排列的 promise 的解析值数组。给定两个 promise 对象 promise1 和 promise2，返回一个新的 promise。数组中的每个函数都不接受参数并返回一个 promise。编写一个函数，接受另一个函数 fn ，并将基于回调函数的函数转换为基于 Promise 的函数。

2024-02-13 11:21:18 1002

原创依赖注入的艺术：编写可扩展 JavaScript 代码的秘密

DIP 是一个高层的设计原则，DI 是实现这个原则的一种模式，而 IoC 是一个更广泛的原则，它表达了控制权转移的思想，并且可以通过包括 DI 在内的多种方式实现。在许多框架和库中，这些概念往往交织在一起，以支持松耦合、可测试和灵活的软件设计。

2024-02-12 14:28:03 746

原创重构利器：如何用 Immer 优雅地管理应用状态

在选择适合的不可变数据库时，你需要考虑几个关键因素，比如应用程序的规模、状态管理的复杂性、开发团队的偏好、以及与其他库或框架的集成需求。本身的完整特性集合。这个库允许你编写看似可变的代码来更新一个不变的状态，但实际上，你是在修改的一个临时的草稿状态。的诞生背景是为了解决在处理复杂不可变状态时的编码复杂性问题，同时帮助开发者避免常见的不可变数据操作错误，提高代码的可维护性和可读性。，你可以继续编写简单直观的可变代码，但是产生的结果是按照不变性原则处理的，这样就既保持了代码的简洁，也确保了状态的不可变性。

2024-02-11 12:31:38 588

原创实时协作的艺术：构建高效共享白板系统

前面看到一个共享白板的场景，如：发给你一个地址，让你在上面做题，双方都可以进行实时编辑。这个功能小而美，这里简单实现下。

2024-02-09 23:56:10 724

原创 React 浮层组件实现思路

React 浮层组件（也称为弹出组件或弹窗组件）通常是指在用户界面上浮动显示的组件，它们脱离常规的文档流，并且可以在用户进行某些操作时出现在页面的最上层。React 浮层组件可以用于创建模态框（Modal）、下拉菜单（Dropdown）、工具提示（Tooltip）、侧边栏（Sidebar）或任何其他需要动态显示和隐藏且通常位置固定或绝对定位的内容。React 浮层组件的特点包括：层级管理：浮层组件通常具有较高的值，使得它们能够显示在其他内容之上。动态性：它们通常是响应用户交互（如点击按钮或鼠标悬停）而显示的

2024-02-05 16:19:50 981

原创告别繁杂的状态管理：Zustand 的简洁之道

它允许你创建一个全局状态存储，并且可以在应用程序的任何地方访问和更新这个状态，而不需要像 Redux 那样编写大量的 action creators 和 reducers。路径中导入的一个工具函数，它对返回的对象进行浅层比较，如果对象的顶层属性和之前的状态一样，即使引用不同，也不会重新渲染组件。因此，社区开始探索其他的状态管理解决方案，目的是减少样板代码、简化开发流程，并提供与 React 更自然的集成。随着 React 应用程序的增长和复杂性的提升，开发者开始寻找更简单、更易于维护的状态管理解决方案。

2024-02-04 20:51:24 870

原创革命性的写作：MDX 让你的 Markdown 全面动起来

如果你需要进一步自定义插件的行为，你可以查阅插件的文档以了解可用的配置选项。

2024-02-03 21:38:39 836

原创 2024 React 面试问答

总的来说，React 的这些 Hooks 的工作原理依赖于 React 的 Fiber 架构，该架构允许 React 在内部追踪组件状态和引用。每当组件渲染时，它都会以正确的顺序和位置检索状态和引用，确保它们在多次渲染之间保持不变。这个设计使得函数组件可以在不失去其函数式和声明式特性的同时，使状态和引用在组件的整个生命周期中保持持久化。Fiber。

2024-01-31 02:38:21 1119

原创算法，不再难学！揭秘两款让你迅速学会算法的在线工具

用户可以创建自己的数据示例或使用随机生成的数据集，这有助于理解算法如何对不同类型的数据集进行操作。

2024-01-28 14:20:03 557

原创从 React 到 Qwik：开启高效前端开发的新篇章

React使用 JSX 语法定义组件结构。通过import语句引入其他组件和库。使用函数组件和类组件两种形式。利用useStateuseEffect等 Hooks 进行状态管理和副作用处理。});Qwik同样使用 JSX 语法，但引入特有的 Qwik 优化器语法（如useSignalcomponent$useStore组件使用component$函数包装，指示 Qwik 优化器如何处理。事件绑定使用特殊的后缀，如onClick$，以启用 Qwik 的懒加载机制。

2024-01-27 18:03:47 1261

原创突破React限制：Million.js带来的性能新境界

React 是一个非常受欢迎的 JavaScript 库，它允许开发者通过声明式的方式构建用户界面，并通过其虚拟 DOM 系统来高效地更新和渲染组件。当一个应用的状态(state)或属性(props)发生变化时，React 会经历一个分为渲染(rendering)和对比更新(reconciliation)的两部分的更新过程。如果可能，以渐进的方式迁移一小部分应用程序，并监控性能和稳定性的变化，可以帮助你做出更明智的决策。的优化中受益更多，因为在这些情况下，React 的虚拟 DOM 操作可能成为性能瓶颈。

2024-01-26 11:34:09 986

原创探索HTMLx：强大的HTML工具

htmx 的诞生背景来源于现代 web 开发中一个普遍的问题：随着前端技术的复杂性不断增加，开发者不得不学习和维护越来越庞杂的 JavaScript 框架和库，以构建动态和互动式的 web 应用。：如果你正在寻找一种可以简化前端开发过程的方法，减少 JavaScript 的编写量，并且依靠 HTML 本身的能力来构建交云富的动态网页，那么 htmx 是一个很好的选择。：htmx 可以让你更快地构建和原型化应用，特别是对于小到中型的项目或者需要快速迭代的项目，它的简洁性和易用性可能会显著降低开发时间。

2024-01-25 20:43:10 1523 2

原创超越 Node.js：Bun 的创新与突破

运行时”（Runtime）在计算机编程中指的是一个软件程序执行时提供的环境，其中包含了执行程序所必需的库、调试和其他支持功能。在 JavaScript 的世界中，运行时负责解释执行 JavaScript 代码，并提供可以由 JavaScript 代码调用的 API，例如处理文件系统、网络通信、定时器等。就 JavaScript 语言而言，最著名的运行时环境是浏览器和 Node.js。浏览器提供了一个针对客户端脚本的运行环境，允许 JavaScript 与网页交互，控制 DOM 元素，响应事件等。

2024-01-24 16:51:29 1121

原创 GraphQL的力量：简化复杂数据查询

在 GraphQL 中，你需要定义一个类型系统（schema），在这个 schema 中指定你的数据模型和可用的查询和变更操作。id: ID!

2024-01-23 16:16:12 1101

原创轻松打造命令行工具：探索 zx | 超棒 NPM 库.md

工具的诞生背景是由于传统的 Unix shell 脚本（如 Bash）存在一些限制和不便之处，特别是对于那些熟悉 JavaScript 和 Node.js 生态的开发者来说。提供的是一个更为简洁、更易于使用的接口，同时集成了多种功能，使得编写复杂的脚本变得更加直观和便捷。是为了简化和加强命令行脚本的编写，让开发者能够使用更现代的语言特性来创建更加健壮和易于维护的脚本。，你可以非常方便地创建一个跨平台的脚手架工具，同样，你也可以引入其他的库来增强你的脚手架功能，例如。

2024-01-22 14:13:54 802

原创揭秘数字身份：如何通过浏览器指纹精准追踪用户

浏览器指纹（Browser Fingerprinting）是一种跟踪用户在线活动的技术，它通过收集用户浏览器和设备的一系列信息来构建一个独特的识别标记，即“指纹”。不同于传统的 cookie 追踪技术，浏览器指纹不需要在用户设备上保存任何信息，因此即使在用户禁用 cookie 的情况下，这种追踪方法依然有效。浏览器指纹通常包括以下信息：用户代理字符串（User-Agent String）：包含浏览器类型、版本、操作系统和版本等信息。浏览器插件详情：安装的浏览器插件列表和版本信息。字体列表：用户设备上安装的字

2024-01-21 16:11:57 888

原创高性能前端UI库 SolidJS | 超棒 NPM 库

SolidJS是一个声明式的、高效的、编译时优化的JavaScript库，用于构建用户界面。它的核心特点是让你能够编写的代码既接近原生JavaScript，又能够享受到现代响应式框架提供的便利。SolidJS的设计哲学强调了性能与简洁性。它不使用虚拟DOM（Virtual DOM），而是通过编译时的静态分析生成高效的真实DOM更新指令。这种方法使得SolidJS在性能方面非常出色，尤其是在渲染和更新视图方面。SolidJS的响应式系统基于细粒度的响应式原语。

2024-01-20 16:45:49 1221

原创 2024 React 状态管理库对比

不同的状态管理库适用于不同的场景和需求。选择合适的状态管理方案时，要考虑到应用的规模、团队熟悉度、库的生态系统和长期维护成本。性能通常不是决定性因素，因为大多数库都提供了足够的优化机制来满足性能需求。重要的是选择一个能够保持代码可维护性和可扩展性，并且与团队工作流程相匹配的解决方案。

2024-01-18 15:59:39 1138

原创多窗口量子纠缠技术实现

最近看到下面这个，多窗口下实现量子纠缠的特效感觉很惊艳和有创意。除 Three.js 的特效果部分，技术实现上还是很简单的。这里面核心两个技术点：比较常用的有两种方式：通过设置 localStorage/sessionStorage 的 setItem 可以在其他同源窗口下触发 StorageEvent 事件，实现广播效果：演示：兼容性：通过创建同名频道进行通讯。演示：兼容性：通过获取浏览器窗口在屏幕的位置+内外宽高，就可以获取到绝对的位置。3. 实现下面我基于 BroadcastChannel

2023-12-07 15:57:21 1081

原创大量 SVG 图标在 React 中的极速集成与应用

这边建议 WOFF 字体优先，WOFF 是为 Web 设计的字体格式，WOFF 内置了字体的压缩，会有比 TTF/OTF 更小的文件体积，浏览器兼容性在 98% 左右。在一些业务场景中，可能需要使用一些业务上自定义的图标，而这些业务图标消费起来需要很多重复的流程和样板代码，用多了很繁琐。期待效果，尽量减少 SVG 样板代码的编写，减少特殊样式的注入，减少 import 及减少网络请求。如何使用 svg 的全部优势，无论纯色还是彩色的都可正常使用，且减少样板代码及缩短链路呢？

2023-12-04 12:26:34 1162

原创前端开发环境与真实环境的接口联通的那些最佳实践

CORS 的问题本质是浏览器的限制，Same-site 导致的登陆 Cookies 无法携带也是浏览器的限制，那直接把浏览器的限制给去掉不就可以迎刃而解了。加上现在的构建或脚手架工具，如 Vite、Webpack5、Umi 等在开发环境下采用 ES Module 构建，线上采用单文件构建，导致传统的，访问业务域名，然后将资源代理到本地的方式出现问题，所以更合适的方式应该是如何在前端的本地环境下，可以流畅的访问业务域名下的接口。这两个问题，通常业务侧是不能给解决的，所以需要前端自行处理这两个问题。

2023-12-02 22:09:33 948

原创使用 Electron 来替代本地调试线上代理的场景

Chrome 94 版本不再放行，无法再携带 Cookies，也就是 Electron v14 之后的版本无法通过。新版本(v27)，通过复写。

2023-11-13 11:24:59 679

原创 Markdown 专用 Web 版目录树生成

在写文章时，想把项目的目录结构等信息放到文章中，但没有比较好的实现方式。虽然有tree命令，但样式不能定制，操作也比较繁琐。浏览器中刚好有API，可以很方便的处理文件和目录，于是就做了一个浏览器版的tree。

2023-02-07 12:12:08 1502 1

原创 Canvas 实现台球假想球精准定位

台球是一个让人非常着迷的运动项目，充满了各种计算逻辑，十分有趣。对于初学者，母球、目标球、袋口三者在一条线上的时候，是非常容易进球的，但对于三者不在一条线上时，就是需要假想球的帮助，然后假想球的位置对于初学者来说并不容易精准定位。于是我用了一种比较高效且精准的定位方法，并用 Canvas 将其过程进行了可视化。此方法在中杆击球下，可以实现百分百进球（当然你出杆不能歪😂）。

2023-01-31 15:10:24 3056

原创状态管理 Jotai 首个中文文档上线了

用了一段时间 Jotai，简单易用，很方便。和 Jotai 作者聊了下，希望文档支持多语言，方便更多的人阅读和使用，但作者暂时无这块的计划，也不打算在主站支持多语言。于是我就直接建立了一个仓库，同步官方文档内容，进行了中文语言的支持。

2023-01-16 15:53:28 1340

原创 Kindle 可旋转桌面时钟

自己的 Kindle 吃灰很久了，想做个时钟用，但是网上可选的时钟网站比较少，这些时钟网站里面，要么太简单界面也比较丑陋，要么内容太多有些本末倒置了，要么网址特别长输入网址的时候太麻烦。干脆自己写一个，没多少代码。（我的 Kindle 差不多十年前的了，系统比较旧，导致需要处理 Kindle 的浏览器兼容性，这里花了一些时间）

2023-01-15 18:57:26 6584 2