前端技术

在前端开发中，有时我们需要在用户离开当前页面之前执行一些操作，例如保存用户未保存的数据、发送统计日志、弹出确认提示或清理资源。判断用户是否离开页面是一个常见的需求，但实现起来可能会有一些细微之处。本文将详细探讨几种在不同场景下判断用户离开页面的方法，并讨论它们的优缺点及适用场景。 核心思想：利用浏览器提供的事件监听器 (如 beforeunload, unload, pagehide, visibilitychange) 来监测页面生命周期状态，从而判断用户是刷新、关闭、切换标签页还是导航到其他页面。 一、页面生命周期事件概览在浏览器环境中，用户离开页面的行为会触发一系列的页面生命周期事件。理解这些事件是正确判断用户离开页面的基础。 事件名称 描述 触发时机 是否可取消 主要用途 beforeunload 在页面即将卸载之前触发，可以阻止页面卸载并显示确认弹窗。 用户尝试关闭、刷新、后退、导航到新页面等。浏览器主动调用 window.onbeforeunload = func。 是 (返回字符串或 event.returnValue) 提示用户保存未保存的数据...

在 Web 性能优化领域，用户感知的加载速度至关重要。除了常规的网络和渲染优化外，浏览器还有一种强大的特性可以显著提升用户体验，尤其是在用户进行前进/后退导航时的加载速度——这就是 BFCache (Back-Forward Cache)，即“往返缓存”或“后退/前进缓存”。BFCache 允许浏览器将整个页面（包括 DOM 状态、JavaScript 堆以及当前页面的状态）存储在内存中，以便用户在通过浏览器后退 (Back) 或前进 (Forward) 按钮导航时，能够瞬间恢复到离开时的状态，而无需重新加载页面。 核心思想：BFCache 是一种浏览器优化策略，它将用户离开的整个页面状态（而非仅仅是资源）存储在内存中，以便用户通过“后退/前进”按钮再次访问时能够实现即时页面恢复，极大地提升了导航体验。 一、什么是 BFCache？BFCache 是一种用于瞬时页面加载的浏览器缓存机制，其核心思想是：当用户从一个页面 A 导航到页面 B，如果用户随后点击了浏览器的“后退”按钮返回页面 A，浏览器不会重新发送网络请求、重新解析 DOM、重新执行...

Electron (原名 Atom Shell) 是一个由 GitHub 开发的开源框架，它允许你使用 Web 技术 (HTML, CSS, JavaScript) 来构建跨平台的桌面应用程序。通过将 Chromium 渲染引擎和 Node.js 运行时集成到一个单一的项目中，Electron 使得前端开发者只需掌握一套技术栈，就能创建出功能强大、拥有原生外观和感觉的桌面应用，并能够访问操作系统底层功能。 核心思想：借助 Chromium (渲染视图) 和 Node.js (处理操作系统交互) 的能力，Electron 让 Web 技术栈能够构建全功能的跨平台桌面应用。 一、Electron 简介与优势1.1 什么是 Electron？Electron 可以被简单理解为一个微型浏览器套壳，它包含了： Chromium：提供渲染用户界面的能力，这意味着你可以使用 HTML、CSS 和 JavaScript 来构建应用的 UI。 Node.js：提供访问操作系统底层 API 的能力，例如文件系统、网络、进程管理等。 原生 API 集成：Electron 提供了一套 API，...

JavaScript 中的 fetch API 提供了一种现代、强大的方式来发送网络请求。然而，初学者在使用 async/await 语法处理 fetch 请求时，经常会遇到一个困惑：为什么需要两次 await 才能获取到实际的数据？本文将深入探讨 fetch API 的设计原理，解释这“两次等待”背后的逻辑。 “Fetch API 的设计哲学：将 HTTP 响应的元数据与实际数据流分离处理。” 一、fetch API 概览fetch API 是 Web API 的一部分，用于替代老旧的 XMLHttpRequest 对象，提供了一个更强大、更灵活的用于获取资源的接口。它基于 Promise，使得异步请求的处理更加简洁。 一个典型的 fetch 请求（不使用 async/await）看起来是这样的： 123456789101112131415fetch('https://api.example.com/data') .then(response => { // 第一次 then: 处理响应头和状态 if (!respons...

MarkdownLint 是一系列用于规范和检查 Markdown 文本格式的工具集合。它基于预定义的规则集（或用户自定义规则），自动扫描 Markdown 文件，识别出可能不符合规范、不一致、影响可读性或潜在渲染问题的语法或风格问题。通过 MarkdownLint，可以确保 Markdown 文档的质量、一致性和可维护性，特别是在团队协作或项目文档发布时。 核心思想：自动化检查 Markdown 文件的格式、风格和潜在错误，以确保文档质量和一致性。 一、为什么需要 MarkdownLint？Markdown 语言以其简洁性和易读性而广受欢迎，但其灵活的语法也可能导致以下问题： 风格不一致：团队成员可能有不同的 Markdown 写作习惯（例如，使用空格还是制表符缩进，标题与内容之间是否有空行，如何使用列表项符号等），导致文档风格混乱。 可读性下降：不规范的格式会影响文档的清晰度和可读性。 渲染问题：某些不标准的 Markdown 语法可能在不同的渲染器（如 GitHub、GitLab、Jupyter、各种 Markdown 编辑器）上呈现出不一致或错误的效果。 维护困...

在软件开发、项目管理和技术文档编写中，图表是传达复杂信息、说明系统架构、业务流程或交互逻辑的强大工具。然而，传统上绘制图表往往需要专门的图形编辑软件，操作繁琐，不易版本控制，也难以在文本文件中直接嵌入。这时，Mermaid 应运而生。Mermaid 是一个基于 JavaScript 的库，它允许你使用简单的类 Markdown 文本语法来定义和渲染各种图表，并将其嵌入到 Markdown、HTML 或其他 Web 环境中。它极大地简化了图表的创建、维护和版本控制，是现代文档编写的利器。 “Mermaid 的核心思想是‘图表即代码’。这意味着你可以像编写代码一样编写图表的逻辑，从而实现图表的版本控制、自动化生成和轻松分享。它让复杂的可视化变得触手可及。” 一、Mermaid 简介 官方网站：mermaid.live (在线编辑器) GitHub 仓库：mermaid-js/mermaid Mermaid 是一款基于 JavaScript 的图表绘制工具，它采用文本描述语言来定义图表结构，然后将其渲染成 SVG 或 PNG 格式的图形。它的目标是： 简化图表创建...

Tree Shaking 是一种死代码消除 (Dead Code Elimination) 技术，主要应用于 JavaScript 模块打包过程中。它的核心思想是移除模块中未被实际使用的代码，从而显著减小最终的打包文件体积。这个术语最初由 Rollup.js 提出并推广，现已被 Webpack 等主流构建工具广泛支持。 核心思想：仅打包生产环境中实际需要的代码，通过移除“枯叶”（未使用的代码），使“树”（项目代码）更精炼。 一、为什么需要 Tree Shaking？随着现代 Web 应用的复杂性增加，项目往往会引入大量的第三方库和工具，或者存在许多内部的工具函数、组件等。即使我们只使用这些库或模块中的一小部分功能，传统的模块打包方式（尤其是在早期 CommonJS 模块系统中）可能会将整个模块文件包含在最终的构建产物中。这导致： 文件体积膨胀 (Bundle Bloat)：即使只用了一个库的 debounce 函数，整个 lodash 库也可能被打包进来。 加载时间延长：更大的文件意味着更长的网络传输时间和浏览器解析/执行时间，从而影响用户体验。 资源浪费：增...

The Elm Architecture (TEA) 是一种用于构建交互式 Web 应用程序的函数式架构模式。它最初由 Elm 语言社区设计和推广，但其核心思想和模式因其可预测性、可测试性和易于理解性而非常成功，并被广泛借鉴和应用于其他前端框架和语言，如 React (特别是 Redux)、Vue (Vuex)、ReasonML (Redux-Like)、甚至 Swift (The Composable Architecture) , Rust (Relm) 和 Golang (bubbletea) 等。 核心思想：将应用程序状态、状态更新逻辑和 UI 渲染逻辑清晰地分离为三个核心部分：Model、Update 和 View，并通过一个单向数据流进行管理。 一、为什么需要 The Elm Architecture？在传统的命令式或面向对象编程中，UI 应用程序的状态管理往往是复杂且容易出错的部分： 状态分散：应用程序状态可能散布在各个组件中，难以追踪和同步。 多向数据流：数据可以在组件之间以多种方式流动，导致难以预测状态变化。 调试困难：当出现 bug 时，很难确定是哪...

PM2 (Process Manager 2) 是一个功能丰富的、生产就绪的 Node.js 应用进程管理器，它专注于提供高可用性、简化部署和自动化运维。它通过监控应用状态、自动重启崩溃进程、实现零停机重新加载和内置负载均衡来确保 Node.js 应用的健壮运行。PM2 是部署 Node.js 应用到生产环境的推荐工具之一。 核心思想：PM2 将 Node.js 应用作为一个守护进程 (daemon) 托管，负责其生命周期管理。它能够自动处理应用崩溃、实现多核 CPU 利用 (集群模式)、简化日志管理和提供实时监控，从而保证应用服务的持续稳定运行。 一、为什么需要 PM2？传统的 Node.js 应用启动方式通常是 node app.js。这种方式在生产环境中存在诸多问题： 单点故障 (Single Point of Failure)：如果应用进程因为未捕获的异常崩溃，整个服务将停止，用户无法访问。 资源利用不足：Node.js 默认是单线程模型，即使服务器有多个 CPU 核心，一个 node app.js 进程也只能利用其中一个核心，无法充分利用硬件资源来处理高并发请...

Node.js 的 worker_threads 模块 允许开发者在 Node.js 应用程序中创建真正的多线程。传统上，Node.js 是单线程的，其事件循环处理 I/O 密集型任务非常高效，但在面对 CPU 密集型任务时，单线程模型会导致事件循环阻塞，从而影响应用程序的响应性。worker_threads 模块正是为了解决这一痛点而引入的，它使得 Node.js 能够更好地利用多核 CPU 资源，执行并行计算，而不会阻塞主事件循环。 核心思想：将 CPU 密集型任务从主线程卸载到独立的 Worker 线程中执行，从而防止主事件循环被阻塞，保持应用程序的响应性和吞吐量。 每个 Worker 线程拥有独立的 V8 实例、事件循环和内存空间，通过消息传递进行通信。 一、为什么需要 worker_threads？Node.js 以其非阻塞 I/O 模型而闻名，这得益于其单线程的事件循环。对于网络请求、文件读写等 I/O 密集型操作，Node.js 可以通过异步回调或 Promise 迅速处理大量并发请求。然而，这种模型在处理以下情况时会遇到瓶颈：...

async/await 是 ES2017 (ECMAScript 2017) 引入的 JavaScript 语法糖，旨在以更简洁、更同步的方式编写基于 Promise 的异步代码。它使得异步操作的链式调用和错误处理变得与传统同步代码非常相似，极大地提升了代码的可读性和可维护性。其核心原理是基于 Promise 和 Generator 函数的结合，并在 JavaScript 事件循环 (Event Loop) 的机制下运行。 核心观点：async/await 并非替代 Promise，而是 Promise 的语法糖。它通过将 async 函数编译成一个状态机，利用 await 关键字暂停函数执行，并通过 Promise 的回调机制在异步操作完成后恢复执行，从而在不阻塞主线程的前提下，实现了“同步”书写异步逻辑的体验。 一、为什么需要 async/await？虽然 Promise 解决了传统回调函数（Callback Hell）的嵌套问题，并通过链式调用提供了更好的结构，但复杂的 Promise 链仍然可能导致代码冗长和理解障碍，尤其是在处理多个相互依赖的异步操作时。 Pr...

Promise.all() 是 JavaScript Promise 对象的一个静态方法，它接收一个 Promise 可迭代对象（如数组）作为输入，并返回一个新的 Promise。这个新的 Promise 在所有输入的 Promise 都成功解决后才解决，并返回一个包含所有解决值的数组，且值的顺序与输入 Promise 的顺序一致。如果输入的 Promise 中有任何一个被拒绝，Promise.all() 返回的 Promise 就会立即被拒绝，其拒绝原因将是第一个被拒绝的 Promise 的拒绝原因。 核心思想：将多个独立的异步操作视为一个整体。只有当所有子任务都成功完成时，整体任务才算成功；只要有一个子任务失败，整体任务就立即失败。 一、基本概念与作用Promise.all() 主要用于处理这样一种场景：你需要同时执行多个异步操作，并且只有当所有这些操作都成功完成时，你才能进行下一步处理。它提供了一种优雅的方式来管理并发的异步任务，并聚合它们的结果。 其主要作用包括： 并行执行异步任务：提高效率，避免串行执行带来的等待时间。 统一结果处理：将多个异步操作的结果合并到...

Promise 是 JavaScript 中进行异步编程的解决方案之一，它代表了一个异步操作的最终完成（或失败）及其结果值。它提供了一种更结构化、更易于管理和理解异步操作的方式，旨在解决传统回调函数所导致的“回调地狱 (Callback Hell)”问题。Promise 对象在 ES6 (ECMAScript 2015) 中被正式纳入标准，成为了现代 JavaScript 异步编程的基石。 核心思想：Promise 是一种异步操作的状态容器。它将异步操作封装成一个对象，提供统一的接口（.then(), .catch(), .finally()）来处理操作成功时的数据和失败时的错误，从而避免深层嵌套回调，使异步代码扁平化且更具可读性。 一、为什么需要 Promise？—— 回调地狱的困境在 Promise 出现之前，JavaScript 主要通过回调函数 (Callback Function) 来处理异步操作。当多个异步操作需要按顺序执行，或者一个异步操作的结果依赖于另一个异步操作时，就会导致回调函数的层层嵌套，形成难以阅读和维护的“回调地狱”： 1234567891011...

JavaScript 是一种单线程语言，这意味着它在同一时间只能执行一个任务。然而，现代 Web 应用需要处理大量的异步操作，如网络请求、定时器、用户交互等。为了在单线程模型下实现非阻塞的并发执行，JavaScript 引入了事件循环 (Event Loop) 机制，并在此基础上划分了两种任务类型：宏任务 (Macro tasks) 和 微任务 (Micro tasks)。理解这两种任务及其执行顺序是掌握 JavaScript 运行时行为和优化性能的关键。 核心思想：JavaScript 通过区分宏任务和微任务，并配合事件循环，在单线程环境下实现高效且有序的异步执行，确保程序的响应性和逻辑完整性。 一、为什么会有宏任务和微任务？JavaScript 的单线程特性意味着所有代码都在一个主执行线程上运行。如果一个长时间运行的任务阻塞了主线程，整个页面就会“冻结”，用户体验极差。为了解决这个问题，异步操作被设计成非阻塞的：当一个异步操作完成时，它会把一个任务（通常是一个回调函数）推送到一个任务队列中，等待主线程空闲时再执行。 然而，仅仅有一个任务队列是不够的。某些异步任务比其...

JavaScript Promise 是一种用于处理异步操作的机制，它代表了一个异步操作最终完成（或失败）的结果。在 ES6 (ECMAScript 2015) 中引入，Promise 旨在解决传统回调函数（Callback）模式中存在的“回调地狱”（Callback Hell）问题，提供更清晰、更可维护的异步代码编写方式。 核心思想：Promise 提供了一种结构化的方式来管理异步操作，将异步操作的结果视为一个未来值（Future Value），允许我们链式地处理成功和失败的情况。 一、为什么需要 Promise？在 Promise 出现之前，JavaScript 主要通过回调函数处理异步操作，例如 setTimeout、Ajax 请求等。当存在多个相互依赖的异步操作时，代码会形成深层嵌套的回调结构，导致以下问题： 回调地狱 (Callback Hell / Pyramid of Doom)：代码可读性极差，难以理解和维护。 错误处理困难：每个回调函数都需要单独处理错误，且错误不能很好地向上冒泡。 流程控制复杂：难以实现复杂的异步流程（如并行执行、竞态等）...

Node.js 的 fs (File System) 模块 提供了与文件系统进行交互的 API。它允许 Node.js 应用程序执行各种文件操作，如读取文件、写入文件、创建目录、删除文件等。fs 模块是 Node.js 的核心模块之一，无需安装，通过 require('fs') 即可使用。 核心思想：将底层操作系统提供的文件系统操作抽象为统一的 JavaScript API，并提供同步和异步两种操作模式，以适应 Node.js 的事件驱动特性。 它是 Node.js 应用与磁盘数据交互的桥梁。 一、为什么需要 fs 模块？在任何应用程序中，与文件系统交互都是常见的需求。无论是读取配置文件、存储用户数据、处理上传文件，还是管理日志，fs 模块都提供了基础能力： 数据持久化：将应用程序的数据写入磁盘，以便长期存储。 配置管理：读取和解析应用程序的配置文件。 日志记录：将应用程序的运行日志写入文件。 文件上传下载：处理客户端上传的文件，或提供文件下载服务。 目录管理：创建、删除、遍历目录结构。 系统监控：获取文件或目录的元数据（如大小、修改时间），进行监控和管...

在 Node.js 开发中，处理文件路径、统一资源定位符（URL）及其查询字符串是日常任务。path、url 和 querystring 这三个核心模块提供了强大且跨平台的功能，使得开发者能够高效、安全地解析、格式化和操作这些关键的标识符数据。 核心思想：path 抽象操作系统文件路径差异；url 标准化 URL 的解析与构建；querystring 专注于查询参数的编码与解码。 它们共同构成了 Node.js 应用在文件系统和网络层面的基础数据处理能力。 一、path 模块：处理文件和目录路径path 模块提供了用于处理文件和目录路径的工具函数。它无需 require() 即可使用（通常是 const path = require('path');），并且抽象了操作系统之间路径表示方式的差异。 1.1 核心概念 跨平台兼容性：path 模块设计用于处理 POSIX (Linux/macOS) 和 Windows 操作系统之间的路径差异。它提供了 path.sep（路径片段分隔符）和 path.delimiter（环境变量分隔符）来适应不同平台。...

JavaScript 的原型链 (Prototype Chain) 是其实现继承的核心机制，也是理解 JavaScript 面向对象编程的关键。与 C++ 或 Java 等传统面向对象语言通过类（class）来实现继承不同，JavaScript 是一种基于原型 (Prototype-based) 的语言。这意味着对象可以直接从其他对象继承属性和方法。 核心思想：每个 JavaScript 对象都有一个指向其原型 (prototype) 的内部链接。当访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 就会沿着这条链向上查找，直到找到该属性或方法，或者查找到原型链的末端（null）。 一、理解原型链的基石：[[Prototype]]、__proto__ 和 prototype在深入原型链之前，我们需要区分三个核心概念： 1.1 1. [[Prototype]] (隐式原型) 这是一个存在于每个 JavaScript 对象上的内部属性。 它指向该对象的原型对象。 它是真正构成原型链的链接。 在 ES5 之后，可以通过 Object.getPro...

JavaScript 闭包 (Closure) 是一个复杂但极其重要的概念，它允许函数访问并操作其外部作用域 (Outer Scope) 中的变量，即使该外部函数已经执行结束。换句话说，闭包是函数和该函数声明时所处的词法环境 (Lexical Environment) 的组合。这个词法环境包含了该函数在创建时能访问到的所有局部变量。 核心思想：函数“记住”并“携带”了它诞生时可以访问的外部变量，即便它脱离了诞生的环境被执行，这些变量也依然可用。 闭包是 JavaScript 中实现私有变量、函数工厂、以及管理状态等高级编程模式的关键。 一、理解作用域和词法环境要理解闭包，首先需要对 JavaScript 的作用域 (Scope) 和词法环境有清晰的认识。 词法作用域 (Lexical Scoping)：JavaScript 采用词法作用域，这意味着函数的作用域在函数定义时就已经确定，而不是在函数调用时确定。函数可以访问其声明时所在的作用域，以及所有更外层的作用域。 12345678function outer() { let name = "A...

立即执行函数表达式 (Immediately Invoked Function Expression, IIFE) 是一种 JavaScript 编程模式，它涉及到定义一个函数并立即执行它。这种模式的主要目的是创建私有作用域，从而避免变量污染全局作用域，并允许通过闭包间接访问某些私有数据。 核心思想：函数声明后立即执行，创建独立的词法作用域，以实现数据封装和避免全局污染。 一、什么是 IIFE？IIFE，全称 Immediately Invoked Function Expression，直译为“立即调用函数表达式”。它是一种将函数定义与函数执行合并在一起的 JavaScript 语法构造。简而言之，就是声明一个函数并紧接着执行它，通常用于创建一个独立的作用域，封装变量和函数，防止它们泄露到全局作用域中。 在 JavaScript 中，函数是一等公民 (First-Class Citizen)，这意味着函数可以像任何其他值（如数字或字符串）一样被处理。函数表达式是 JavaScript 中定义函数的一种方式，它可以被赋值给变量，也可以作为参数传递。IIFE 利用了函数表...