- 博客(20)
- 收藏
- 关注
原创 深度探究ESLint
在团队协作项目中,统一的代码风格和规范至关重要。除了常规的代码格式与最佳实践,还可能存在一些特殊要求。例如,为了维护代码的文明性与专业性,我们要求代码中不得出现诸如 “sb250”“fuck” 等不文明、不专业的词汇。这类需求无法通过 ESLint 的默认规则实现,因此需要开发自定义插件来满足。初始化项目首先确保全局安装了yo和generator - eslint。
2025-03-15 16:15:29
731
原创 js继承你学会了嘛
这是一个以写作博客为目的的创作活动,旨在鼓励大学生博主们挖掘自己的创作潜能,展现自己的写作才华。如果你是一位热爱写作的、想要展现自己创作才华的小伙伴,那么,快来参加吧!我们一起发掘写作的魅力,书写出属于我们的故事。我们诚挚邀请你参加为期14天的创作挑战赛!
2025-03-15 16:13:18
632
原创 React 合成事件你了解多少呢
React 的合成事件是其基于自身设计理念和性能优化目标的独特创造,而 Vue 未采用合成事件,是由其设计理念、性能考量以及生态文化等多方面因素共同决定的。随着 Vue 的不断发展,它与 React 在应用场景上的界限逐渐模糊,二者都已成为能够支撑各种规模项目开发的优秀框架。开发者在选择使用 React 或 Vue 时,需要深入理解它们的事件机制和设计差异,根据项目的具体需求、规模以及团队技术栈等因素,做出最为合适的选择。
2025-03-15 16:08:58
1220
原创 React 合成事件与 Vue 事件机制的对比
在前端开发领域,React 与 Vue 作为两款备受瞩目的框架,凭借独特的设计理念和技术架构,为开发者打造出截然不同的开发体验。React 的合成事件是其核心亮点之一,Vue 则采用了别具一格的事件处理机制,二者的差异背后蕴藏着多方面的考量。当 DOM 事件触发,React 会第一时间在内部事件池中检索对应的合成事件实例。若未找到,便依据原生事件类型,像、、等,构建全新的合成事件对象。这个对象不但完整囊括、以及等原生事件关键信息,还增添了 React 特有的属性与方法,以此实现跨浏览器的事件处理逻辑统一。就
2025-03-15 16:06:22
649
原创 深入理解 GPU 渲染加速与合成层
GPU 非常擅长执行此类基于纹理的转换,因此,我们得到了非常流畅、高性能的动画,这称为“硬件加速”。例如,电商轮播图中复杂动画的元素会被提升为合成层,仅更新该层内容,而无需重绘整个页面。简单来说,浏览器为了提升动画的性能,为了在动画的每一帧的过程中不必每次都重新绘制整个页面。)时,浏览器将元素的位图纹理上传至 GPU。:若页面滚动时仅固定导航栏(合成层)需要更新,GPU 可直接复用其他层的纹理,跳过 CPU 的重排和重绘阶段。元素在动画开始前被提升为合成层,利用 GPU 加速动画渲染,确保动画流畅。
2025-03-15 16:04:46
1081
原创 Vue 3相比Vue 2“进化”了多少你知道嘛
领域Vue 2Vue 3响应式系统ProxyDiff 算法优化全量遍历VNodePatchFlag进行静态标记组件更新优化重新渲染整个组件仅更新变更部分构建工具Webpack热更新重新编译整个 bundle模块级 HMR,速度提升数倍代码组织TypeScript 支持限制类型推导完全支持Vue 3 带来了显著的性能优化、构建工具的改进,以及更灵活的开发体验。
2025-03-15 16:01:54
944
原创 深入了解this
this 是在函数被调用时确定的,它的指向取决于函数调用的地方,而不是它被声明的地方(除箭头函数外)默认绑定、隐式绑定、显式绑定、new绑定。new 绑定 > 显示绑定 > 隐式绑定 > 默认绑定。
2025-03-15 16:00:14
628
原创 CSS 真的会阻塞文档解析吗?
在网页开发领域,一个常见的疑问是 CSS 是否会阻塞文档解析。理解这一问题对于优化网页性能、提升用户体验至关重要。要深入解答这个问题,需要从浏览器渲染网页的原理说起。
2025-02-24 13:35:27
936
原创 XSS 与 CSRF 攻击你了解多少呢
例如,网页中存在一段 JavaScript 代码,它根据 URL 参数动态修改页面元素的 innerHTML 属性,攻击者可构造恶意 URL,使得该代码在处理 URL 参数时,将恶意脚本插入到 innerHTML 中,从而在浏览器渲染页面时执行恶意脚本。此外,结合请求的时间戳、用户行为模式等信息,建立动态的请求来源验证模型,提高验证的准确性与可靠性。当用户在已登录状态下,访问恶意网站时,恶意网站通过精心构造的请求,诱使浏览器自动携带用户在目标网站的身份认证信息(如 Cookie),向目标网站发送请求。
2025-02-17 16:04:09
687
原创 说说DNS劫持那点事儿
DNS 劫持作为一种常见的网络安全威胁,给用户的网络安全和个人信息安全带来了极大的风险。了解 DNS 劫持的成因、案例和常见场景,掌握有效的解决方法,对于保障我们的网络安全至关重要。无论是个人用户还是企业组织,都应该高度重视 DNS 劫持问题,采取积极有效的措施,加强网络安全防护,共同营造一个安全、稳定的网络环境。
2025-02-08 11:01:06
1168
原创 深度解析 React 合成事件:机制、作用及与 Vue 事件机制的对比
React的合成事件是其基于自身设计理念和性能优化目标的独特创造,而Vue未采用合成事件,是由其设计理念、性能考量以及生态文化等多方面因素共同决定的。随着Vue的不断发展,它与React在应用场景上的界限逐渐模糊,二者都已成为能够支撑各种规模项目开发的优秀框架。开发者在选择使用React或Vue时,需要深入理解它们的事件机制和设计差异,根据项目的具体需求、规模以及团队技术栈等因素,做出最为合适的选择。
2025-01-20 14:14:19
795
原创 深度解析 React 中 setState 的原理:同步与异步的交织
相反,React 会将这五次状态更新合并,仅在循环结束后进行一次统一的状态更新与组件重新渲染,最终count的值为 5。当在 React 合成事件(如onClick、onChange等由 React 包装的事件)之外,例如在原生 DOM 事件或setTimeout回调函数中调用setState时,setState会同步执行。在绝大多数场景下,setState呈现出异步的行为模式。这意味着,当调用setState时,组件状态并不会立即更新,React 会对多个setState调用进行批量处理,以优化性能。
2025-01-15 16:12:45
728
原创 深度解析 React 中 setState 的原理:同步还是异步
相反,React 会将这五次状态更新合并,仅在循环结束后进行一次统一的状态更新与组件重新渲染,最终count的值为 5。当在 React 合成事件(如onClick、onChange等由 React 包装的事件)之外,例如在原生 DOM 事件或setTimeout回调函数中调用setState时,setState会同步执行。在绝大多数场景下,setState呈现出异步的行为模式。这意味着,当调用setState时,组件状态并不会立即更新,React 会对多个setState调用进行批量处理,以优化性能。
2025-01-15 16:11:05
903
原创 从0到1手写实现前端事件中心机制
本文通过从0到1的方式实现了一个简单的事件中心,并讲解了如何在前端应用中使用它来解耦组件之间的通信。事件中心可以帮助我们处理异步事件、提高系统扩展性并简化代码结构,尤其适合用于大型前端应用中的组件间通信。通过本文的代码实现,相信你已经能掌握事件中心的基本原理和使用方法,并能在实际项目中加以应用。
2024-12-23 14:26:55
1254
原创 告别 `if - else`:策略模式与 `return` 语句的深度解析与应用
策略模式,简单说就是把能互相替换的算法分别封装成独立的对象。这样一来,算法的变化就和使用算法的客户端代码分开了,系统灵活性和扩展性都大大增强。
2024-12-19 11:25:42
1241
原创 深入理解作用域与作用域链
作用域和作用域链是 JavaScript 语言的核心特性,它们共同决定了变量的可见性和生命周期,以及函数之间的变量共享和访问机制。变量提升虽然是 JavaScript 的一个特性,但也可能带来一些代码理解和维护上的困扰,通过合理的代码书写习惯可以有效避免。闭包为 JavaScript 编程带来了强大的功能,如数据隐藏、函数柯里化和事件处理等,但也需要注意内存管理问题,避免因不当使用闭包导致内存泄漏。
2024-12-17 18:55:56
947
原创 深度剖析 JavaScript 变量提升与暂时性死区:原理、实战与避坑指南
新项目首选 let 和 const:现代 JavaScript 项目应遵循 ES6+ 规范,let 用于需变更的变量,const 锁定常量。既能借助暂时性死区规避潜在错误,又契合函数式编程、模块封装理念,提升代码可读性与安全性。变量声明时机把控:遵循 “就近原则”,在首次使用变量前声明,严格遵守暂时性死区规则,减少不必要的作用域嵌套与变量生命周期复杂性。
2024-12-13 18:18:47
535
原创 深入剖析 DOM 操作成本与优化策略
DOM 操作虽然是前端开发中不可避免的一部分,但由于其成本较高,应该尽量避免频繁的 DOM 操作。通过理解 DOM 操作的成本和影响,以及采用合理的优化策略,可以提高前端应用的性能、可维护性和用户体验。在实际开发中,应根据具体情况选择合适的优化方法,如使用文档片段、数据绑定、虚拟 DOM、CSS 动画和过渡等,以减少对真实 DOM 的直接操作,从而提升应用的整体质量。
2024-12-11 00:15:00
768
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人