- 博客(47)
- 收藏
- 关注
RSS订阅原创 React中Key值的作用
简单总结：Key 是 React 优化列表渲染的 “身份标识”，核心是「唯一稳定」，既提升性能，又避免状态异常。React 中 Key 的核心是「
2025-11-09 09:48:18
315
原创 React“组件即函数”
React组件是构建 UI 的基本单位，而 函数组件 是用 Javascript函数 来定义的组件。这个组件接受 props （即组件的输入），并返回一个描述UI的 JSX 结构。函数组件的特点是简洁、声明式且功能明确。React采用这种设计理念是为了使开发者能够以更简单的方式定义UI元素，并实现可复用、可组合的界面组件。函数组件的特点：在函数组件之前，React组件是通过ES6类来定义的，这种方式被称为类组件。类组件具有更复杂的结构，允许开发者在其中定义生命周期方法、管理状态，并使用 this 关键字来
2025-11-07 14:55:52
343
原创 栈的相关算法
核心思路：用栈存储无相邻重复的字符，遍历每个字符时，先查看栈顶（最近的前一个字符）；如果和当前字符重复，就弹出栈顶（删除重复）；，遇到右括号时，只需要和「最近入栈的左括号」（栈顶）对比，匹配成功则弹出栈顶（表示这对括号生效），匹配失败则字符串无效。，栈内索引对应的温度保持「单调递减」。记住 “栈存有效目录，回退出栈、进入入栈” 的核心。核心是用「两个栈」分别存储「重复次数」和「待拼接的字符串」，处理嵌套的编码规则。不管分隔符是 “/”“-” 还是 “,”，只要满足以下任一情况，就会产生。
2025-11-07 11:08:54
272
原创 React合成事件
React的合成事件(SyntheticEvent)是一个跨浏览器统一的事件系统，它基于原生DOM事件构建，通过封装不同浏览器的事件实现差异，为开发者提供一致的事件处理接口。合成事件具有三大核心特点：跨浏览器一致性、事件池化复用机制和统一的事件API。相比原生事件，合成事件通过自动管理事件绑定、事件委托机制和对象池化等技术，显著提升了开发效率和应用性能。其优势在于简化兼容性处理、优化内存使用并增强应用稳定性，是React事件系统的关键技术。
2025-11-06 09:49:20
771
原创 JSX的本质是什么？为什么浏览器无法直接解析？
JSX是JavaScript的语法扩展，用于在JavaScript中编写类HTML结构，提升UI开发效率和可读性。由于不属于ECMAScript标准，浏览器无法直接解析JSX，需要通过Babel等工具将其编译为React.createElement调用形式，转换为浏览器可识别的JavaScript代码。这实现了声明式UI开发与浏览器兼容的平衡。
2025-11-06 08:56:45
292
原创 虚拟 DOM（Virtual DOM）的工作原理及其性能优化机制
虚拟DOM是React的核心机制，通过在内存中维护轻量级DOM树抽象，减少直接操作真实DOM带来的性能损耗。其工作原理分为初始化、更新、差异计算和批量更新四步，核心是通过diff算法高效对比新旧DOM树差异，仅更新变化部分。虽然虚拟DOM在简单场景有额外计算开销，但在复杂频繁的DOM操作中优势显著。优化实践包括合理使用key标识、细化组件粒度及利用缓存策略等。虚拟DOM结合这些优化手段，大幅提升了React应用的渲染性能。
2025-11-05 15:23:18
638
原创 React的设计理念与核心特性
React是一个基于组件化、声明式编程和函数式思想的UI开发库。其核心设计理念通过三大特性实现：1）组件化与函数式编程，将UI拆分为可复用单元，采用函数组件+Hooks简化状态管理；2）声明式UI与JSX语法，开发者只需描述UI状态而无需操作DOM，JSX将UI结构与逻辑紧密结合；3）虚拟DOM与Fiber架构，前者通过差异计算优化渲染性能，后者将任务拆分为可中断单元实现异步渲染。这些特性共同解决了复杂Web应用的开发效率、性能优化和维护性难题。
2025-11-05 14:57:00
1643
原创 Node.js HTTP开发
本文系统介绍了HTTP协议核心原理与Node.js的http模块实战开发。内容涵盖：1. HTTP协议基础：详细解析请求/响应报文结构、状态码、MIME类型等核心概念；2. Node.js实操：从创建基础服务到实现路由、参数解析、静态资源服务等进阶功能；3. 调试技巧：通过浏览器开发者工具分析HTTP报文；4. 常见问题解决方案。文章强调理论结合实践，帮助开发者深入理解HTTP协议本质，掌握Node.js服务开发全流程，并为学习Web框架打下坚实基础。适合Web开发人员系统学习HTTP服务开发。
2025-10-10 14:23:21
963
原创 fs 文件系统：Node.js 操作磁盘的 “万能工具”
Node.js内置的fs模块提供文件系统操作功能，支持文件/文件夹的读写、移动、删除等操作。文件写入有四种方式：writeFile（异步）、writeFileSync（同步）、appendFile（追加）和createWriteStream（流式大文件）。读取文件可使用readFile（异步）、readFileSync（同步）和createReadStream（流式）。rename方法可移动或重命名文件，unlink用于删除文件。文件夹操作包括创建（mkdir）、读取（readdir）和删除（rmdir），
2025-10-09 16:30:00
538
原创 Buffer：Node.js 里处理二进制数据的 “小工具”
Node.js中的Buffer是处理二进制数据的核心对象，其特点是固定长度、高性能（直接操作内存）且每个元素占1字节。创建Buffer有3种方式：Buffer.alloc(安全初始化)、Buffer.allocUnsafe(可能含旧数据)和Buffer.from(常用，支持字符串/数组转换)。Buffer可通过toString()转为字符串，并支持类似数组的读写操作（索引范围0-255）。注意修改值超过255时会被截断处理。
2025-10-09 10:37:06
356
原创 工单列表查询模块难点总结
本文分析了工单列表查询模块在实现过程中的主要技术难点及解决方案，重点包括：1）路由参数与查询条件的实时同步机制；2）时间范围查询的精准格式转换与校验；3）多组件间的数据传递与状态管理；4）查询条件重置与重复请求控制；5）动态下拉选项的加载容错处理。通过computed/watch实时同步状态、工具函数处理格式转换、状态锁控制异步请求等技术手段，有效解决了参数不一致、数据错乱、重复请求等问题，保证了模块的稳定性和用户体验。
2025-07-16 15:05:07
675
原创 工单列表查询功能模块实现过程与代码逻辑总结
本文档介绍了一个工单管理模块的实现方案。该模块采用组件化设计，包含4个核心组件：父组件WorkOrderManagment负责路由同步，work-order-table实现列表展示和查询，WorkOrderDialog处理详情弹窗，work-order-detail渲染详情字段。系统通过props传递数据和事件通信实现组件协同，支持工单查询、筛选和详情查看功能。关键技术包括：路由参数同步保持查询状态、时间范围自动格式化、动态获取下拉选项、单向数据流管理等。整体架构清晰，组件职责明确，实现了完整的工单管理流程
2025-07-16 15:01:16
1372
原创 城市规则管理列表实现逻辑
该文档描述了一个基于Vue.js和ElementUI构建的城市规则管理系统，主要包含数据表单渲染、动态页面更新和路由跳转功能。系统采用数据驱动模式，通过el-form组件实现表单双向绑定，支持查询、重置等操作。表格内容通过slot-scope实现动态渲染，可自定义行内元素并绑定点击事件进行路由跳转。系统还包含add-modify子组件，用于弹窗式的新增/修改规则操作，支持表单校验、数据回显和模式切换。组件通过props接收父组件数据，并通过事件通知父组件刷新列表，实现了完整的CRUD功能体系。
2025-07-10 15:17:42
954
原创 前端性能优化方案
就是指触发事件后，在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。用data-自定义属性名 (data-src) 接收图片的真实路径，待图片滚动到可视区域的时候开始加载图片，待图片加载出来之后替换掉之前的默认图片。：是指当元素样式发生改变，但不影响布局时，浏览器只需要重新绘制受影响的部分，而不需要重新计算布局。：是指由于DOM结构或样式发生改变，浏览器需要重新计算元素的几何属性，然后重新布局页面的过程。CDN 优化（内容分发网络）是部署在全球各地的缓存服务器集群，
2025-05-22 16:27:31
1542
原创 http知识点
Accept:.text/html 代表浏览器可以接受服务器回发的类型为text/html，也就是我们常说的html文档，如果服务器无法返回text/html类型的数据，服务器应该返回一个406错误(Not Acceptable)当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接。客户端在服务器有中文版资源的情况下，会请求其返回中文版对应的响应，没有中文版时，则请求返回英文版响应。
2025-03-31 15:29:01
1208
原创 透过TCP/IP看HTTP
服务端会将上述的信息放到一个报文段 (SYN+ACK报文段)中，一并发送给客户端，此时服务端将会进入。同时这样也是为了防止失效的请求报文段被服务器接收，而出现错误的情况。的 SYN+ACK 报文段后，会向服务端发送ACK确认报文段，这个报文段发送完毕后，客户端和服务端都进入。TCP三次握手的建立连接的过程就是确认初始序号的过程，告诉对方，什么样序号的报文段能够被正确接收。用来处理在网络上流动的数据包，数据包是网络传输的最小数据单位。第三次握手的作用是客户端对服务器端的初始序号的确认。
2025-03-30 13:58:09
1273
原创 自适应布局与响应式布局！！！
自适应布局和响应式布局都可以使用媒体查询来创建响应式网页，但它们的设计理念和应用方式有所不同。选择哪种方法取决于具体的需求和项目目标。如果需要为特定的设备提供最佳的用户体验，并且愿意为每个设备创建和维护单独的布局，那么自适应布局可能是更好的选择。如果需要创建一个能够适应任何屏幕尺寸的布局，并且希望减少开发工作量，那么响应式布局可能是更合适的选择。
2025-03-25 11:17:19
1311
原创 grid网格布局图解
CSS Grid 布局是一种强大的二维布局系统，可以同时处理行和列，非常适合用于复杂的多行多列布局。它将网页划分为一个个网格单元，可以任意组合不同的网格，实现各种各样的布局
2025-03-19 17:14:01
428
原创 Grid 布局实现三栏布局
使用 CSS Grid 布局实现三栏布局（左右固定 100px，中间自适应）的核心原理是通过网格模板精确控制列宽分配。
2025-03-19 09:59:19
1556
原创 浏览器的组成、渲染过程及缓存机制
浏览器的主要功能是将用户选择的 web 资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中。用户用 URI （Uniform Resource Identifier 统一资源标识符）来指定所请求资源的位置浏览器内核（也称为渲染引擎）是浏览器最核心的组件，负责将网页代码转换为用户可见的页面。其核心功能包括解析 HTML、CSS、JavaScript 等语法，并最终渲染显示内容
2025-03-18 10:43:24
765
原创 Pinia是什么？它与Vuex有什么区别？
Pinia是 Vue.js 的现代化状态管理库，专为 Vue 3 设计，同时兼容 Vue 2它是Vuex的现代替代品，提供了更简洁和直观的 API。
2025-03-17 15:16:05
1194
原创 Vuex知识点总结
Vuex是一个专为 Vue.js 应用程序开发的状态管理模式库作用：解决组件间状态共享的问题，避免多层嵌套传参的复杂性核心集中管理应用的所有组件状态。
2025-03-17 14:35:33
1216
原创 localStorage 和 sessionStorage
localStorage和 sessionStorage都是 Web Storage API 的一部分，用于在浏览器中存储数据。
2025-03-16 16:01:54
726
原创 CSS 盒模型
CSS盒模型（Box Model）是网页布局的核心概念，它将每个HTML元素视为一个矩形盒子，由内容、内边距、边框和外边距四部分组成。
2025-03-16 12:48:52
519
原创 带你深入了解防抖Debounce和节流Throttle
防抖：适合【最终状态】场景（如输入完成后触发），需注意设置合理的延迟时间节流：适合【持续状态】场景（如滚动、拖拽），可结合时间戳或定时器实现
2025-03-15 15:47:09
1388
原创 深拷贝and浅拷贝
（1）拷贝：拷贝就是为了复用原对象的部分or全部数据，在原对象的基础上通过复制的方式创建一个新的对象。拷贝对象可以分为三种类型：直接赋值、浅拷贝和深拷贝（2）直接赋值：并不会创建一个新的对象，而是将原对象的引用赋给新变量。因此，修改新变量会影响到原对象。（3）浅拷贝浅拷贝会创建一个新的对象，仅复制对象的第一层属性。如果是简单数据类型拷贝值，引用数据类型（eg：对象、数组）拷贝的是地址。如果是单层对象，没问题，如果有多层就有问题，修改嵌套对象会影响原对象。（4）深拷贝。
2025-03-15 11:19:57
483
原创 JS内置构造函数有哪些？？？
JavaScript 内置构造函数是语言本身提供的一些特殊函数，用于。常见的内置构造函数包括ObjectArrayStringNumberBooleanDateRegExp等。
2025-03-14 11:35:42
850
原创 JS的闭包
程序中分配的内存由于某种原因，未能被释放或回收，导致这部分内存无法再被程序使用，从而造成内存。，即使函数在其定义的作用域之外执行，仍能访问该作用域中的变量。常驻内存会增大内存使用量，并且使用不当很容易造成。需手动解除引用，如变量置。
2025-03-13 10:55:04
364
原创 JavaScript中判断数据类型的方式有哪些???
instanceof操作符用来判断一个对象是否是某个构造函数的实例，也可以用来判断是否是某个对象的子类实例，Object.prototype.toString.call()方法返回一个表示对象的内部属性的字符串(数据类型，而不能判断基本数据类型。instanceof运算符还能用来测试一个对象在其。对象访问它的构造函数。需要注意，如果创建一个对象来改变它的原型，中是否存在一个构造函数的prototype属性。有两个作用，一是判断数据类型，二是对象实例通过。可以看到，instanceof只能判断。
2025-03-07 14:38:03
578
原创 什么是JavaScript中的包装类型？
JavaScript中，原始值没有方法或属性，但为了能够使用方法和属性，JavaScript提供了包装类型，允许基本类型（如String、Number、Boolean）临时“包装”为对象，从而调用对象方法。
2025-03-07 11:28:17
602
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人