- 博客(196)
- 收藏
- 关注
RSS订阅
原创 2025金三银四前端面试指南：重点题型解析与高效备战策略
金三银四不仅是机遇，更是对前端开发者技术深度的检验。面试的核心在于将知识转化为解决问题的能力，而非机械背诵。建议保持“每日精进+定期复盘”的节奏，同时注重沟通表达的逻辑性。基础扎实者得天下，祝每位开发者都能斩获心仪的Offer！【点此获取更多】拓展思考：面试不仅是求职，更是技术视野的拓展。即使未换岗，定期参与面试也能帮助你跳出舒适区，保持技术敏感度。
2025-03-17 15:02:12
1623
原创 2025金三银四Web前端求职指南：简历优化与职业规划全解析
春招不仅是求职的战场，更是审视自我、规划未来的契机。通过精准的简历包装与清晰的职业路径，前端开发者可在竞争中占据先机。技术深度决定下限，综合能力决定上限。愿每位求职者都能在2025年的春天，收获理想的Offer！【点此获取更多】
2025-03-06 11:21:39
1218
原创 2025金三银四，春招Web前端必背场景题大全【附详细答案解析】
navigator.sendBeacon()方法使得网页可以异步地将数据发送到服务器，与页面的卸载过程同时进行，这一点非常重要，因为它允许在不影响用户体验的情况下，安全地结束会话或者发送统计数据。这方法主要用于追踪和诊断信息，特别是在需要确保数据被成功发送到服务器的场景中--比如记录用户在网页上的行为数据。
2025-03-03 15:37:53
1379
原创 深入浅出JavaScript AOP：面向切面编程实践指南
AOP（面向切面编程）是一种编程范式，旨在将横切关注点（如日志记录、性能监测、事务管理等）与核心业务逻辑分离，提高代码的可维护性和复用性。AOP 允许我们在不修改核心业务逻辑的情况下，动态织入额外的功能。AOP 允许我们在不修改核心业务代码的前提下，动态织入横切关注点（如日志、监控、权限校验等），从而提升代码的解耦性、可扩展性和可维护性。在 JavaScript 中，我们可以通过扩展 Function.prototypebefore()：在方法执行前插入逻辑after()：在方法执行后插入逻辑。
2025-04-01 17:59:31
859
原创 [特殊字符] 2025 推荐一款 Vue 3 移动端模板
大家好！又是新的一年。我又来推荐这款移动端模板了。这也是系列文章的第三篇。每一年我都会推荐一次。在 2024 那一篇里，我介绍了v2版本新增了那些内容，做了哪些优化。同样，这篇文章我也会介绍v3版本新增了哪些内容，以及围绕这个模板项目发生了什么样的故事。
2025-04-01 17:58:54
871
原创 Web Worker 基本使用
在Web开发中，JavaScript的单线程特性常常成为性能瓶颈。当我们遇到需要大量计算的场景时（如图像处理、数据分析等），Web Worker 就成为了关键的解决方案。本文将通过一个完整示例，带你快速掌握Web Worker的使用方法。Web Worker是浏览器提供的JavaScript多线程解决方案，它允许我们在后台线程中运行脚本，与主线程并行执行。独立全局上下文无法直接操作DOM通过消息机制通信支持传递可序列化数据什么时候用 Web Worker？计算密集型任务（如加密、数据处理）
2025-04-01 17:57:34
933
原创 面试官问我React Router原理，我掏出了平底锅…
（推眼镜）看你简历说精通React生态，那聊聊React Router的实现原理吧？：（突然合上电脑）如果让你从零实现一个mini React Router，核心步骤是？：（战术喝水）您这平底锅挺别致... 那我举个🌰：React Router就像个。：（突然扔飞盘）如果我有1000个路由路径，怎么快速匹配？：（掏出Outlet组件）这就是React Router的。：（递出平底锅）面试官，您看我这回答还...热乎吗？：（突然掏出个平底锅）等等，别背概念，说人话！：（掏出小本本）这是前端路由的。
2025-04-01 17:56:30
659
原创 2025Web前端八股面试（含答案，万字总结，精心打磨，春招必背）2025年超全总结
20. package.json文件中的 devDependencies和 dependencies 对象有什么区别?22. Vue3.0所采用的Composition Api与Vue2.x使用的 Options Api 有什么不同?1. css 中的 animation、 transition, transform有什么区别?22. 设备像素、css像索、设备独立像素、dpr、ppi 之间有什么区别?项目结构是如何划分的?9. title与h1的区别、b与strong的区别、i与em的区别?
2025-04-01 17:55:50
1287
原创 Vue组件间的通信方式究竟有哪些
父子关系的组件数据传递选择props与$emit进行传递，也可选择ref。兄弟关系的组件数据传递可选择$bus，其次可以选择$parent进行传递。祖先与后代组件数据传递可选择attrs与listeners或者Provide与Inject。复杂关系的组件数据传递可以通过vuex存放共享的变量。原文：https://juejin.cn/post/7486668229046403111。
2025-03-28 18:14:11
803
原创 [特殊字符] 最牛的 Vue3 无限循环滚动 NPM 包开源了！
先介绍下这个 NPM 包🔥 超大数据流畅滚动即使 10 万条数据，也能丝滑滚动不卡顿！仅渲染可视区域的 2 倍数据，大幅减少 DOM 负担，让滚动更流畅。🌟 适应变化，始终顺滑支持容器大小动态调整，即使数据实时更新，依然能保持平滑滚动，提供最佳用户体验。🔧 灵活滚动控制支持四向滚动单步停顿滚动速度调节鼠标悬停控制等多种配置，让滚动更符合需求。npm 包地址:官网地址:如果觉得这个项目对你有帮助，欢迎留下宝贵的⭐Star⭐！
2025-03-28 18:13:39
829
原创 使用 simple-git 在 Node.js 中高效调用 Git 命令
近期在一个项目里面，我觉得其实可以基于 simple-git 在 cli 代码提交的时候跟 gpt 进行结合，再合并分支的时候通过大模型进行审核和优化建议，如果再牛逼一点其实可以直接去操作代码进行修改，主要灵感来自同事聊天，去年跟同事合作的过程中发现他在用 node+ gtp 大模型对代码的提交进行代码审核原文：https://juejin.cn/post/7486670839922819124。
2025-03-28 18:12:59
913
原创 useEffect 的核心使用技巧与避坑指南
将复杂的 effect 逻辑封装成自定义 Hook，可以使组件代码更加清晰，同时也方便复用和测试。这部分就不提供示例代码了哈。封装复杂逻辑：将部分集中功能封装在自定义 Hook 中，使得主组件更加专注于 UI 展示。复用性：同样的 Hook 可在其他需要这部分功能逻辑的组件中复用，避免代码重复。测试方便：自定义 Hook 独立封装后，可以单独编写测试用例，对其异步逻辑和状态管理进行验证。ts体验AI代码助手代码解读复制代码。
2025-03-28 18:12:28
976
原创 响应式数组操作在Vue3和React中的差异
Vue3隐式自动响应，开发者可直接操作原数组，底层通过Proxy实现依赖追踪，心智模型更接近原生 JS。React显式不可变更新，强调数据不可变性，每次变更需返回新引用，避免副作用，更利于状态可预测性。
2025-03-24 17:28:37
371
原创 3.Webpack 与 Babel 集成
通过本节的学习，我们已经深入了解了如何在Webpack中集成Babel，包括基本配置、浏览器兼容性策略、性能优化以及TypeScript集成。Webpack和Babel的结合就像一场精心编排的协奏曲，两者互相配合，共同创造出现代前端开发的美妙乐章：Webpack负责资源的组织和优化，Babel则确保我们的代码能在各种环境中顺畅运行。使用最新的JavaScript语法，无需担心浏览器兼容性智能地按需引入polyfill，平衡兼容性和性能通过缓存和精确配置优化构建速度。
2025-03-24 17:28:04
610
原创 Flutter 新一代状态管理框架 signals ，它究竟具备什么魔法和优势
开始解析在聊 signals.dart 之前，需要快速介绍 signals 的前置概念，附带还有 Preact、Preact Signals 、SolidJS 等关键词。首先需要说明一点，「Signals」 是业内通用的一种状态管理模式，而 signals.dart 项目就是 Preact Signals 的一个 Dart 移植版本，所以在最底层源码里你可以看到 Preact Signals 的核心原语，自然也就是包含了Signal 的细粒度、惰性求值和自动依赖追踪等能力。
2025-03-24 17:27:09
637
原创 最新Vue3 Vite安装Tailwind CSS 4.0 教程
原文：https://juejin.cn/post/7484906189803323427。在项目中创建一个css文件 并在main.js引入。在vite.config.js中加入这两句。先创建一个vue3项目。
2025-03-24 17:26:28
136
原创 2025前端高频面试题之--js篇（一）
每个函数都有一个prototype属性，这个属性被称为显式原型，它指向一个对象，即原型对象。当用这个函数作为构造函数创建实例时，该实例会拥有一个隐式原型属性__proto__，这个属性指向构造函数的prototype（即原型对象）。通过这种关联，每一个对象都会间接地与一个原型对象相连接。原型链就是基于这种__proto__隐式原型属性形成的链式结构。具体来说，当访问一个对象的属性或方法时，如果该对象自身没有定义此属性或方法，JavaScript引擎就会沿着__proto__
2025-03-24 17:25:25
1459
原创 如何绕过限制，获取 Cursor 的系统提示词
如果想获取Cursor的系统提示词，当前最推荐的方法是：使用可以记录请求日志的 OpenAI 中转服务切换不同模型多次尝试从成功请求的LLM日志中获取完整信息如果本文介绍的方法都失效了，还有种间接获取提示词的方式：构造一个假的系统提示词，让Cursor将其与自己的系统提示词做对比，输出区别。也能绕过限制，获取一些碎片信息。原文：https://juejin.cn/post/7483409317566201866。
2025-03-20 18:26:07
981
原创 [特殊字符] 一行代码，优雅的终结 React Context 嵌套地狱！
React Context 嵌套地狱是指 React Context Provider 的多层嵌套，如下图所示，类似于前端问题中的回调地狱一样，越来越多的 Context 会导致嵌套层数越来越大，导致代码阅读性极差。总体思路：多个状态合并到一个 Context 管理会导致非必要更新问题 => 拆分 Context、Provider 避免非必要更新 => 存在嵌套地狱问题 => 组件的嵌套实际上是子孙组件的不断创建 =>循环创建子孙组件。
2025-03-20 18:21:16
907
原创 2025金三银四春招Web前端八股文汇总【助你备战金三银四】
inner();// 执行过程中，先将全局执行上下文压入执行栈， // 调用outer函数时，将outer函数的执行上下文压入执行栈， // 调用inner函数时，将inner函数的执行上下文压入执行栈， // inner函数执行完毕，其执行上下文弹出， // outer函数执行完毕，其执行上下文弹出。在一些允许类型转换的比较场景，如比较用户输入的值（可能类型不一致）时，可以使用 ==。每当调用一个函数时，就会创建一个新的函数执行上下文并压入执行栈，函数执行完毕后，其对应的执行上下文从执行栈中弹出。
2025-03-20 18:18:34
1125
原创 HTML常用元素
通过这篇文章，我们深入了解了 HTML 常见元素和全局属性。这些知识是前端开发的基础，掌握好它们，就等于为构建精彩的网页世界打下了坚实的基础。希望大家在后续的学习和实践中，多动手、多尝试，用这些 HTML 元素创造出更多有趣、实用的网页！原文：https://juejin.cn/post/7482613160387723275。
2025-03-18 16:34:30
556
原创 Nuxt3 实现接口域名动态化
原文：https://juejin.cn/post/7482690481043767359。2, 在 nuxt.config.ts 中增加配置, 将环境配置信息加入到项目运行配置中。1, 创建环境配置 .env.developmen和.env.production。此时可以通过前端项目实现接口域名动态-根据网站域名来处理, 避免接口跨域。3, 创建plugins文件夹及下面的api-domain.ts。
2025-03-18 16:32:27
287
原创 js判断浏览器窗口回话关闭与刷新
通过时间差的时候，在大多数情况下，是可以区别出页面刷新与关闭情况。但不排除真正上生产，经大量测试后，可能出现的问题。这里觉得比较合适的是，与后端合作，通过webSocket的方式建立连接，断连。让后端去判断原文：https://juejin.cn/post/7482769108523221031。
2025-03-18 16:31:56
141
原创 2025年了，前端谁还用传统的 PostMan 或 ApiFox
这里会自动根据浏览器最近的请求，自动把header 及 cookie 带过来，如果请求的 url 和最近请求中数据中一样的接口，还可以把请求数据直接带过来，这样可以保证发送信息的一致性，无需重新构建信息，只需要改你需要改变的字段就可以，快速且便捷。有些时候，我们还想对于测试中，返回的某个特殊的数据，作为 mock 数据，方便我们对这一数据的代码处理，那我们可以直接把请求回来的数据转为 mock 数据，如一些错误数据的处理。我们想要工具，希望他是轻量的，并且能解决上面提到的所有问题，这里推荐一个工具。
2025-03-18 16:31:24
1001
原创 前端苦熬一月，被 Cursor 5 天超越，未来技术浪潮如何破局？
关于这个Cursor引申出来AI对我的冲击，算是告一段落了。告一段落并不是说我觉得自己不会被淘汰掉、或者说我已经想好了其他的出路，而是说我释怀了，AI替代了前端也好，没替代也好，我都决定要继续学习，谁让我爱呢。偶然想到了《堂吉诃德》，他威风凛凛、他勇往直前、他义无反顾、他披荆斩棘。有人笑他是疯子，我却觉得他是个英雄。原文：https://juejin.cn/post/7481992008673755163。
2025-03-18 16:28:17
1046
原创 react通讯
父组件通过props向子组件传递数据和函数。子组件可以通过props获取到这些数据和函数。原文：https://juejin.cn/post/7481992008673558555。你需要把一个 prop层层传递给深层嵌套的子组件时, 就可以用createContex。点击组件A, 修改组件b的颜色。
2025-03-17 15:05:34
140
原创 vue3手动触发组件的重载（卸载和挂载）
当状态发生变化时，Vue 不会立即重新渲染 DOM，而是将这些变化推入一个队列，并在下一个事件循环周期中统一处理这些变化。执行后，由于vue的异步更新机制，必须要在nextTick后再将isMounted设置为true，否则vue会认为isMounted的值没有变化，不会重新渲染组件。最近在做pdf在线预览需求，有一点需求是要手动刷新pdf的预览组件，所以总结了一下两种强制刷新组件的方法，亲测有效。发生变化，Vue 会销毁旧的组件实例并创建一个新的实例。时，组件会被销毁并重新创建。Vue 会根据组件的。
2025-03-17 15:05:00
244
原创 Next.js 教程：从零开始构建你的 Web 应用
Next.js 是一个基于 React 的开源 Web 开发框架，它提供了许多开箱即用的特性，简化了 React 应用的构建过程。在指定的时间间隔内，用户访问的仍然是缓存的静态页面。Next.js 基于 Node.js 运行，因此你需要安装 Node.js。打开浏览器访问该地址，你将看到 Next.js 的欢迎页面。Next.js 会自动生成唯一的 class 名称，防止样式冲突。适用于需要用户交互后才能获取的数据，或者数据更新频率较高的场景。Next.js 提供了多种数据获取方式，适用于不同的场景。
2025-03-17 15:04:24
1183
原创 SVG中linearGradient的id冲突的显隐问题深度解析
在某次重构中，我们遇到了一个诡异的SVG渲染问题：当一个包含相同渐变ID的SVG组件被隐藏时，其他同类组件的渐变效果会同步消失。一开始我们以为这个是个偶现的问题，且在排查中也怀疑是我们组件写的问题，直到发现了多次渲染的SVG组件会跟着第一个SVG状态同步变化时，我们才定位到可能是SVG本身的渲染机制问题。首先，我们先看一个非常简单的SVG的代码，渲染个渐变的三角形，具体代码如下所示：ini代码解读复制代码可能有些同学会看不懂上面的SVG在做什么，不过这个不是特别重要，大家只需要关注到，我们用的标签现
2025-03-17 15:03:49
479
原创 JavaScript构造函数的特点
JavaScript 中的构造函数是一种特殊的函数，用于创建和初始化对象。以下是构造函数的主要特点：1. 命名约定特点：ini代码解读复制代码2. 使用 调用特点：arduino代码解读复制代码3. 指向新对象特点：ini代码解读复制代码4. 隐式返回对象特点：ini代码解读复制代码5. 显式返回对象特点：如果构造函数显式返回一个对象，则 会返回该对象。如果返回非对象值（如 、 或原始值），则忽略返回值，返回新创建的对象。javascript代码解读复制代码6.
2025-03-07 16:37:23
323
原创 前端配置husky，commit-lint
之前进行自定义命令。我们可以使用husky在代码提交之前进行相应的检查，防止不规范的代码被提交到仓库。Husky 需要在 commit-msg 阶段运行 commitlint，以验证提交信息。原文：https://juejin.cn/post/7478690071397253129。在pre-commit文件我们可以写在git提交之前进行的命令。husky是 git 的hook工具，就是用于。commit-lint可以规范我们的提交信息。等描述词，commit-lint拒绝提交。
2025-03-07 16:36:53
557
原创 鸿蒙ArkUI实战：手把手教你实现高颜值骨架屏
在鸿蒙开发中，骨架屏（Skeleton Screen）是提升用户体验的重要技术手段。本文将基于HarmonyOS ArkUI框架，通过20行核心代码实现一个支持流光动画的骨架屏组件，让你的应用在数据加载时展现专业级视觉效果。
2025-03-07 16:36:19
353
原创 JS函数的this指向
第一个参数都要求是一个对象（给this准备），后面的参数，apply为数组，call为参数列表；call/apply是可以指定this的绑定对象。箭头函数不使用this的四种标准规则（也就是不绑定this），而是根据外层作用域来决定this。foo直接调用和 call/apply 调用的不同在于this绑定的不同。object对象会被js引擎绑定到fn函数的中this里面。在调用这个函数时，会将this绑定到这个传入的对象上。在其调用位置中，是通过某个对象发起的函数调用。
2025-03-07 16:35:46
644
原创 【ThreeJS Basics 1-7】全屏和调整大小
现在，很多制造商都在这样做，你可以看到像素比甚至更高的屏幕。每个人的浏览器环境都是不同的，所以想要统一样式的话，需要留意更多细节，这里蓝色的边框是因为 chrome 的版本问题导致的，可以。几年前，所有屏幕的像素比都是1，一切都很好。但当你仔细观察屏幕时，你会看到这些像素，这对图像的精确度和字体的细度是一个限制。阻止滚动，默认的控件会帮我们处理好这种滚动的瑕疵，但是当我们不使用控件的话，应该如何去掉这种滚动效果呢。可能你会看到这样的效果，感觉不够精细，原因是像素比比较低。，并更新渲染器的像素比，只需调用。
2025-03-06 11:20:16
351
原创 Charles 抓包工具配置及使用
通过充当客户端与服务器之间的“中间人”（Man-in-the-Middle, MITM），拦截、记录并分析所有经过的网络流量。接下来我们拿出手机，打开 WIFI，确保和我们的电脑处于同一 WIFI 下，打开 WIFI 配置页【HTTP 代理】设置为。接下来我们打开【设置】->【通用】->【VPN 与设备管理】，这里看到我们刚刚下载的配置文件，点击安装。我们回到【通用】->【关于本机】->【证书信任设置】，找到刚刚安装好的证书并开启信任。，【服务器】设置为 Charles 给出的 ip，【端口】为。
2025-03-06 11:17:30
752
原创 下拉选择超大量数据请求时间长如何优化
本文介绍了在下拉选择场景下(其实其它场景也一样)请求超大量数据时请求时间过长的优化手段。首先经过字段名压缩和删除空白字符操作后及网络传输gzip压缩后数据大小为最初的1/15。然后后端通过Redis加了一层缓存，避免每次请求都要查询数据库的问题。最后又把数据写入js文件上传OSS，Redis只缓存js文件的url地址，返回给前端的也是url地址，前端通过动态import()获取js文件内的数据，这一步更是使请求数据能被浏览器缓存。不难发现，优化思路总结起来就是减少文件大小和加入多层缓存策略。
2025-03-06 11:16:16
699
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人