- 博客(39)
- 收藏
- 关注
RSS订阅原创 JavaScript中的函数parseInt(string, radix)解析
console.log(parseInt("10+15",2));输出结果为2。这是因为parseInt函数以二进制（基数2）解析字符串"10+15"，遇到有效数字字符"10"后，在无效字符"+"处停止解析。二进制"10"转换为十进制即为2。parseInt会从左到右解析字符串，遇到第一个不符合指定进制的字符时立即停止，仅转换已解析的有效部分。此例展示了parseInt严格按基数验证字符并截断处理的特点。
2025-08-20 17:02:42
473
原创 JavaScript 中的数据类型详解
JavaScript数据类型分为原始类型和引用类型。原始类型包括undefined、null、boolean、number、string、symbol(ES6)和bigint(ES2020)，存储在栈内存中，不可变，比较的是值。引用类型包括对象、数组、函数等，存储在堆内存中，可变，比较的是内存地址。类型检测可使用typeof、instanceof、Array.isArray()等方法，其中Object.prototype.toString.call()最准确。
2025-08-20 16:55:03
452
原创 JavaScript 原型继承与属性访问规则详解
JavaScript采用原型继承作为面向对象编程的基础机制，通过原型链实现属性查找和继承。文章系统介绍了原型继承的核心概念、实现方式及特性：1）原型链工作原理，包括__proto__和prototype的区别；2）属性查找规则与遮蔽现象；3）构造函数、Object.create()和ES6 Class三种实现方式；4）特殊属性访问场景和原型相关方法；5）最佳实践建议。理解原型机制对编写高效JavaScript代码具有重要意义，文中通过代码示例清晰展示了原型继承的实际应用。
2025-08-18 16:57:31
601
原创 JavaScript 中 Array.pop() 方法详解与示例
Array.pop()是JavaScript数组的核心方法，用于移除并返回数组最后一个元素。它会直接修改原数组，空数组时返回undefined。该方法时间复杂度为O(1)，比shift()更高效，适合实现栈结构（LIFO）、任务队列和撤销操作等场景。与获取末尾元素（不修改数组）或创建新数组（slice(0,-1)）不同，pop()会改变原数组长度，是处理数组末尾元素的标准解决方案。
2025-08-18 16:48:20
290
原创 JavaScript 中 Array.map() 方法详解与示例
JavaScript数组的map()方法是一个高阶函数，用于对数组元素进行转换处理。它会创建一个新数组，其中每个元素都是原数组元素调用回调函数后的结果，保持1:1映射关系。主要特点包括：不改变原数组、返回新数组、跳过空位。常见应用场景包括数据转换、格式化、属性提取等，特别适用于API数据处理和React列表渲染。相比forEach，map()更适合需要返回新数组的场景。使用时需注意性能问题，避免在超大数组或复杂操作中使用。map()支持链式调用，是函数式编程的重要工具，能显著提升代码的可读性和可维护性。
2025-08-18 16:42:33
327
原创 JavaScript 代码详解与循环总结
本文对比了JavaScript中四种循环遍历方式的区别。for...in循环遍历对象的可枚举属性（包括原型链上的属性），输出"117,935,130"；而for...of循环只遍历数组元素值，输出117。文章还分析了传统for循环和forEach方法的特点，并给出了最佳实践建议：遍历数组推荐for...of或传统for循环，遍历对象属性建议使用for...in配合hasOwnProperty检查，需要中断循环时应避免使用forEach。不同循环方式在遍历内容、适用场景和中断能力上存在差异
2025-08-18 16:23:46
311
原创 JavaScript 常用事件总结汇总
本文总结了JavaScript常用事件类型及用法。主要分类包括鼠标事件（click、mouseenter等）、键盘事件（keydown、keyup等）、表单事件（submit、change等）、窗口事件（load、scroll等）以及移动端触摸事件。介绍了三种事件绑定方式：HTML属性、DOM属性和推荐使用的addEventListener方法，并说明了如何移除事件监听。
2025-08-18 16:08:47
284
原创 模拟实现 useEffect 功能
本文介绍了React中useEffect Hook的简化实现原理，包含两个版本：基础版展示了依赖比较和清理机制的核心逻辑，通过全局变量管理组件状态；完整版模拟了React Fiber架构，采用链表结构存储Hook和副作用。实现要点包括：依赖数组的浅比较、清理函数的执行时机、副作用在渲染后的异步处理，以及通过链表保证Hook调用顺序的稳定性。该实现虽简化了React复杂的调度系统，但完整呈现了useEffect处理副作用、依赖跟踪和清理机制的核心功能，帮助理解其工作原理。
2025-08-17 19:26:33
168
原创 为什么 Hooks 的调用必须保持在最顶层？
React Hooks必须在函数组件顶层调用，不可在条件语句或循环中使用，因为React依赖Hook的调用顺序来管理状态。每次渲染时，React会按顺序匹配Hook状态，若顺序变化会导致数据错乱。例如条件性调用Hook会使后续状态错位，循环调用会导致Hook数量不稳定。解决方案包括：始终保证所有Hook被调用、将条件逻辑移至useEffect或回调、使用自定义Hook封装条件逻辑。这一设计确保了状态管理的稳定性和性能，遵循规则可避免常见Hook错误。
2025-08-14 18:39:27
422
原创 localStorage 和 sessionStorage 的比较
WebStorageAPI提供了两种客户端存储方式：localStorage和sessionStorage。它们都采用键值对存储约5MB数据，使用相同API方法，但存在关键区别。localStorage永久保存数据（除非手动清除），所有同源标签页可共享；sessionStorage仅限当前会话，关闭标签页即清除。注意它们只能存储字符串，大量数据可能影响性能，且不适合保存敏感信息。应根据数据的生命周期和共享需求选择合适方式：长期数据用localStorage，临时数据用sessionStorage。
2025-08-13 15:50:18
161
原创 CSS 回流(Reflow)和重绘(Repaint)
回流(Reflow)和重绘(Repaint)是影响网页性能的关键概念。回流指元素几何属性改变触发的布局重新计算，代价较高；重绘则是元素外观样式变化但不影响布局。常见触发因素包括元素尺寸、位置改变（回流）和颜色、背景变化（重绘）。优化建议包括：避免频繁样式操作、使用文档片段批量处理DOM、优先使用transform/opacity等不会触发回流的属性。理解这些机制有助于编写更高效的代码，提升页面性能。
2025-08-06 15:02:04
455
原创 原型链（Prototype Chain） vs 作用域链（Scope Chain）的区别
JavaScript核心机制对比：原型链与作用域链 原型链用于对象属性/方法的继承查找，基于__proto__和prototype构成，顶端为Object.prototype。典型应用包括类继承和new的实现。 作用域链用于变量/函数的查找，基于词法环境（函数嵌套结构），顶端为全局作用域。主要应用于闭包和变量作用域管理。 关键区别： 构成：原型链通过对象关联，作用域链通过函数嵌套 用途：原型链处理对象属性，作用域链处理变量访问 修改方式：原型链可动态调整（如Object.setPrototypeOf），作用
2025-08-06 13:21:19
530
原创 Server-Sent Events (SSE) 技术详解
Server-Sent Events(SSE)是一种基于HTTP的服务器推送技术，实现服务器到客户端的单向实时通信。其核心特点包括：使用简单的文本协议、支持自动重连、通过EventSource API建立连接。与WebSocket相比，SSE更轻量但仅支持单向通信，适用于通知、日志流等场景。典型实现包含客户端监听消息和服务器端推送事件流两部分，支持自定义事件和多行数据。最佳实践包括连接管理、错误处理和性能优化，适用于需要服务器主动推送但无需双向交互的应用场景。
2025-07-31 00:28:32
318
原创 长连接（Long Connection）详解
长连接是一种持久化TCP连接技术，允许在单个连接上传输多个HTTP请求/响应，避免重复建立连接的开销。作为HTTP/1.1的默认特性，它通过"Connection:keep-alive"头部实现，工作原理是保持TCP连接开放并复用通道。相比短连接，长连接显著降低资源消耗和延迟，适合高频交互场景。现代技术如HTTP/2多路复用、WebSocket和QUIC协议进一步优化了长连接性能，使其成为提升网络效率的关键技术。
2025-07-31 00:18:44
296
原创 HTTP 单连接与多连接及预检请求详解
本文介绍了HTTP连接模式和预检请求机制。HTTP/1.1默认单连接模式存在队头阻塞问题，可通过多连接（6-8个）或HTTP/2多路复用解决。预检请求是浏览器在发送某些跨域请求前的安全检查，由非简单方法或头部触发。开发者可通过使用简单请求、设置缓存或正确配置CORS来避免不必要的预检。文中提供了请求示例和Node.js服务端CORS配置，帮助理解如何优化连接性能和正确处理跨域请求。
2025-07-31 00:14:54
635
原创 Axios 请求触发时机详解
Axios是基于Promise的HTTP客户端，用于浏览器和Node.js环境。其请求触发场景包括：直接调用get/post方法、组件生命周期（如React/Vue的挂载阶段）、事件处理函数、拦截器自动处理、取消请求和并发请求等。实际应用场景涵盖页面初始化、表单提交、搜索筛选、分页加载等。最佳实践建议封装axios实例、控制请求频率、合理取消请求和统一错误处理。理解这些触发场景有助于优化数据获取策略和提升用户体验。
2025-07-31 00:09:49
343
原创 React 闭包陷阱及解决方案与 React 16/17/18 版本区别
React闭包陷阱是函数组件中使用Hook时的常见问题，表现为访问旧的state值而非最新值。典型场景如useEffect中定时器打印初始值而非更新值。产生原因是闭包特性捕获初始值、空依赖数组及每次渲染独立性。解决方法包括：正确声明依赖项、使用函数式更新、使用useRef保存可变值、使用useReducer或自定义Hook封装。React各版本主要差异
2025-07-31 00:02:54
1277
原创 前端兼容性问题全面解决方案
本文系统总结了前端开发中常见的浏览器兼容性问题及解决方案，涵盖CSS、JavaScript、React和Vue框架。针对CSS兼容性问题，提出Autoprefixer、渐进增强和特性检测等方案；针对JavaScript问题，推荐Babel转译和Polyfill补充；针对React和Vue框架提供了具体的兼容配置方法。文章还提供了浏览器兼容性速查表，并详细介绍了兼容性处理流程，包括明确兼容目标、开发检测、构建处理和差异化加载等环节，最后针对IE11白屏、iOS日期解析等特殊案例给出解决方案。
2025-07-30 23:55:50
815
原创 移动端适配方案全面指南
移动端适配核心方案：1)基础设置视口meta标签；2)主流方案包括媒体查询、Flex/Grid布局；3)推荐REM适配，通过动态计算根字体大小实现整体缩放，可配合Webpack/Vite进行PX自动转换；4)字体适配采用REM+clamp()限制范围；5)现代方案可选用Viewport单位(vw)。实践建议以375px或750px为设计基准，结合REM+媒体查询实现响应式布局，注意处理1px边框等细节问题。根据项目规模选择纯REM或混合方案。
2025-07-30 20:37:52
325
原创 CSS-in-JS 动态主题切换与首屏渲染优化
本文介绍了动态主题切换的实现方式和提升首屏渲染效率的策略。主题切换可通过CSS变量或CSS-in-JS实现，CSS变量性能更优且支持服务器端渲染。为提高首屏性能，建议使用关键CSS提取、代码分割、CSS变量替代动态样式，以及避免不必要的重新渲染。CSS变量能优化主题切换性能、加速首屏渲染、实现动态样式分离，并支持主题持久化。最佳实践是结合CSS变量定义主题色与CSS-in-JS管理组件样式，在保证性能的同时提供良好的开发体验。性能对比显示，混合方案在各个方面表现均衡。
2025-07-30 20:29:01
348
原创 防抖(debounce)和节流(throttle)实现及原理讲解
摘要：防抖和节流是前端性能优化的关键技术。防抖(debounce)在事件停止触发后执行回调，适用于搜索联想等场景；节流(throttle)则固定时间间隔执行，适用于滚动事件等高频操作。两者核心区别在于触发频率和执行次数。实现上，防抖通过清除/重置定时器，节流通过时间戳或定时器控制。实际应用中可根据需求调整延迟时间、添加立即执行或取消功能。合理使用这两种技术能有效提升页面性能与用户体验。
2025-07-30 17:04:37
541
原创 LRU (Least Recently Used) 缓存实现及原理讲解
本文介绍了使用JavaScript实现LRU(最近最少使用)缓存策略的方法。通过Map对象保持键值对插入顺序的特性，实现了一个LRUCache类，包含get和put两种基本操作。当缓存满时自动淘汰最久未使用的数据，每次访问都将数据移至Map末尾表示最近使用。该实现具有O(1)时间复杂度，适合大多数前端应用场景，并保持代码简洁高效。文章还简要讨论了可能的优化方向，如使用双向链表+哈希表或添加TTL机制等。
2025-07-30 16:51:44
515
原创 常用的git命令
本文整理了日常开发中最常用的Git命令分类，包含仓库操作、提交修改、分支管理、版本回退、远程同步、标签管理等6大类命令。收录了git init、add、commit、branch等基本操作命令，以及reset、rebase等高级用法，每种命令都配有简单说明。通过系统分类的命令列表，帮助开发者快速掌握Git的核心功能，满足90%以上的版本管理需求。所有命令都配有实际使用说明，无需记忆参数细节，适合随时查阅使用。
2025-07-28 15:52:03
292
原创 TCP/UDP讲解及主要区别
TCP和UDP是两大核心传输协议，主要区别在于可靠性与效率的权衡。TCP通过三次握手建立可靠连接，确保数据有序到达，适用于网页、文件传输等场景；UDP无连接、低延迟，适合视频会议、在线游戏等实时应用。TCP头部至少20字节，UDP仅8字节。选择时，数据完整性优先选TCP，实时性要求高则用UDP。部分应用如视频会议会同时使用两种协议。
2025-07-28 15:48:08
751
原创 HTML5、CSS3 和 ES6 的核心特性举例
本文介绍了现代Web开发的三大核心技术特性：1.HTML5新增语义化标签、多媒体支持和表单增强功能；2.CSS3提供选择器增强、过渡动画和弹性盒子布局；3.ES6引入块级作用域、箭头函数、模板字符串等新特性。这些技术改进使Web开发更高效，代码更可维护，为开发者提供了强大的工具集，构成了现代Web应用开发的基础架构。
2025-07-25 17:27:57
360
原创 面向对象设计思想与OOP意识
面向对象编程(OOP)是一种以对象为核心构建软件系统的编程范式。其核心包含四大特性：封装、继承、多态和抽象，以及SOLID五大设计原则。培养OOP意识需要建立对象思维、关系思维和接口思维，合理分配对象职责。实践建议包括：从需求识别对象、优先使用组合、保持类小而专注、运用设计模式和持续重构。通过掌握这些概念和实践，可以构建更灵活、可维护的软件系统。OOP思维需要不断实践来强化。
2025-07-25 17:08:50
346
原创 JavaScript 事件循环机制详解
本文解析了JavaScript事件循环机制，重点分析了async/await和Promise的执行顺序。核心要点包括：1）同步代码优先执行；2）微任务（Promise.then）优先于宏任务（setTimeout）；3）await后面的代码作为微任务执行。通过具体代码示例，展示了执行顺序为：同步代码→微任务→宏任务→反复检查微任务。掌握调用栈、任务队列和事件循环的交互规则，可以准确预测异步代码的执行流程。
2025-07-20 15:29:50
321
原创 闭包详解：概念、应用场景与销毁方法
闭包是JavaScript中函数访问外部作用域变量的机制，具有数据封装、状态保持等特性。它通过函数嵌套实现，内部函数可以访问外部函数的变量，即使外部函数已执行完毕。闭包常用于创建私有变量、函数工厂、模块模式等场景，但需注意内存泄漏风险。为避免内存问题，可通过解除引用、IIFE或手动清理等方式销毁闭包。合理使用闭包能提升代码复用性和模块化，但过度使用会影响性能和代码可读性。
2025-07-20 15:09:05
574
原创 CSS 浮动与清除浮动详解
浮动布局在响应式设计中仍有其用途，但现代CSS布局技术(Flexbox/Grid)通常能提供更简单、更强大的解决方案。浮动是CSS中一种传统的布局方式，最初用于实现文字环绕图片的效果，后来被广泛用于网页布局。当元素浮动后，其父容器高度会"坍塌"(高度为0)，这时需要使用清除浮动技术。浮动元素会脱离正常文档流，向指定方向移动直到碰到包含框或另一个浮动元素。浮动元素会变成块级元素(可以设置宽高)浮动元素后面的非浮动内容会环绕它。
2025-07-19 15:01:58
173
原创 useEffect 和 useMemo 的区别详解
处理副作用（如API调用、DOM操作、订阅等）：可以返回一个清理函数（用于取消订阅等清理工作）昂贵的计算（如大型数组处理、复杂数学运算）当计算依赖特定props/state时。：内部的操作不会直接影响本次渲染结果。（如API调用、日志记录等）→ 用。：计算结果会直接用于本次渲染。（避免每次渲染都拼接字符串）：直接参与本次渲染的返回值。避免子组件不必要的重新渲染。变化时获取数据（副作用）：优化性能，避免重复计算。（且计算成本高）→ 用。当你需要在某些值变化时。当你需要在某些值变化时。记录日志等副作用操作。
2025-07-16 12:32:20
295
原创 React 的生命周期介绍
阶段类组件方法函数组件（Hooks）挂载更新卸载useEffect清理函数错误处理推荐：新项目优先使用函数组件 + Hooks，逻辑更简洁且易于复用。类组件在旧代码或特定场景（如 Error Boundaries）中仍有价值。
2025-07-16 09:22:52
372
原创 块级元素与行内元素详解
特性块级元素行内元素行内块元素是否换行是否否可设置宽高是否是默认宽度父元素100%内容宽度内容宽度包含关系可包含其他块级元素只能包含文本或行内元素同块级元素全部有效水平有效，垂直不影响布局全部有效典型元素img, input理解这些差异对于CSS布局和元素选择非常重要，特别是在构建响应式设计时。
2025-07-15 13:45:25
315
原创 BFC（块级格式化上下文）详解及应用
BFC（Block Formatting Context，块级格式化上下文）是Web页面中一个独立的渲染区域，它规定了内部块级元素的布局方式，并且与外部元素相互隔离。BFC的创建条件（满足以下任一条件即可）：根元素（<html>浮动元素（float不为none绝对定位元素（position为absolute或fixeddisplay为table-cellflexgrid或overflow不为visible的元素contain为layoutcontent或paint的元素。
2025-07-15 13:41:50
329
原创 XSS详解
XSS（Cross-Site Scripting，跨站脚本攻击）是一种常见的 Web 安全漏洞，攻击者通过向网页注入恶意脚本，使其在用户浏览器中执行，从而窃取数据、劫持会话或进行其他恶意操作。：恶意脚本通过 URL 参数传递，服务器直接返回给用户浏览器执行。：恶意脚本通过修改 DOM 环境（而非服务器）触发，纯前端漏洞。：网站未对用户输入进行严格过滤，导致恶意脚本被注入并执行。当其他用户查看该评论时，脚本自动执行，窃取 Cookie。对用户输入进行转义或白名单过滤（如只允许字母、数字）。
2025-07-14 14:38:59
440
原创 CSRF攻击详解
CSRF（Cross-Site Request Forgery，跨站请求伪造）是一种网络攻击方式，攻击者诱骗用户在已登录的目标网站上执行非本意的操作。
2025-07-14 14:34:25
277
原创 前端html面试基础高频题汇总及解答
这篇文章总结了前端HTML面试中的高频基础问题，涵盖14个核心知识点。主要内容包括：HTML5新特性与移除元素、语义化标签的理解、WEB标准与W3C、SEO优化中的TDK、iframe的优缺点、微格式的应用、可替换与非可替换元素的区别、PageVisibility API用途、src与href的区别、表单自动完成关闭方法、语义化标签对比（title/h1、b/strong、i/em）、前端页面的三层结构等。文章通过对比分析、代码示例等方式，深入浅出地讲解了这些面试常见问题，既适合面试准备，也可作为学习参考。
2025-07-10 21:44:10
2063
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人