- 博客(666)
- 资源 (2)
- 收藏
- 关注
原创 JavaScript事件循环:为什么你的代码像在玩跳格子?
JavaScript 的事件循环机制虽然复杂,但通过形象化的比喻和实际代码分析,我们可以轻松理解它的运行原理。无论是日常开发还是性能优化,掌握事件循环的规则都能帮助我们写出更高效、更可靠的代码。下次看到回调函数,想象它们在排队坐过山车——VIP客户先上,普通客户耐心等待,而我们的杂技演员永远不会让盘子掉下来!
2025-03-27 11:07:46
559
原创 React + TypeScript 实战指南:用类型守护你的组件
TypeScript 为 React 开发带来了强大的类型安全保障,这里解析常见的一些TS写法
2025-03-05 09:18:46
578
原创 关于“前端已死”的命题
正如独孤求败从“利剑期”到“木剑期”的进化,前端开发者需超越框架之争,在工程体系构建、性能优化等深度领域建立护城河。市场调整淘汰的是低水平重复劳动者,对掌握核心竞争力的工程师而言,Web 生态仍是广阔天地。
2025-02-11 18:28:26
185
原创 深入理解 React 中 setState 的行为及状态更新时机
在 React 开发中,`setState` 是我们更新组件状态的核心 API。然而,`setState` 的行为因调用场景的不同而有所变化,这可能会让许多开发者感到困惑。特别是在 React 18 中,引入了自动批量更新机制,使得部分场景的行为发生了变化。本文将结合 React 17 和 React 18 的特性,对 `setState` 的行为和状态更新时机进行详细分析。
2025-01-06 09:15:20
956
原创 使用 `Node.contains()` 判断元素包含关系
在前端开发中,我们经常需要判断一个元素是否包含另一个元素,尤其是在处理 DOM 操作时。这时,`Node.contains()` 方法是一个非常实用的工具。
2024-12-17 09:14:55
561
原创 解析Reflect
Reflect 是 ES6 引入的一个内建对象,提供了一些用于操作对象的静态方法,这些方法通常与 Proxy 配合使用,简化了对象操作的代码。Reflect 主要的作用是作为一组更加标准化和一致的方式来执行常见的对象操作,比如获取属性、设置属性、删除属性等,尤其是在使用 Proxy 时,它提供了一种更加优雅的方式来执行默认的行为。
2024-11-19 09:26:50
651
原创 ESM 与 CommonJS:JavaScript 模块化的两大主流方式
在 JavaScript 开发中,模块化是一个重要的概念,它可以帮助我们将代码组织得更加清晰、可维护。模块化允许我们将复杂的应用拆分成多个小的、独立的部分,每个部分可以被单独开发、测试和调试。ESM(ECMAScript Modules) 和 CommonJS 是当前 JavaScript 中最流行的两种模块化方式,理解它们的差异,对于前端和后端开发者来说都至关重要。
2024-11-11 09:26:24
826
原创 使用 Nzh 进行阿拉伯数字与中文数字的转换
在编程中,我们常常需要处理数字的显示和转换,尤其是在需要将阿拉伯数字转换为中文数字的场景下,Nzh 是一个非常实用的工具。它不仅支持简单的数字转换,还包括科学记数法、金额格式化和自定义单位等多种功能。本文将详细介绍 Nzh 的安装、使用方法和 API。
2024-11-04 09:17:57
440
原创 重磅!WebStorm 个人版免费开放:JetBrains 为个人开发者带来福音
2024 年 10 月 24 日,程序员节这天,JetBrains 宣布了一项让开发者欣喜的消息:WebStorm 个人版全面免费开放供非商业用途使用。
2024-10-28 09:07:10
1486
原创 深入理解 Vue 3 的 `<Teleport>` 组件
在 web 开发中,良好的组件结构对于功能性和可维护性至关重要。Vue 3 提供了一个强大的功能——`` 组件,它允许你将组件模板的一部分“传送”到 DOM 中的其他位置。这在保持组件逻辑相关的同时,确保其在视觉层级中正确渲染时尤其有用。
2024-10-24 09:06:47
540
原创 Vue 3.3 新增宏函数:`defineOptions` 和 `defineSlots` 简介
Vue 3.3 引入了两个非常实用的新宏函数:`defineOptions` 和 `defineSlots`。这些函数让我们可以在使用 Vue 组件时写出更简洁、更高效的代码。
2024-10-22 09:50:52
557
原创 Vue 3 中 `setup()` 函数与 `<script setup>` 的本质区别
随着 Vue 3 的发布,组合 API 为开发者提供了更灵活的组件逻辑组织方式。其中,`setup()` 函数和 `` 语法是两个核心概念。
2024-10-21 09:30:07
537
原创 探讨Node.js生态中的npm与npx工具
在Node.js生态中,npm和npx是两个重要的工具,它们的功能虽然有所重叠,但使用场景却不同。理解它们的区别可以帮助开发者更高效地管理项目依赖与执行工具。
2024-10-18 09:27:46
425
原创 探索 JavaScript 中的 AbortController API:不仅仅是中断 HTTP 请求
在 JavaScript 中处理异步操作时,通常需要灵活的控制机制来中止任务。AbortController API 提供了一个强大且通用的方式来终止异步操作,不仅可以中断 HTTP 请求,还可以应用于多种异步任务,如事件监听、流操作等。在本文中,我们将详细探讨 AbortController 的使用场景、AbortSignal 的静态方法、事件处理中的中止机制,以及在实际开发中的一些最佳实践。
2024-10-17 09:04:54
1134
原创 深入比较 `@microsoft/fetch-event-source` 与 `event-source-polyfill`
本文将详细介绍两个常用库:`@microsoft/fetch-event-source` 和 `event-source-polyfill`,并对它们的异同进行深入比较,以帮助开发者选择最适合自己项目的方案。
2024-10-16 09:17:29
1614
原创 为什么 React 和 Vue 不采用像 Svelte 那样的编译方式?
探索为什么 React 和 Vue 不采用像 Svelte 那样的编译方式
2024-10-08 15:53:42
820
原创 对比 Babel、SWC 和 Oxc:JavaScript 和 TypeScript 工具的未来
随着现代前端开发的快速演变,JavaScript 和 TypeScript 的工具链不断更新,以满足开发者对性能和效率的需求。我们将对比三款流行的工具:Babel、SWC 和 Oxc,重点分析它们的特点、性能、应用场景以及适用性。
2024-10-08 08:58:05
2425
原创 Webpack 4 优化指南:提升构建性能与加载速度
在以前的前端开发中,Webpack 是为不可或缺的构建工具,而且有大量的项目是使用Webpack4 ,然而,随着项目规模的扩大,构建时间和包体积可能会成为瓶颈。本文将探讨一些有效的优化策略,帮助提升 Webpack 4 的构建性能和加载速度。
2024-09-26 09:28:07
783
原创 Babel 简介与常用库
Babel 是一个广泛使用的 JavaScript 编译工具,旨在将现代 JavaScript 代码(如 ES6+ 语法)转换为向后兼容的代码,以便能够在不支持新特性(如老版本的浏览器)上运行。
2024-09-24 09:26:00
997
原创 浅谈 React Fiber
React Fiber 是 React 为了提升性能和用户体验而引入的一项重要技术。通过将渲染任务分解成更小的单元,React 可以更好地控制渲染过程,实现更流畅、更灵活的 UI 更新。
2024-09-11 08:53:39
572
原创 React(v18)事件原理
新版 React(v18) 改进了事件处理的顺序,使其更符合浏览器的标准事件流。这意味着事件处理会更准确地按照捕获和冒泡阶段来执行,并且在初始化阶段会更高效地绑定事件。这样做的好处是可以更一致地模拟浏览器的事件行为,确保事件处理的顺序和效果更加可靠。
2024-09-10 09:00:10
470
原创 在 Vite 项目中自动为每个 Vue 文件导入 base.less
在 Vue.js 项目中,使用 Less 作为 CSS 预处理器时,我们通常会创建一个全局的样式文件(如 `base.less`),用于存放一些全局变量、混合、通用样式等。为了避免在每个 Vue 组件中手动导入这个文件,我们可以通过配置 Vite 来自动导入 `base.less` 文件。
2024-09-04 19:28:44
961
翻译 宣布 Vue 3.5 版发布
在 3.5 版本中,Vue 的响应式系统经历了另一轮主要重构,实现了更好的性能和显著改进的内存使用(减少了 56%),没有行为上的变化。这次重构还解决了 SSR 中计算属性悬挂导致的过期计算值和内存问题。
2024-09-04 09:15:02
1664
原创 Hooks是干什么的?
在编程的世界里,“Hooks”是一个你可能会经常听到的术语,特别是在前端开发中。它们为开发者提供了一种优雅且高效的方式来扩展和控制代码的执行流程。本文将深入浅出地介绍Hooks是什么,它们的作用是什么,以及如何在代码中使用它们,并结合React和Vue3这两个流行的前端框架来讲解。
2024-08-07 09:02:42
633
原创 为什么要使用 `ref`?浅谈 Vue 的响应式系统
在使用 Vue 进行开发时,我们经常会听到 `ref` 这个术语。很多初学者都会疑惑:为什么我们需要使用带有 `.value` 的 `ref`,而不是普通的变量?为了回答这个问题,我们需要简单地讨论一下 Vue 的响应式系统是如何工作的。
2024-07-17 11:18:40
496
原创 Promise 详解:JavaScript 中的异步处理利器
在现代的 JavaScript 编程中,异步操作非常普遍。我们常常需要进行诸如网络请求、读取文件或处理定时器等任务,而这些任务的完成时间是不确定的。为了解决这个问题,JavaScript 引入了 `Promise`,一种处理异步操作的机制。本文将详细介绍 `Promise`,并展示其主要 API。
2024-07-09 09:55:51
340
原创 JS的迭代与递归
在JavaScript中,迭代和递归是两种常见的控制流程,用于处理重复任务和数据结构的遍历。理解并掌握这两种技术,不仅可以帮助我们编写高效的代码,还能让我们更好地解决复杂的问题。
2024-06-17 09:06:43
686
原创 React Hooks memo、useMemo 以及 useCallback 的使用详解
memo、useMemo 以及 useCallback 是三个常用的 React Hooks,它们可以帮助您优化组件的性能。但是,过度使用这些 Hooks 可能会降低代码的可读性和可维护性。因此,在使用这些 Hooks 之前,需要仔细考虑组件的性能需求。只有在子组件渲染成本比较高的情况下,才考虑使用 memo 缓存组件。只有在函数的计算成本比较高的情况下,才考虑使用 useMemo 缓存函数的返回值。只有在函数需要在多个地方使用的情况下,才考虑使用 useCallback 缓存函数的引用。
2024-05-24 09:15:02
396
原创 Vue.observable — 最小化的跨组件状态存储器
Vue.observable,让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象
2024-04-29 15:19:02
157
原创 深入了解 JavaScript 中的 Promise 相关方法:all、race 和 allSettled
- `Promise.all()` 会在所有 Promise 实例成功完成时才成功,一旦有一个失败就会立即失败。- `Promise.race()` 会在任何一个 Promise 实例率先成功或失败时返回结果。- `Promise.allSettled()` 则会等待所有 Promise 实例结束后返回结果,无论是成功还是失败。
2024-04-07 14:42:27
618
FFmpeg+nginx.rar
2020-10-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人