未脱发程序员-CSDN博客

原创【前端】每日一道面试题7：WeakMap和WeakSet是干嘛用的，有哪些使用场景

JavaScript的WeakMap和WeakSet是弱引用集合类型，主要用于优化内存管理。其核心特性包括：仅允许对象作为键/值（WeakMap）或元素（WeakSet），当对象失去外部引用时会被垃圾回收自动清除；不支持遍历操作，适用于临时数据存储。典型应用场景包括：DOM元数据跟踪（自动清理被移除元素的数据）、计算结果缓存、模拟私有属性以及避免循环引用导致的内存泄漏。由于不可迭代且依赖GC机制，适合对象生命周期敏感的场景，能有效减少内存泄漏风险。

2025-06-09 17:47:46 513

原创【前端】每日一道面试题6：解释Promise.any和Promise.allSettled的使用场景及区别。

Promise.any()和Promise.allSettled()是JavaScript中处理异步操作的两种Promise组合器。Promise.any()用于获取首个成功结果，适用于并行请求优化，会在任意Promise成功时立即返回结果，若全部失败则抛出AggregateError。Promise.allSettled()则等待所有操作完成，返回包含每个Promise详细状态的结果数组，适用于需要完整追踪批量任务结果的场景。两者的核心区别在于：Promise.any()关注首个成功，而Promise.a

2025-06-06 17:45:10 582

原创 vue3商城类源码分享期末作业注册登录，状态管理，搜索，购物车订单页面

该项目是一个基于Vue 3构建的本地生活线上超市网站，纯前端展示。项目结构清晰，主要包含src和public目录，分别存放源代码和静态资源。技术栈包括Vue 3、Vue Router 4和Vuex。主要功能模块涵盖商品展示、购物车、订单管理和用户登录。页面布局分为Header、Main和Footer三部分，功能流程从用户访问、商品浏览到购物车操作和订单生成，逻辑清晰。核心功能如路由配置、商品列表展示和购物车管理通过代码片段展示，确保了用户友好的交互体验。

2025-05-22 15:52:15 464

原创【前端】每日一道面试题5：解释Proxy和Reflect的典型应用场景，如何用它们实现数据双向绑定？

Proxy和Reflect在现代前端开发中具有广泛的应用，尤其在数据绑定与响应式系统中表现突出。Proxy通过拦截对象的get和set操作，能够监听数据变化，而Reflect则确保操作的默认行为正确执行。典型应用场景包括数据绑定、函数参数验证、私有属性保护以及日志记录。在实现数据双向绑定时，Proxy用于创建响应式对象，结合依赖收集与更新触发机制，能够高效地同步视图与数据。相比传统的Object.defineProperty，Proxy支持动态属性监听和数组变化，且性能更优，代码更简洁。然而，需注意递归代理

2025-05-22 10:59:07 909

原创【前端】每日一道面试题4：什么是CSS容器查询（Container Queries）？与媒体查询有何区别？

CSS容器查询（Container Queries）是CSS的一项新特性，允许开发者根据元素所在容器的尺寸或样式变化来动态调整其内部元素的布局和样式。与传统的媒体查询（基于视口或设备特性）不同，容器查询实现了组件级别的响应式设计，使组件能够独立适应其所在容器的实际尺寸和上下文环境。例如，侧边栏中的卡片在窄容器中切换为垂直布局，而在宽容器中显示为水平布局。规则，根据容器的尺寸或自定义属性匹配条件。例如，为移动设备隐藏侧边栏，或在大屏幕上增加网格列数。两者可结合使用，构建兼顾全局与细节的响应式设计系统。

2025-05-22 10:52:09 422

原创【前端】每日一道面试题3：如何实现一个基于CSS Grid的12列自适应布局？

本文介绍了如何利用CSS Grid实现一个12列自适应布局，重点在于网格系统的灵活性和响应式设计。首先，通过display: grid和grid-template-columns: repeat(12, 1fr)定义网格容器，并使用gap设置列间距。其次，通过grid-column控制子元素的跨列数，并结合媒体查询实现不同屏幕尺寸的响应式布局。文章还提供了实战案例，展示了如何利用12列网格实现经典的三栏布局，并通过grid-template-areas直观定义布局结构。最后，总结了关键优化点，如使用gap替

2025-05-10 16:25:53 467

原创分享一款开源的图片去重软件 ImageContrastTools，基于Electron和hash算法

ImageContrastTools是一款实用的图片查重软件，适用于电脑和手机，特别适合整理混乱的相册。用户只需选择一个文件夹，软件便能自动扫描重复的JPG/PNG图片，并在扫描完成后列出重复照片，左侧显示原图，右侧显示重复图。该软件处理5000张图片大约需要5分钟，比手动查找快得多。处理方式包括移动到回收站、移动到其他文件夹或直接删除。软件界面虽然简陋，但功能强大，适合处理自拍修图废片、网店重复商品图或手机导出的重复照片。使用前建议核对缩略图，重要文件先移回收站。未来版本将增加按时间筛选功能，值得期待。

2025-05-09 17:23:56 389

原创【前端】每日一道面试题2：解释CSS盒模型的box-sizing属性，以及它在响应式布局中的作用。

通过统一盒模型的计算逻辑，成为响应式设计的基石。它不仅简化了开发者的尺寸控制流程，还提升了多设备适配的可靠性和代码可维护性。

2025-05-08 14:20:07 317

原创【年薪60k】2025年大厂面试题，涵盖基础、进阶和新兴技术方向，看看你能答几道题

【代码】【年薪60k】2025年大厂面试题，涵盖基础、进阶和新兴技术方向，看看你能答几道题。

2025-05-06 13:36:31 343

原创电脑重复图片太多？推荐一款开源的图片去重工具ImageContrastTools

ImageContrastTools 是一款基于Electron的跨平台图片查重工具，支持文件夹扫描、重复文件识别与可视化处理。程序提供移动到回收站/移动到指定目录/彻底删除三种方式处理重复图像。扫描结果以列表形式展示，可按文件大小只能选择需要移出的图片。提供release版本，可以直接下载使用。程序根据用户选中的文件夹开始扫描图片文件。实测扫描5000照片大概需要5分钟左右。支持JPG / PNG图片批量扫描对比。最后共检测出240张重复图片。

2025-04-30 16:04:44 422

原创 nodejs调用deepsekkapi流式输出完整代码

【代码】nodejs调用deepsekkapi流式输出完整代码。

2025-03-11 10:26:07 204

原创阿里云cdn被盗刷攻击怎么办？分享本人这次的解决方案

分享自己的解决办法，先限流避免大额消费，下载离线日志，分析高频IP，拉入黑名单。开启运营报表，自动监控高频IP。第三步：写了一段nodejs代码，自动读取目录里的文件分析，最后把ip段添加到黑名单里。第一步：设置cdn限流，这个方法可以让你省点经费，但是超过限制后，cdn就没作用了。以上就是本次的处理方案，目前还在持续观测，如果还不能解决，我准备转到百度云加速了。最后把高频ip，全部添加到黑名单，过了一天时间，目前没有发现被盗刷的情况了。我抓紧排查了一下，进入cdn主页，我直接天塌了，请看图片。

2024-12-07 09:40:14 1181

原创 react + antd desgin 使用form功能时upload，radio，checkbox不能回显的问题

注意：Switch、Checkbox 的 valuePropName 应该是 checked，否则无法获取这个两个组件的值。由于upload的组件值是fileList，所以需要在form.item组件上多加一个属性即可解决，看代码。最近使用react开发遇到form回显的问题，处理upload回显的问题，提示。所以checkbox和radio对应的值都是checked所以也需要改。查看文档后，在form.item 组件下有一个特殊属性。另外对自定义表单组件也很有帮助。

2024-12-05 15:06:15 529

原创【前端】每日一道面试题1：手写call，bind，apply代码

要手写一段 JavaScript 中的 call() 方法代码，我们首先需要了解 call() 的作用。call() 是 JavaScript 中 Function 对象的方法，它允许你指定一个特定的 this 值，并以一个参数列表的形式调用函数。call() 方法通常用于改变函数执行时的上下文环境（即 this 值）。在这个示例中，greet 函数通过 myCall 绑定了 person 作为 this，并传入了参数 ‘Bob’。这样就实现了类似 call() 的效果。

2024-11-07 16:04:02 177

原创前端网页模板-感动中国5页-html5网页作业末图代码分享，带js轮播图，留言板表单验证，css过渡动画

请添加图片描述。

2024-11-07 15:59:13 162

原创 QQ邮箱自动删除邮件脚本

如果效果不好各位把 delay(time) 时间多加点。今天发现批量删除不好使了，只能一页一页删除。

2024-10-17 00:46:41 226

原创 vue3 父组件数组更新，子组件没变化问题解决

最近在开发vue3 遇到的一个问题，父组件数组更新，子组件没变化。缺点就是之前使用过data属性的，需要全部改为。解决方法，目前只能这样解决。

2024-08-16 15:47:15 1294

原创记录vue eslint配置一些问题和理解

除了 plugin:vue/vue3-essential，在使用 Vue.js 3 的项目中，你还可以选择其他的 ESLint 插件配置，具体取决于你的需求和团队的偏好。在推荐的规则基础上，增加了类型相关的检查，适合 TypeScript 项目。包含了一些推荐的规则，比较适合大多数项目使用，可以帮助你维持代码质量。更严格的规则集，结合了类型检查，适合大型或者对类型安全要求较高的项目。提供了一组更严格的规则，帮助你编写更干净、一致的代码。

2024-06-19 14:54:55 313

原创【2024最新】nodejs 捣鼓node-gyp 的流程

网上的教程真是太久了，要求python2.7和visual tool 2015.现在已经是python3.x和vistal 2022了。2.重点是visual ，要安装桌面c++开发。1.python3 直接去官网下载，最新版。

2024-05-21 23:43:19 248

原创阿里云oss 微信小程序上传图片，服务端php签名代码

例子给的是nodejs的，照着写了一份,最后调用 createUploadParams即可。

2024-05-09 23:14:07 182

原创抓某电商网站商品信息js代码

【代码】抓某电商网站商品信息js代码。

2024-01-07 21:58:58 557

原创谈一下nginx location 匹配优先级，为什么设了反向代理不生效的问题

作为前端开发来说，部署项目时，nginx反向代理用的相对较多，有时候反向代理并不会生效，我们来分析一下原因。导致我们在请求 #2 packageSoftTest 时。你会惊奇的发现 packageSoftTest 是失效的。正好匹配到了 #1 的packageSoft。所以请求就会走到 127.0.0.1:8000;这就是因为使用了 “不带修饰的前缀匹配”

2023-11-16 10:57:28 2204

原创简单说下vue3 toraw的作用

toRaw 是 Vue 3 中的一个函数，它的作用是将一个响应式对象转换为普通的 JavaScript 对象。需要注意的是，toRaw 只能用于 Vue 3 中创建的响应式对象，对于普通对象或 Vue 2 中的响应式对象，调用 toRaw 会直接返回输入对象本身，不做任何转换。如果对象是响应式的，我们可以使用 toRaw 将其转换为原始值，并对其进行一些非响应式的操作。获取原始值：通过调用 toRaw，可以获取到一个响应式对象的原始 JavaScript 对象，而不是它的代理对象。

2023-11-13 15:51:17 1164

原创 vue打包相对路径，设置publicPath没作用解决方法

不知道为什么会导致，publicPath没有生效。transpileDependencies这个属性，

2023-10-18 13:12:35 2625

原创 vue项目引入包显示Module parse failed: Unexpected token (96:28)

也就说，咱们的项目为了兼容性，会编译成es5的代码，但是node_module中的依赖包，默认都不编译。所以需要使用transpileDependencies这个对象来手动编译一下。经常搜索，我查到了vue.config.js中的一个配置对象，叫transpileDependencies，具体是这样写的。打开vue.config.js文件，添加了我的包，以及包所需要的其他依赖包，重新运行项目。有可能是我的项目是两三年前的项目。看起来是因为webpack不能识别这个包里的语法。今天项目需要加一个新的依赖包。

2023-10-16 17:16:17 9573 5