首页 文章列表 标签墙 返回找工具啦

前端开发 共 159 篇文章

TypeScript 联合类型：string | number 的使用
2026-04-08 16:28:55
TypeScript 联合类型：string number 的使用 基本概念理解 了解 TypeScript 联合类型的基本概念。联合类型是一种允许变量具有多种类型之一的特性，使用 操作符连接不同类型。string number 表示一个值可以是字符串或数字类型。 声明 一个 string numb
TypeScript 联合类型 类型收窄
56 0
JavaScript 对象属性描述符与不可扩展对象
2026-04-08 12:24:32
JavaScript 对象属性描述符与不可扩展对象 在 JavaScript 中，对象不仅仅是一个键值对的集合。每一个属性背后都隐藏着一套控制机制，决定了这个属性是否可以被修改、被遍历或被删除。掌握这些机制，能让你精确控制对象的行为，防止代码被意外篡改。 1. 查看属性的“身份证” 每个属性都有一个
JS对象 属性描述符 不可扩展对象
62 0
TypeScript 泛型问题：泛型约束与类型推断
2026-04-08 10:15:20
TypeScript 泛型问题：泛型约束与类型推断 TypeScript 泛型是编写复用性强的代码的关键，但在使用过程中常遇到两个主要问题：过于宽泛导致无法访问特定属性，以及类型推断不精准导致代码冗余。通过泛型约束与类型推断的结合，可以精确控制类型范围并让编译器自动识别类型。 一、 理解基础约束：解
泛型 泛型约束 类型推断
61 0
JavaScript 原型链：__proto__ 与 prototype 的关系
2026-04-08 07:26:59
JavaScript 原型链：proto 与 prototype 的关系 理解 JavaScript 中的原型链，核心在于搞清楚两个长得很像但作用完全不同的属性：prototype 和 proto。这不仅是面试的高频考点，更是理解 JS 对象继承机制的基石。 我们将通过具体的代码演示和内存逻辑，拆解
原型链 __proto__ 原型对象
69 0
Angular 构建：Angular CLI 与生产构建
2026-04-08 04:14:13
Angular 构建：Angular CLI 与生产构建 Angular CLI 极大简化了从开发到部署的流程，但其构建系统（底层基于 Webpack 或 Esbuild，取决于 Angular 版本）的默认设置与生产环境的最优配置之间存在显著差异。理解两者的区别并正确配置生产构建，是提升应用性能和
Angular 前端开发 构建工具
61 0
JavaScript 事件循环：宏任务与微任务
2026-04-07 23:28:20
JavaScript 事件循环：宏任务与微任务 JavaScript 是单线程语言，这意味着它一次只能做一件事。为了不阻塞主线程（导致页面卡顿），JavaScript 采用了一种“事件循环”机制来处理异步操作。理解这一机制的关键，在于分清“宏任务”和“微任务”的区别与执行顺序。 以下指南将直接解析核
事件循环 宏任务 微任务
63 0
CSS 响应式：@media 媒体查询
2026-04-07 19:13:22
CSS 响应式：@media 媒体查询 响应式设计的核心在于让网页能够根据用户的设备特征（主要是屏幕宽度）自动调整布局。CSS 的 @media 规则是实现这一功能的基石，它允许你针对不同的屏幕尺寸编写特定的 CSS 样式。 1. 理解媒体查询的基本语法 媒体查询由一个可选的媒体类型和若干个媒体特性
CSS 响应式设计 媒体查询
45 0
Angular 微前端：模块联邦
2026-04-07 18:27:56
Angular 微前端：模块联邦 模块联邦允许不同的 JavaScript 应用在运行时动态加载代码，无需将所有代码打包到同一个文件中。这意味着你可以将一个巨大的 Angular 单体应用拆分为多个独立开发、独立部署的小型应用。本指南将手把手教你使用 Angular 和 Module Federat
Angular 微前端 模块联邦
52 0
React 状态管理：useState 与 useReducer
2026-04-07 15:22:01
React 状态管理：useState 与 useReducer 第一阶段：识别状态复杂度与依赖关系 1. 统计 组件内部独立状态变量的总数量。逐一核对所有使用 useState 声明的变量，若总数超过五个且存在更新交叉，立即标记为 潜在维护瓶颈。 2. 梳理 状态更新的触发链条。在代码审查时追踪数
React状态 状态管理 useState
68 0
JavaScript 数组方法：map、filter、reduce 的使用
2026-04-07 14:24:49
掌握 JavaScript 数组的 map、filter 与 reduce 方法，能省去 80% 的冗余循环代码。以下指南将拆解 每个方法的执行逻辑与标准步骤，确保直接套用到实际业务中。 使用 map 转换 数组结构（长度保持不变） 1. 声明 包含原始数据的数组变量。 2. 调用 .map 方法并
前端开发 数组方法 数据处理
49 0
TypeScript 类型守卫：typeof、instanceof、自定义
2026-04-07 07:51:37
TypeScript 类型守卫：typeof、instanceof、自定义 JavaScript 变量在运行前的具体形态往往不确定。TypeScript 引入类型守卫机制，在代码块内将模糊的联合类型（多种可能类型的集合）精准过滤为单一具体类型。执行以下操作，掌握三种核心守卫的编写与使用。 阶段一：使
类型守卫 类型收窄 自定义类型
61 0
JavaScript 模块系统：ES6 import/export 语法
2026-04-07 05:20:54
JavaScript 模块系统：ES6 import/export 语法 阶段一：配置运行环境并初始化项目 1. 打开 终端或命令行工具，导航 至目标工作目录，执行 mkdir es6moduleguide 创建 专用文件夹，并输入 cd es6moduleguide 进入 该目录。 2. 运行 n
ES6模块 模块系统 导入导出
67 0
HTML 嵌入内容：<iframe> 标签的使用
2026-04-07 00:26:10
HTML 嵌入内容：<iframe 标签的使用 在网页中嵌入视频、地图、第三方表单或其他独立页面时，<iframe 标签是标准解决方案。它将目标网页隔离为一个独立的渲染区域，避免样式冲突与脚本干扰。按照以下步骤，可直接完成安全、高效的嵌入配置。 阶段一：快速创建基础嵌入窗口 1. 创建 一个扩展名为
iframe标签 网页嵌入 前端开发
76 0
HTML 列表：<ul>、<ol>、<li> 标签
2026-04-06 21:22:18
HTML 列表：<ul、<ol、<li 标签 1. 新建 空白文本文件，将文件扩展名精确重命名为 index.html。 2. 写入 HTML5 标准文档类型声明 <!DOCTYPE html 并补全 <html、<head、<body 基础骨架，确保浏览器以标准模式进行解析。 3. 聚焦 <bod
HTML基础 列表标签 前端开发
61 0
Vue 状态管理：Vuex 与 Pinia
2026-04-06 21:12:07
Vue 状态管理：Vuex 与 Pinia 阶段一：评估需求与确定技术栈 1. 核对 当前项目使用的 Vue 框架版本。Vue 3 项目默认推荐 Pinia；Vue 2 项目若未启用 Composition API 组合式 API，继续使用 Vuex 3.x 即可。 2. 评估 跨组件通信的复杂度。
Vue状态管理 Vuex Pinia
133 0
HTML 语义化标签：<header>、<nav>、<main>、<footer>
2026-04-06 19:44:02
HTML 语义化标签：<header、<nav、<main、<footer 语义化标签的核心作用是让网页结构具备“人类可读性”与“机器可解析性”。用大白话说，就是把页面的不同区域贴上明确的身份牌，让浏览器排版、搜索引擎抓取和屏幕阅读器朗读时都能精准识别内容属性。摒弃无意义的 <div 堆砌，使用标准
语义化标签 前端开发 网页布局
68 0
React 路由问题：路由配置与导航
2026-04-06 17:11:48
React 路由问题：路由配置与导航 React Router 是 React 生态中最流行的路由解决方案，用于管理单页应用（SPA）的页面跳转与 URL 映射。本指南将基于 React Router v6 版本，演示如何从零开始配置路由并实现页面导航。 一、 环境准备与基础配置 在开始配置路由之前
React 路由配置 页面导航
93 0
TypeScript 编译选项：tsconfig.json 详细配置
2026-04-06 16:28:58
TypeScript 项目通过 tsconfig.json 文件来定义编译行为。该文件决定了编译器如何将 .ts 文件转换为 .js 文件，以及严格模式的开启程度。 1. 生成与基础结构 创建 配置文件最简单的方式是使用 TypeScript 自带的命令行工具。 1. 打开 终端或命令行工具。 2.
TS tsconfig 编译选项
97 0
HTML 基本结构：<!DOCTYPE>、<html>、<head>、<body>
2026-04-06 15:46:18
HTML 文档的结构如同建筑的骨架，决定了网页是否稳固、浏览器能否正确解析。一个标准的 HTML 页面由四个核心部分组成：<!DOCTYPE 声明、<html 根元素、<head 头部信息以及 <body 主体内容。 1. 理解文档声明：<!DOCTYPE <!DOCTYPE 并不是一个 HTML
HTML 前端开发 HTML结构
50 0
CSS 布局：Flexbox 与 Grid 布局
2026-04-06 15:18:55
CSS 布局：Flexbox 与 Grid 布局 第一阶段：掌握 Flexbox 一维布局 Flexbox（弹性盒子）适合处理“一行”或“一列”的布局问题。想象一串珠子，你可以控制它们排成一行还是一列，以及它们如何分散对齐。 1. 创建基础容器 打开 你的代码编辑器。新建 一个 HTML 文件并输入
CSS 布局 Flexbox
60 0