- 博客(67)
- 收藏
- 关注
RSS订阅原创 em，px，rem，vh，vw使用场景和区别
前端开发中常用CSS单位各有特点：px是绝对单位，适合固定尺寸；em基于父元素字体大小，适合局部调整；rem基于根元素字体大小，推荐全局布局；vw/vh根据视口宽高百分比变化，适合全屏设计。实践建议：固定元素用px，局部调整用em，全局布局用rem，响应式全屏用vw/vh，通过合理组合实现灵活适配多设备的页面效果。（148字）
2025-06-23 10:59:42
494
原创 Webpack 和 Vite 在开发体验上的核心区别是什么？在项目中如何根据需求选择？（汇川技术面试版）
Webpack 和 Vite 是当前主流的前端构建工具，各有优势。Webpack 成熟稳定、插件丰富但配置复杂；Vite 开发效率高、启动快但生态相对较新。选型时，复杂项目适合Webpack，追求开发体验的中小型项目推荐Vite。两者也可结合使用，如主应用用Webpack，子应用用Vite。文中还提供了两者的基础配置示例。
2025-06-18 14:25:48
253
原创 div标签详细解说
div标签是通用的HTML容器，主要用于分组布局但不具有语义；而a标签具有明确的链接功能和语义。语义化标签（如header、footer）能提升代码可读性、SEO和可访问性。相比仅用div的非语义化结构，语义化标签使网页结构更清晰，便于维护和解析。开发时应优先选用语义化标签以优化用户体验和技术兼容性。
2025-06-16 17:17:39
266
原创 盒模型小全
CSS盒子模型是网页布局的核心概念，分为内容区、内边距、边框和外边距四部分。标准盒子模型(content-box)的宽度仅包含内容，而IE怪异盒子模型(border-box)的宽度包含内容、内边距和边框。通过box-sizing属性可切换两种模式，border-box模式更便于精确布局控制。正确理解盒子模型差异对实现页面排版至关重要，使用border-box能简化复杂布局的设计过程。
2025-06-11 17:24:20
795
2
原创 AntV X6实现
本文详细介绍了使用 AntV X6 库创建流程图编辑器的实现过程。主要内容包括：1）初始化准备，创建左右布局的 DOM 结构和样式；2）画布核心配置，包含网格、缩放、连线样式（曼哈顿路由+圆角连线）、节点交互等功能；3）工具栏初始化，设置分组和布局；4）快捷键绑定，实现复制粘贴、撤销重做等操作；5）自定义图片节点注册，定义节点样式和渲染结构。整个系统提供了完整的流程图编辑功能，包括节点拖拽、连线、缩放、快捷键操作等交互特性，并通过合理的 UI 设计优化用户体验。
2025-06-09 17:39:28
900
原创 原型链与继承
本文详细讲解了JavaScript的原型链、继承、类、实例和构造函数等核心概念。通过示例展示了原型链如何实现方法共享（如Person.prototype.sayHello），以及ES6类语法如何简化继承（如class Car）。同时解析了new操作符的工作原理和typeof与instanceof的类型检测区别。最后以Vue3为例，说明如何通过原型链扩展实例方法（如$set和$delete）。全文通过代码示例生动演示了这些概念的实际应用。
2025-06-07 17:38:46
373
原创 “组件、路由懒加载”，在 Vue3 和 React 中分别如何实现？ (copy)
摘要：本文介绍了Vue3和React实现组件懒加载的方法。React通过React.lazy和Suspense实现组件和路由的按需加载，Vue3则使用defineAsyncComponent实现异步组件加载，支持配置加载状态和错误处理。此外，Vue3还可使用vue3-lazyload插件实现图片懒加载。两种框架的懒加载机制都能有效提升页面性能。（148字）
2025-06-07 17:37:04
563
原创 promise和异步编程
摘要 Promise 是 JavaScript 处理异步操作的核心方案，能有效避免回调地狱，适用于网络请求、文件读写、定时任务等场景。其三种状态（pending、fulfilled、rejected）通过 then/catch 或 async/await 管理。Vue 3 中可结合 setup 使用 Axios 示例展示异步数据绑定。实现原理基于事件循环的微任务队列，核心静态方法包括 Promise.resolve、Promise.all（全成功才成功）、Promise.race（竞速响应）等，为不同异步场
2025-06-04 12:52:48
1134
原创 websocket协议
WebSocket协议是一种实时双向通信协议，基于单一TCP连接实现全双工数据传输。通过HTTP握手升级连接后，支持文本帧和二进制帧传输，并具备心跳检测机制。相比HTTP协议，WebSocket具有低延迟、高效传输等优势，广泛应用于聊天应用、在线游戏和实时数据推送等场景。其核心特性包括持久连接、双向通信和精简的数据帧结构，有效提升了网络实时交互性能。
2025-06-03 14:41:28
439
原创 jwt token验证
JWT Token验证方法包括：从请求头获取Token、使用密钥验证签名和有效期，并提取用户信息。验证流程可通过拦截器实现自动化检查，建议结合密钥安全管理、合理设置Token有效期和完善异常处理机制。示例代码展示了如何提取Token、验证签名、获取用户信息及注册Spring拦截器。最佳实践强调密钥保护、Token时效性控制和安全的错误响应。
2025-06-03 14:39:09
541
原创 JS和TS的区别
JavaScript与TypeScript对比：前者是动态弱类型语言，适合快速开发；后者作为JS超集，添加静态类型系统，提供更完善的工具链和错误检查。TS需编译为JS运行，适合大型项目，而JS更适合小型项目。示例显示TS能在编译时捕获类型错误，显著提升代码质量。两者完全兼容，TS生态持续壮大，许多库已提供类型支持。
2025-05-31 16:06:22
444
原创 虚拟DOM和DOM是什么？有什么区别？虚拟DOM的优点是什么？
虚拟DOM是对真实DOM的轻量级抽象表示，通过JavaScript对象存储节点信息。相比直接操作真实DOM带来的性能损耗，虚拟DOM在内存中完成差异计算，仅更新必要的部分，显著提升动态页面的渲染效率。其优势包括性能优化、跨平台能力及简化开发流程，广泛应用于Vue、React等框架。示例代码展示了虚拟DOM的创建和渲染过程，通过h函数生成虚拟节点并映射到真实DOM，实现高效更新。
2025-05-31 16:04:40
520
原创 ReactHook有哪些
React Hooks 是 React 16.8 引入的核心特性，用于简化函数组件的开发。常用 Hooks 包括：useState 管理组件状态；useEffect 处理副作用；useContext 访问上下文；useReducer 管理复杂状态逻辑；useCallback 和 useMemo 优化性能；useRef 获取 DOM 引用；useLayoutEffect 同步测量 DOM；useImperativeHandle 自定义实例值；useDebugValue 调试自定义 Hook。这些 Hooks
2025-05-30 17:42:25
847
原创 React和原生事件的区别
React事件系统与原生DOM事件在绑定方式、事件对象、传播机制等方面存在显著差异。React采用合成事件（SyntheticEvent）统一委托到根节点，封装原生事件以解决浏览器兼容性问题，并通过事件池优化性能。相比之下，原生事件直接绑定到DOM元素，需手动处理浏览器差异。React事件默认只有冒泡，而原生事件支持完整的捕获-目标-冒泡三阶段。触发顺序上，原生事件先于合成事件执行。React事件this指向默认undefined，需手动绑定。React18取消事件池后允许异步访问事件对象，而混合使用时原生
2025-05-30 16:00:48
1086
原创 git和gitee的常用语句命令
本文介绍了Git和Gitee的常用命令及基本操作。主要内容包括：1) Git基础配置方法；2) Git常用命令如状态检查、提交代码、分支管理等；3) Gitee平台特有操作；4) 团队协作权限管理；5) 编辑器集成建议。文章提供了从初始化仓库到推送代码的完整工作流程示例，适合开发者快速掌握版本控制工具的基本使用方法。所有命令均以简洁的代码格式呈现，便于直接参考使用。
2025-05-28 15:50:05
674
原创 如何理解UDP 和 TCP 区别 应用场景
摘要： UDP和TCP是两种主要传输层协议。UDP无连接、不可靠但高效，适用于实时通信（如视频、游戏）和DNS查询；TCP面向连接、可靠但较慢，适合文件传输、邮件等需数据完整性的场景。主要区别在于连接性、可靠性及效率，具体选择取决于应用需求。（150字）
2025-05-27 14:21:44
682
原创 什么是HTTP HTTP 和 HTTPS 的区别
本文概述了HTTP协议的定义、工作流程及与HTTPS、MQTT的区别。HTTP是一种无状态应用层协议，基于请求-响应模型，常用于网页浏览。相比于HTTP明文传输，HTTPS通过SSL/TLS加密保障安全性，但需要更多计算资源和数字证书。HTTP工作流程包括建立连接、发送请求、接收响应和关闭连接。与轻量级的MQTT协议相比，HTTP适合Web开发，而MQTT更适合实时消息推送和物联网场景。通过图文对比，清晰展示了各协议的特点及应用领域。
2025-05-26 18:30:29
633
原创 webpack的构建流程
Webpack 是一个现代 JavaScript 静态模块打包工具，其构建流程分为四个阶段：初始化、编译、打包和输出。初始化阶段加载配置文件并解析选项；编译阶段遍历依赖树，使用 Loader 预处理模块；打包阶段优化资源，如压缩代码；输出阶段将处理后的资源写入磁盘。示例代码展示了如何配置 Babel 转码、Terser 压缩及多入口支持等功能。综合案例包含 HTML 生成、CSS 提取和代码分离等高级特性，适用于生产环境构建。
2025-05-24 18:41:06
599
原创 webpack中常见语句命令
Webpack 是一个流行的 JavaScript 模块打包工具，用于优化前端资源加载。通过 pnpm 或 npm 可以安装 Webpack 及其 CLI 工具（pnpm add webpack webpack-cli --save-dev 或 npm install...）。基本构建可通过 webpack 或 npx webpack 运行，也可在 package.json 中配置脚本简化命令。开发时使用 webpack-dev-server 实现热更新，生产环境则通过插件（如 TerserPlugin）进
2025-05-24 18:39:36
542
原创 web常见的攻击方式有哪些？如何防御？
本文总结了四种常见的Web攻击方式及防御策略： SQL注入：通过恶意SQL查询操纵数据库，防御措施包括参数化查询和输入验证。 XSS攻击：在网页中嵌入恶意脚本，可通过编码输出和CSP策略防范。 CSRF攻击：冒充用户执行非授权操作，建议使用一次性令牌和Referer检查。 文件上传漏洞：上传恶意文件导致安全风险，需采用白名单和文件扫描。 每种攻击均附有示例和具体防御方法，最后以表格和图表形式总结关键点，帮助快速理解与应对安全威胁。
2025-05-24 18:38:42
1170
原创 单点击登录sso实现
单点登录（SSO）是一种身份认证解决方案，允许用户通过一次登录访问多个相互信任的应用系统。其核心原理是通过统一的认证中心处理登录请求，生成全局唯一的令牌（Token）或会话标识（Session ID），并传递给各子系统，实现跨系统的免密访问。SSO的实现方式包括同域名下的Cookie共享和不同域名下的令牌校验。同域名下可通过设置Cookie的domain属性实现会话共享，而跨域名场景则需通过认证中心生成令牌，并通过重定向或前端跨域传递（如iframe + postMessage）实现令牌共享。SSO的优势在
2025-05-23 10:34:33
1720
原创 大文件上传如何做断点续传？（分别使用vue、React、java）
大文件上传断点续传的实现逻辑主要包括文件分片、唯一标识符生成、进度跟踪、错误重试和分片合并等关键步骤。前端通过 File API 和 Blob.slice() 方法将文件切割成小块，并逐个上传至服务器。服务器端维护上传状态，确保中断后可以从中断点继续上传。Vue3 和 React 分别提供了前端实现示例，展示了如何通过异步请求上传分片。后端使用 Java Spring Boot 接收分片并最终合并成完整文件。这种机制有效解决了大文件上传过程中网络不稳定或中断的问题，提升了上传的可靠性和效率。
2025-05-23 10:30:26
589
原创 判断一个元素是否在可视区域
本文介绍了三种判断元素是否在可视区域的方法：1. offsetTop 和 scrollTop 适用于简单垂直滚动场景，实现简单但功能有限；2. getBoundingClientRect() 可精确检测元素位置，支持多维度判断但实现较复杂；3. Intersection Observer API 是现代浏览器的高效解决方案，性能优越但对旧版浏览器兼容性差。文章还对比了各方法的优缺点，并提供了代码示例，帮助开发者根据需求选择合适的技术方案。<｜end▁of▁sentence｜>
2025-05-21 18:02:04
488
原创 什么是防抖和节流？有什么区别？如何实现？
防抖（Debounce）和节流（Throttle）是JavaScript中用于优化高频事件处理的两种技术。防抖的核心思想是在事件触发后，等待一段时间，如果在这段时间内没有再次触发事件，则执行操作；如果再次触发，则重新计时。节流则是在一定时间内只允许事件执行一次或几次，通常用于控制高频事件的触发频率。防抖适用于用户输入完成后的延迟处理，如搜索框自动补全；节流适用于按钮点击、滚动条监控等需要限制调用次数的场景。防抖的实现基于setTimeout，而节流的实现基于时间戳。两者在性能影响、首次触发行为和最终触发行为
2025-05-20 14:07:27
651
原创 Javascript 数字精度丢失的问题，如何解决？
JavaScript中的浮点数运算由于遵循IEEE 754标准，常出现精度丢失问题，如0.1 + 0.2 !== 0.3。为解决这一问题，可以采用以下方法：1. 使用toFixed进行修约，但需注意其四舍五入机制；2. 将浮点数转换为整数进行运算，再缩小结果；3. 结合Math.round()实现精确修约；4. 引入第三方库如decimal.js或big.js处理复杂运算；5. 考虑跨浏览器兼容性，确保方法在不同环境下的稳定性。这些方法可以有效提升浮点数运算的精度和可靠性。
2025-05-20 10:12:28
607
原创 Javascript本地存储的方式有哪些？区别及应用场景？（含Deep Seek讲解）
JavaScript提供了多种本地存储方式，包括Cookie、SessionStorage、LocalStorage和IndexedDB，每种方式各有特点和适用场景。Cookie主要用于用户身份验证和跨页面数据共享，但数据量有限且安全性较低。SessionStorage适合临时存储单次会话数据，关闭窗口后数据丢失。LocalStorage则用于长期存储少量不敏感数据，如用户偏好设置。IndexedDB功能强大，适合处理大规模结构化数据，但API复杂。总结来说，Cookie适合跨页面通信，SessionSto
2025-05-19 17:57:35
695
原创 JavaScript中执行上下文和执行栈是什么？
JavaScript 的执行上下文和执行栈是理解代码执行机制的关键。执行上下文是代码执行时的环境，包含变量、函数等信息，而执行栈则用于跟踪代码的执行流程，遵循后进先出原则。执行上下文的生命周期分为创建、执行和销毁三个阶段，其中创建阶段涉及变量提升和函数声明处理。执行栈在函数调用时动态管理执行上下文，确保代码按顺序执行。通过实例分析，可以清晰地看到执行上下文和执行栈在代码执行中的具体运作方式。理解这些概念有助于更好地掌握 JavaScript 的执行机制和调试技巧。
2025-05-14 16:50:06
680
原创 深拷贝浅拷贝的区别？如何实现一个深拷贝？
深拷贝与浅拷贝的主要区别在于对象复制的深度。浅拷贝仅复制对象的顶层结构，子对象仍共享引用，修改原对象会影响副本。深拷贝则递归复制整个对象及其所有嵌套结构，生成完全独立的副本，修改原对象不会影响副本。实现深拷贝的方法包括使用JSON序列化/反序列化（适用于简单数据类型）和基于流机制的深拷贝（如Java中的ObjectOutputStream）。选择深拷贝或浅拷贝应根据具体需求，浅拷贝适用于数据量小且无深层嵌套的情况，而深拷贝适用于复杂数据模型的全面隔离。
2025-05-12 16:58:22
283
原创 ES6新增Set、Map两种数据结构、WeakMap、WeakSet举例说明详细。（含DeepSeek讲解）
/ Set 示例// Map 示例// undefined (因为每次创建的对象不同)// WeakMap 示例// data// WeakSet 示例// true。
2025-05-09 17:34:18
884
原创 var、let、const之间的区别
特性varletconst作用域函数作用域 / 全局作用域块级作用域块级作用域可重复声明是否否是否能修改是是不允许直接改变原始值提升行为初始化为undefined不初始化不初始化。
2025-05-08 11:17:22
366
原创 Vue 3.0中Treeshaking特性
Tree Shaking 是一种优化技术，用于移除 JavaScript 上下文中未使用的代码。在 Vue 3.0 中，通过模块化的设计和 ES Modules 的支持，实现了更高效的 Tree Shaking 功能。这意味着如果某个功能或方法没有被显式使用，它就不会被打包到最终的应用程序中。
2025-05-08 11:15:53
374
原创 vue的diff算法是什么、比较方式，原理分析、示例解释讲解
Vue 的 Diff 算法是一种高效的虚拟 DOM 更新机制，用于最小化真实 DOM 的操作开销。它通过比较新旧 Virtual DOM 树中的差异，仅更新那些实际发生改变的部分，从而提升性能。Diff 算法的核心目标是在 MVVM 开发模式下，通过对虚拟 DOM 进行增量式的更新，减少对真实 DOM 的频繁操作。这种策略显著提高了应用的响应速度和效率。
2025-05-03 16:26:06
971
原创 Vue中的过滤器知道多少？从是什么、怎么用、应用场景、原理分析、示例解释
Vue.js 中的过滤器是一种用于处理文本显示的方式，它可以在模板表达式中使用，通过管道符将数据传递给过滤器进行加工后再渲染到页面上。这种机制允许开发者轻松实现字符串格式化、数值转换等功能。vue中的过滤器可以用在两个地方：双花括号插值和v-bind表达式，过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示。
2025-05-03 15:55:42
759
2
原创 如何实现一个虚拟dom
传统的DOM操作通常涉及大量的重绘（repaint）和回流（reflow），这会对性能造成极大的影响。相比之下，虚拟DOM提供了一种更高效的解决方案——当UI发生变化时，React会先构建一个新的虚拟DOM树并与旧的虚拟DOM树进行比较（即执行diff算法），找出最小差异集合后再一次性更新到真实的DOM中。虚拟DOM是一种轻量级的JavaScript对象，它是真实DOM的一个抽象表示。由于直接操作浏览器的真实DOM成本较高，因此通过维护一个虚拟DOM树来代替频繁的实际DOM操作。
2025-05-03 15:53:24
436
原创 keep-alive具体使用方法
是 Vue.js 提供的一个内置组件，用于缓存动态组件实例，从而避免重复渲染已加载过的组件。它的主要功能是在切换组件时保留状态和 DOM 结构，提升性能。
2025-04-29 19:21:30
534
2
原创 Vue常用的修饰符有哪些有什么应用场景（含deep seek讲解）
使用.stop停止事件向上传播；利用.prevent抑制特定 HTML 元素的标准动作；应用.capture实现更早介入事件链的能力；设置.self进一步限定响应范围至指定容器自身而非任何后代节点；添加.once让某些一次性操作更加简洁高效。这些工具共同构成了强大的前端编程基础构件集，帮助开发者构建复杂而高效的用户体验界面。以上分别介绍了三种不同用途却同样重要的 Vue 表单修饰符——它们各自针对特定需求提供了便捷解决方案。合理运用这些工具可以帮助开发者构建更加健壮可靠的应用程序结构。
2025-04-29 19:18:49
1263
1
原创 deepSeek浅谈对vue的mixin的理解，用于什么应用场景？
开发者可以通过扩展框架本身来自定义新的合并行为。例如创建专属标签处理器或将第三方库集成进来作为额外特性的一部分参与其中。这种灵活性让高级用户可以根据实际业务需求定制化解决方案而不必受限于内置的功能边界之内。合并类型描述示例场景替换型如果子组件提供了一个选项，则会完全覆盖父组件的对应部分数据对象初始化独立状态合并型对象/数组形式的选项内容将被合并方法集合扩展现有功能队列型生命周期钩子将以链式调用的形式被执行创建过程复杂业务流叠加型样式绑定等可通过累加机制完成。
2025-04-27 20:00:17
1093
原创 promis（resolve，reject）入门级别
Promise 是一种用于处理异步操作的对象，表示一个可能已经完成或者尚未完成的操作的结果。它的核心作用在于简化复杂的回调嵌套问题（即所谓的“回调地狱”），使异步代码更加清晰易读。Promise 不仅提供了一种标准化的方式去表达异步行为，而且极大地改善了开发者编写和维护异步代码的能力。无论是简单的延迟加载还是复杂的 API 调用场景，都可以借助 Promise 更加高效地解决问题。在 JavaScript 中，是创建一个新的Promise对象的方式。// 执行异步操作或其他逻辑。
2025-04-27 19:35:56
824
原创 React之userEffect的使用
在React组件中，副作用操作是指那些会被影响的其他的组件，而且不能在渲染过程中完成相关操作。其中，常见的副作用就是从API接口中获取数据。可以在函数组件中处理副作用，避免了类组件的复杂性，使代码更符合函数式编程的思想。提供了一种在函数组件中处理副作用的方式，使得函数组件也能处理这些复杂的逻辑。：将副作用操作与组件的渲染逻辑分离，使代码更加清晰和易于维护。可以将副作用逻辑封装在一个函数中，提高代码的复用性。
2025-03-10 17:55:14
555
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人