redrun博客

JavaScript二维数组初始化的坑：避免fill([])的引用陷阱当使用new Array(r).fill([])初始化二维数组时，所有子数组实际上指向同一个内存引用。修改任意子数组会导致所有元素同步变化，因为JavaScript数组是引用类型。正确做法是使用循环或Array.from/map方法独立创建每个子数组，确保引用独立。推荐写法：Array.from({length:r},()=>[])或new Array(r).fill().map(()=>[])。原始类型不受此影响，但引用类型需特别注意

Node.js 环境下 TypeScript + ESM 开发环境配置指南本文介绍了使用 TSX 模块构建 Node.js 下的 TypeScript 开发环境的最佳实践。TSX 作为新一代 TypeScript 运行时，具有原生 ESM 支持、高性能和零配置等优势，能完美替代 tsc+nodemon 组合。主要内容包括：环境准备与项目初始化TypeScript 配置文件(tsconfig.json)详解package.json 关键配置项目结构与示例代码开发工作流说明常见问题解决方案

广告屏蔽插件的内部细节：EasyList 规则详解；为什么广告屏蔽不直接用 CSS/JS屏蔽广告？​**

前端项目版本更新后如何实现自动刷新页面？(终极指南)

离屏渲染（Offscreen Rendering）作为一种优化渲染性能或实现特定功能的技术，广泛应用于Web开发、数据可视化和桌面应用等领域。刚开始混淆二者的技术原理和应用场景，导致选型错误或性能问题。所以本文将从技术实现、核心目标、适用场景等维度，详细拆解两者的。或视频流，通过创建隐藏的浏览器窗口完整渲染页面内容后导出结果。注意：这个动图是Electron根据画面实时动态生成的png图片。（如Electron）的离屏渲染实现方式存在显著差异。，通过将复杂的图形计算从可见区域（如屏幕）移至。

npm包autocannon牛逼的后台压力测试库

从node:xxx 到模块系统演进：Node.js 的过去、现在与未来的思考

理解 Node.js 中的 process`对象与常用操作

UnionFS 是一种能够将多个文件系统层叠的文件系统技术。在容器化环境中，UnionFS 主要用于合并多个文件系统层，以便容器可以共享相同的基础镜像，并在此基础上进行文件修改。只读镜像层（Read-only layers）：这些层是基础镜像，多个容器可以共享这些层。可写层（Writable layer）：这是每个容器的独立层，所有对文件系统的修改都会记录在这个层级。UnionFS 的主要特点是“写时复制”（Copy-on-Write，COW）。

生成器是一种特殊类型的迭代器，它允许函数在执行过程中暂停，并在稍后的某个时刻继续执行。这种机制可以节省内存，因为生成器不会一次性将所有的值都加载到内存中，而是惰性地生成数据。通常，生成器使用yield关键字来暂停函数并返回值，直到下次请求时恢复执行。生产者-消费者模式通常涉及两个主要角色：生产者和消费者。生产者负责生成数据或资源，并将其提供给消费者；消费者则使用或处理这些数据。为了保证数据的顺序和有效性，通常会有一个缓冲区或队列来存储生产的数据，消费者从中提取数据进行处理。

在处理中文字符串的 Base64 编码与解码时，关键在于如何正确地将字符转换为字节数据。通过手动处理每个字节或使用现代的和API，我们可以确保中文字符能够正确地进行 Base64 编码与解码。手动实现：适用于那些需要详细控制编码过程的场景。你可以深入理解 Base64 编码的每个细节，并根据需要进行优化。使用 API：对于大多数情况，和API 提供了一种更简洁、直接的方式来处理编码和解码，减少了手动操作的复杂性。

Base64 编码是一种将二进制数据转换为可打印字符的编码方式。它将每三个字节（24 位）的二进制数据转换为四个字符，每个字符由64个字符集合中的一个表示。这使得数据可以通过文本协议传输（如电子邮件、HTTP 请求等），而不会出现二进制数据引起的字符编码问题。Base64 编码是一种常见的数据编码方式，广泛用于数据传输，尤其是在 HTTP 请求、电子邮件等场景中。Base64 将每 3 个字节的二进制数据编码为 4 个字符，编码后的数据仅包含可打印字符，便于传输。

在 JavaScript 中，日期和时间的处理往往是开发中不可避免的部分。是 ISO 8601 格式中的一个分隔符，用于将日期部分和时间部分分开。方法，将它们转换为时间戳（即从 Unix 纪元到指定日期的毫秒数），然后对两个时间戳进行比较。对象用于表示时间和日期。它可以创建一个包含日期和时间的对象，支持操作日期和时间。这个日期格式遵循 ISO 8601 标准，可以表示精确到毫秒的日期和时间。返回的是一个完整的、易于理解的日期时间字符串，表示该日期对象的详细信息。起，到该日期对象表示的时间的毫秒数。

我们将通过 HTML 和 JavaScript 创建一个动态蜈蚣。蜈蚣由多个节段组成，每个节段看起来像一个小圆形，并且每个节段上都附带有“脚”。蜈蚣的头部会在画布上随机移动。

在现代的 Web 开发中，处理文件上传和导出功能已经变得越来越常见，尤其是 Excel 文件的导入与导出。为了帮助你快速实现这一功能，本文将通过一个简单的 Vue 示例，演示如何在 Vue 中集成 Excel 文件的导入与导出功能。XLSX.js 是一个强大的 JavaScript 库，可以在浏览器中解析和生成 Excel 文件。属性用来指定如何处理工作表的第一行（通常是列标题）以及如何映射到 JSON 对象的属性名。在下面的代码中，我们展示了如何在 Vue 组件中实现 Excel 文件的导入和导出。

Vue 2 和 Vue 3 中的 Vuex 使用方法差异：Vue 3 引入了 Composition API，因此推荐使用useStore()钩子来访问 Vuex 状态，而不是像 Vue 2 中那样使用。Vue 3 中的 Vuex 使用方式更加简洁、灵活，并且与 TypeScript 的支持更加紧密。vue3同学使用pinia是更好的选择状态管理的变化：Vue 3 的 Vuex 使用方式更加符合现代前端开发的趋势，使得状态管理更加模块化、可组合，增强了代码的可维护性和可读性。

子组件属性透传，简单来说，就是将父组件传递给子组件的属性，继续传递给子组件内部的某些元素或更深层的子组件。这对于保持组件的灵活性和解耦非常重要。举个简单的例子，当我们在父组件传递了classstyle或其他自定义属性时，如何将这些属性透传到子组件的 DOM 元素或更深层的组件？无论是在 Vue 2 还是 Vue 3 中，属性透传是一个常见且重要的功能，尤其在开发可复用的组件时。通过，开发者可以更细致地控制父组件属性的传递和绑定，避免默认的属性透传行为可能带来的问题。

无论是在 Vite 还是 Webpack 中，处理 SVG 图标的关键是选择合适的工具和插件来高效地管理这些资源。在开发中，动态加载和热更新能够提高效率；然而，在实际项目中，通常需要将多个 SVG 图标合并成一个图标集，这样可以避免重复请求多个 SVG 文件，提高页面加载速度。是一个专门为 Vite 构建工具设计的插件，它可以帮助开发者高效地管理和打包 SVG 图标，尤其适合处理大量的图标资源。在 Vite 和 Webpack 的构建过程中，我们可以使用不同的插件来优化 SVG 图标的管理和加载方式。

在 Ant Design Vue 的Table组件中，我们可以使用来对某列的渲染进行自定义。我们将使用rowSpan来控制每个单元格的合并效果。表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为0时，设置的表格不会渲染。使用自定义渲染函数，结合数据可以实现单元格合并功能。

在前端开发中，当面对多个异步请求时，如何有效地管理这些请求以减少等待时间，显得尤为重要。通过并行化请求分组执行和缓存已请求的数据，我们可以显著提升应用的响应速度和用户体验。

通过上述方法，我们可以有效地解决 Vue 项目在打包后，环境变量丢失的问题。确保.env文件正确配置。清除缓存并重新打包。使用检查环境变量是否正常加载。使用 webpack明确注入环境变量。确保部署环境配置了正确的环境变量。

根据用户的 IP 地址随机展示一条励志名言。搭建基本的 Web 服务器，还融合了对 JSON 数据文件的导入和利用。中间件会将请求体中的 JSON 数据解析为 JavaScript 对象，方便后续的处理。在现代的 Web 应用中，许多前端框架（例如 React、Vue.js）会使用。它主要用来解析客户端通过 HTML 表单提交的数据，通常是键值对的形式。当客户端（例如浏览器或移动设备）向服务器发送包含 JSON 数据的请求时，我这个人走得很慢，但是我从不后退。，你将看到包含 IP 地址和随机名言的响应。

在 Web 开发中，有时你需要监听页面关闭或刷新事件，并根据情况执行不同的操作。可以监听页面关闭或刷新事件，但无法区分这两者。通过设置一个标记，可以判断页面是否刷新。通过检查，可以确定页面是否被刷新。虽然事件能处理很多场景，但如果你需要更精确的控制，可以结合或来判断页面是否刷新。记住需要进行适当的兼容性测试。

在 JavaScript 中，除了浏览器内置的标准事件外，还可以创建和使用自定义事件。自定义事件允许开发者根据特定需求触发和监听事件，从而实现模块间的解耦和更复杂的交互逻辑。自定义事件非常适合用于构建可扩展和灵活的应用，特别是在模块化开发或前端框架中。创建和触发自定义事件要创建和触发自定义事件，可以使用构造函数。它允许我们定义一个新的事件类型，并可选地传递额外的数据（通过detail属性）。创建自定义事件// 创建一个自定义事件' } // 传递的数据});：事件的名称。detail。

Cookie 是浏览器用于存储信息的小型数据片段。当用户访问网站时，服务器可以在浏览器中设置 Cookie，浏览器也会在每次向服务器发送请求时自动携带这些 Cookie。通过 Cookie，网站可以识别用户、保持登录状态，甚至存储用户的偏好设置。JavaScript Cookie 与服务器生成的 Cookie 在工作方式、存储和访问安全性上有着显著的区别。JavaScript Cookie 数据不会自动随着每次 HTTP 请求一起发送给服务器;

通过返回路由对象来控制 Vue Router 的跳转，不仅能让代码更简洁，还能提高可读性和维护性。特别是在涉及到登录验证、权限管理、动态路由等复杂逻辑时，这种优化方法能够使代码更加清晰，并减少不必要的冗余部分。希望这篇文章能帮助你优化 Vue 项目中的路由守卫逻辑，让你的代码更加高效与易懂。