ACの博客

做产品前，先别急着写代码：我是怎么判断一个点子值不值得做的

Wed, 15 Apr 2026 07:00:32 GMT

做产品前，先别急着写代码：我是怎么判断一个点子值不值得做的

作者: 前端AC | 原文: https://juejin.cn/post/7628874305050443814

以前我总觉得，做产品最重要的是执行力。后来我慢慢发现，真正拉开差距的，往往不是谁做得快，而是谁一开始选对了问题。很多项目做不起来，不是因为技术不够强，而是因为从第一步就选错了方向。

为什么很多人做产品，最后都做成了 “自己觉得有用”？

我见过很多技术人做产品，起手都很像：

做一个 AI 工具
做一个效率 App
做一个知识管理产品
做一个 “感觉很多人都会需要” 的平台

然后就开始设计页面、写接口、做功能、调体验。

最后上线之后，结果往往并不理想：

用户可能会来看看，但不会留下
有人会觉得 “还不错”，但不会持续使用
更现实一点，几乎没人愿意付费

我后来越来越认同一个判断：

很多产品不是做得不够好，而是一开始就不值得做。

这件事对技术人尤其容易发生。因为我们太容易把注意力放在 “怎么做” 上，却忽略了 “为什么做”“值不值得做”。

所以现在我再看一个产品点子，第一反应已经不是 “这个能不能实现”，而是：

这是不是一个真需求？
这是谁的需求？
这个人为什么今天就想解决它？
他会不会为了解决它付钱？

我现在判断一个点子，主要看三件事

如果要把 “怎么找点子” 这件事讲清楚，我觉得最重要的其实就三点：

先判断这是不是一个真需求
不要服务所有人，要找到最痛的那群人
不要闭门做产品，要先低成本验证

这三点，比 “灵感” 重要得多。

第一件事：先判断这是不是一个真需求

我以前很容易被一种感觉误导：

这个东西挺有用的，那应该可以做。

后来我发现，“有用” 和 “值得做” 之间差得非常远。

因为很多东西确实有用，但不够痛、不够急、不够刚需，最后也不值得用户付费，更不值得用户改变习惯。

所以我现在判断一个需求，主要看三个标准：

用户愿不愿意付费
用户愿不愿意为它改变行为
如果不解决，用户会不会持续承受损失

只有这三个条件同时成立，我才会把它当成一个真正值得看的方向。

我会把需求分成三层

为了让自己判断更清楚，我通常会把需求粗分成三类：

类型	特点	用户状态	做产品的优先级
痛点	不解决就难受	焦虑、麻烦、持续付出代价	高
爽点	解决了会很爽	更高效、更方便	中
痒点	有了更好，没有也行	可替代、可忽略	低

我现在基本认定一个排序：

痛点 > 爽点 > 痒点

这个排序非常重要，因为技术人最容易踩的坑，就是拿 “痒点” 当 “痛点” 做。

比如这些方向，看起来都挺合理：

喝水提醒
更好看的待办工具
更精致的记账产品
自动整理知识卡片
一个新的习惯追踪工具

这些方向不能说完全没价值，但问题是：它们往往不够痛。

用户可能会说：

听起来不错
好像有点意思
有空可以试试

但真正到付费那一步，很多人就停住了。因为没有它，生活照样能过。

所以我现在看一个想法，先不问 “功能是不是酷”，而是先问一句：

如果没有这个产品，用户现在到底在承受什么？

如果答案只是 “不太方便”，那大概率还不够。

如果答案是：

每天都在为这个问题花很多时间
经常犯错
很焦虑
有损失
有风险
影响工作或生活质量

那我才会继续往下看。

第二件事：不要服务所有人，要找到最痛的那群人

我现在越来越不相信 “大而全” 的点子了。

一旦一个点子听起来像这样：

健身 App
记账 App
新闻助手
校园二手平台
学习工具
效率工具

我第一反应就会比较警惕。

不是因为这些方向不能做，而是因为这种说法太泛了。只要你面向 “所有人”，基本就意味着你会直接撞进一个已经很拥挤的市场。

对个人开发者或者小团队来说，这种打法通常很难赢。

所以我现在更倾向于这样想问题：

不是我要做一个什么工具，而是我要帮哪一类人，在什么具体场景下，解决一个特别痛的问题。

这是一个非常大的思维切换。

我怎么切分人群？

我的做法很简单：先把一个大需求拆成人群，再去看哪一群最痛、最愿意付费、最容易切进去。

比如 “记账” 这个需求，如果不切分，它只是一个很普通的方向。

但只要一切，你就会发现完全不是一回事：

人群	表面上都在 “记账”	实际问题完全不同
普通上班族	记录消费	懒得记，坚持不下来
自由职业者	管收入支出	收入不稳定，现金流焦虑
小微企业主	管日常支出	个人和公司花销混在一起
留学生家长	看海外消费	不知道孩子的钱到底花去哪了

这时候你会发现，真正值得做的可能不是 “记账” 这个动作本身，而是其中某种更深层的情绪和问题。

比如对留学生家长来说，他们的核心痛点根本不是 “记账”，而是：

失控感
不透明
不安心
不知道孩子是不是超支了
不知道钱花到了什么地方

于是产品定位就发生了变化。

它不再是一个 “自动记账 App”，而更像是：

留学资金管家

一旦这么重构，你卖的就不再只是功能，而是结果：

实时同步
超支提醒
月度分析
风险预警
家长心里有数

这就是我理解的：不要做泛需求，要切到最痛的那群人。

第三件事：不要闭门造车，要先验证

我现在对 “想得很完整再开始做” 这件事已经比较警惕了。

因为很多时候，你越往后做，沉没成本越高，最后越难承认方向不对。

所以我现在更愿意早点验证，早点暴露问题。

我判断一个点子，通常会先做 5 件事

1. 找到 10 个真实用户聊

不是泛泛地问朋友，而是尽量找到真正会遇到这个问题的人。

2. 问他们现在怎么解决

我不会问：

你会不会用这个产品？
你觉得这个 idea 怎么样？

因为这种问题太容易得到礼貌性答案。

我更关心的是：

你现在怎么解决这个问题？
最近一周这个问题困扰了你几次？
你为了处理它花了多少钱、多少时间？
你觉得现有方案哪里最难受？

3. 看现有替代方案是不是足够差

用户现在有没有用别的方法凑合？

比如：

Excel
手工记录
多个工具拼凑
忍着不解决
用成熟产品但很不满意

如果用户已经用一个成熟产品，而且非常满意，那机会通常不大。

但如果用户现在是：

用笨办法硬扛
用多个工具勉强拼起来
明明有产品，但体验很差

这种反而更值得看。

4. 做一个最小可验证版本

我现在不会一上来做完整产品，而会先做最小验证。

比如：

一个 landing page
一个飞书表单
一个 Notion 页面
一个微信群
一个原型页
一个极简 demo

我验证的重点不是 “功能齐不齐”，而是：

有没有人愿意点进去
有没有人愿意留联系方式
有没有人愿意进一步沟通
有没有人愿意先付一点钱

5. 尽量让验证靠近 “真实付费”

这一点我现在特别看重。

因为 “愿意试试” 和 “愿意掏钱” 完全不是一回事。

所以如果条件允许，我会尽早做这些动作：

预约
预售
定金
小额试用费

能不能拿到第一笔钱，往往比一百句 “听起来不错” 更有价值。

我现在找点子，通常按这个顺序走

如果把上面的思路再收敛一下，我自己现在找点子的流程，大概是这样的：

第一步：从自己熟悉的问题开始

我尽量从这些地方找线索：

我自己长期遇到的问题
我身边人反复抱怨的问题
我能持续接触到的人群问题
我比别人更理解的场景问题

因为点子的本质，不只是 “想到”，更是 “理解到位”。

第二步：把大需求切成人群

我会先列出 3 到 5 类可能的人群，然后逐个判断：

谁最痛
谁最愿意付费
谁最容易接触
谁的竞争没那么激烈
我对谁理解最深

第三步：写出这个用户的一天

这是我现在很常用的方法。

因为很多痛点，如果你不落到真实场景里，是看不出来的。

比如 “产后恢复” 这个方向，如果只说概念，会很空。

但只要写成一天，你就很容易看到真实问题：

时间	场景	表面问题	深层情绪
早上	宝宝刚睡，有 30 分钟空闲	不知道该做什么动作	恐惧
上午	抱娃很久，腰酸背痛	没空系统训练	焦虑
下午	想恢复，但身体状态不稳定	担心练错	无助
晚上	终于有空照镜子	身材变化大	自卑、孤独

这样一写你就会发现，这类用户真正需要的，不只是一个 “健身工具”。

她需要的是：

安全感
恢复方案
专属指导
情绪支持
被理解

于是这个产品就不该叫 “健身 App”，而更像是：

产后恢复助手

这就是从 “一个功能” 升级为 “一个解决方案” 的过程。

第四步：把功能重构成结果

我现在做定位时，会强迫自己从 “功能语言” 切到 “结果语言”。

比如：

功能表达	结果表达
记账工具	资金管家
新闻聚合	情报官
番茄钟	工作证明工具
健身课程	恢复助手
这个转变非常关键，因为用户最终买的不是功能，而是：

安心
节省时间
降低风险
提升掌控感
缓解焦虑

第五步：先做最小验证，再决定要不要做大

这是我现在最看重的一步。

我不太相信 “先做出来再说”。

我更相信：

先验证，再投入。

哪怕验证结果不理想，也是一件好事。因为这意味着你用最低成本排除了一个错误方向。

三个我觉得特别典型的例子

例子一：从 “健身 App” 到 “产后恢复助手”

一开始的想法

做一个健身 App，提供训练课程、打卡、记录和社区。

这个想法的问题

方向太泛，而且竞争太强。如果你只是做一个更普通的健身工具，用户很难有切换动力。

更好的切法

把 “想健身的人” 拆开看：

普通健身者
增肌人群
糖尿病患者
产后妈妈

如果继续往下挖，会发现产后妈妈这个群体的需求很典型：

时间非常碎片化
身体状态特殊
容易焦虑
对 “安全” 和 “专业” 极度敏感
愿意为恢复付费

重构后的产品

不是健身 App，而是：

产后恢复助手

它提供的价值也不只是课程，而是：

分阶段恢复方案
适合碎片时间的训练
动作安全指导
情绪支持和陪伴

例子二：从 “记账 App” 到 “留学资金管家”

一开始的想法

做一个自动记账工具，帮用户分类消费。

这个想法的问题

市场太成熟，普通用户替代品太多。

更好的切法

切到 “留学生家长” 这个人群。

这类人的真实需求不是 “我要记账”，而是：

我想知道孩子的钱花到哪了
我想知道有没有超支
我想知道消费结构是否异常
我想减少那种不透明带来的不安

重构后的产品

留学资金管家

核心不再是记账，而是：

资金透明
超支提醒
异常消费感知
家长掌控感

例子三：从 “新闻助手” 到 “投研情报官”

一开始的想法

做一个新闻聚合工具，方便看资讯。

这个想法的问题

普通用户并不缺新闻入口，大平台已经做得很好。

更好的切法

切到金融分析师、投研从业者。

这类人的真实需求不是 “多看一点新闻”，而是：

不要漏掉关键行业动态
不要错过目标公司的公告
能够快速理解信息变化
提升判断效率

重构后的产品

投研情报官

它卖的不是资讯，而是：

信息雷达
关键信号提取
公告追踪
辅助决策

AI 在 “找点子” 这件事上，我是怎么用的？

我觉得 AI 很适合在下面这些环节帮忙：

帮我重新切分人群
帮我补全用户场景
帮我重写产品定位
帮我规划 MVP
帮我生成用户访谈问题
帮我整理验证指标

但我不会把 “判断需求真假” 这件事完全交给 AI。

因为最关键的部分其实还是你自己：

你是不是真的理解这个人群
你有没有见过那个场景
你有没有接触到真实用户
用户是不是真的愿意付钱

所以我现在更愿意把 AI 当成一个 “打磨器”，而不是 “点子生成器”。

这是我自己会直接拿来用的提示词

暂时无法在飞书文档外展示此内容

最后，我现在对 “找点子” 的理解就一句话

不要先问 “我能做什么”，要先问 “谁现在真的很痛，而且愿意为解决这个痛付钱”。

真正靠谱的点子，通常不是靠脑暴拍出来的，而是沿着这条路径慢慢筛出来的：

找真需求
切细分人群
深挖场景和情绪
把功能重构成解决方案
用最小成本验证

对技术人来说，最可惜的从来不是 “做不出来”。

而是：

你明明很能做，却把最宝贵的时间花在了一个不值得做的方向上。

所以现在如果你问我，做产品最重要的一步是什么。我的答案不是写代码，也不是画原型。

而是：

先找到那个真正值得做的问题。

真正的好点子，不是 “这个功能有没有人会用”，而是 “这群人现在是不是已经痛到愿意付费”。做产品前，先别急着写代码，先把问题找对。

想偷卷？但微信不支持md文档？这个软件助你！

Tue, 21 Oct 2025 16:20:59 GMT

想偷卷？但微信不支持md文档？这个软件助你！

作者: 前端AC | 原文: https://juejin.cn/post/7563473808994549814

Markdown 查看器 - 现代化的文档预览工具

一个基于 React 19 + TypeScript 构建的现代化 Markdown 文档查看器，支持实时预览、语法高亮、数学公式渲染等功能。

在微信或浏览器上打开此编辑器，上传你的md文档可以上课偷偷看自己写的博客哈哈，这个是我解决微信这个没有md预览的痛点，自己用ai搞了一个小工具出来，效果还不错，还有图片可以借助图床工具：图床 - 简单、快速、免费的图床把自己图片上传到这里，就不会导致路径问题了。

项目概述

项目背景

在日常开发和写作中，我们经常需要预览 Markdown 文档的渲染效果。虽然市面上有很多 Markdown 编辑器，但大多数要么功能过于复杂，要么界面不够现代化。因此，我开发了这个轻量级、功能完整的 Markdown 查看器。

核心特性

现代化 UI 设计 - 基于 Tailwind CSS 的响应式设计
多主题支持 - 亮色/暗色/护眼模式，适应不同使用场景
完美适配移动端 - 响应式布局，手机平板都能完美使用
强大的 Markdown 渲染 - 支持 GFM、数学公式、代码高亮
智能本地存储 - 自动保存文档，刷新不丢失
极速加载体验 - 优化的构建配置，秒开应用

技术架构

前端技术栈

React 19.1.1          # 最新的 React 版本，性能更优
TypeScript 5.9.3      # 类型安全，开发体验更好
Vite (Rolldown)       # 下一代构建工具，构建速度极快
Tailwind CSS 3.4.10   # 原子化 CSS 框架

核心依赖

react-markdown 9.0.1   # Markdown 渲染引擎
highlight.js 11.9.0    # 代码语法高亮
katex 0.16.9          # 数学公式渲染
lucide-react 0.400.0  # 现代化图标库

项目结构

src/
├── components/        # 组件目录
│   ├── Header.tsx    # 顶部导航栏
│   ├── Sidebar.tsx   # 侧边栏文件管理
│   └── MainContent.tsx # 主内容区域
├── stores/           # 状态管理
│   └── useAppStore.ts # Zustand 全局状态
├── utils/            # 工具函数
│   ├── api.ts       # API 接口
│   ├── cache.ts     # 缓存管理
│   └── markdown.ts  # Markdown 处理
└── types/            # TypeScript 类型定义
    └── index.ts

项目地址: https://github.com/ac666666666/markdown-view
在线预览: http://129.204.12.129:9080/

pc端：

移动端：

如果这个项目对你有帮助，欢迎 Star ⭐ 支持！

新手小白如何开发练手项目？

Tue, 14 Oct 2025 03:41:08 GMT

新手小白如何开发练手项目？

作者: 前端AC | 原文: https://juejin.cn/post/7560580887253188650

前言

朱波也是好久没更新了，最近也是在疯狂的实习面试哈，也是拿到4个offer，不过都不怎么喜欢就没去了，最近也是实验室的师弟师妹们刚开始项目，也是有点不懂的地方，所以我想出一个我自己做项目的一个经验，怎么从0-1的搭建好一个项目架构，从产品-UI-开发-测试-部署上线这几个部分来。

我将举例阳江智慧养鸡项目来开始：

1-产品分析

我们前端呢也是需要去学习一些开发以外的东西，毕竟业务为王嘛，但是我们拿到一个练习项目怎么去开始写内容呢？脑子一直想不出来写啥？AI的流行，我们可以借助ai来辅助我们去分析一个产品需要有什么内容，一个好的项目我们需要花很多时间去分析它的内容。

那么我们怎么去借助ai去分析呢？这里我使用GPT去分析，不能翻墙的同学可以使用国内的ai也行。

第一步，我们分析我们的项目，《智慧养鸡》

image-20251014102843927.png

给出的结果我们来进行分析：

image-20251014103214754.png

image-20251014103246501.png

上面就是告诉我们要做多端的项目，比如web项目（浏览器PC端）、还有手机的小程序或者h5、或者手机跨端app项目，大家可以根据自己的技术、业务的范围去定。

image-20251014103436402.png

这里ai说智慧方面我们可以围绕硬件（传感器）、yolo算法、天气预报（网上有一些api可以去调用的如和风天气）等进行结合，数字孪生鸡舍技术的话结合3d技术如Three.js/Babylon.js/cannon.js去进行开发。

image-20251014103633503.png

围绕鸡出发，分析鸡可以写什么内容： 1-溯源系统（养殖→屠宰→销售） 2-记录一个生长档案系统（后台表单的crud） 3-ai健康指数（算法分析鸡的生长情况）

image-20251014103747654.png

围绕在阳江地理方面，可以结合当地一个地理位置和文化优势，当地特色就是阳江土鸡，需要数据的话可以去当地的养殖场采集数据。或者做一个前台的文化宣传平台如：http://129.204.12.129:9092/

image-20251014105735570.png

image-20251014110033554.png

image-20251014110044772.png

这个是给的一些页面大概设计，根据自己的需求来，如果自己技术不行的就选一些自己可以的，然后没有想法的可以借鉴，不一定跟着来.

image-20251014110056649.png

这个是给的大概的技术栈，可以借鉴一下。现在我们就清楚我们要写什么内容了，接下来我举例pc端的一个后台或者一个前台展示页面，教大家如何去UI设计页面

2-UI设计

前端不如那些UI设计一样懂页面设计，但是我们可以借助ai软件，市场上有很多ai： 1-扣子：https://space.coze.cn/ 2-bolt：https://bolt.new/ 3-v0：(https://v0.dev/) 4-蓝湖：(https://mastergo.com/files/home)

接下来我举例蓝湖设计我的简单页面：

image-20251014110525922.png

image-20251014110536825.png

image-20251014110649897.png

然后复制到ai页面,顺便选择我们的技术栈，这里我使用vue：

image-20251014110734225.png

image-20251014110849788.png

然后就开始生成我们的内容，你可以根据需要去调整，然后就开始设计我们的大概页面，大家就可以把这个原型图扔给我们的ai模型，开始去写代码了哈哈。

image-20251014111439528.png

3-搭建前端项目

我之前就发过一篇vue的项目搭建，具体可看：从0到1配置vue项目跟git仓库连接！前言小编心血来潮，想出一集vue的项目配置，包括git和项目环境搭配，如下： - 掘金，里面有教如何创建vue3项目，配置git，配置简单路由。

4-接口文档

在开发过程中，前后端协调会以一个接口文档来统一我们的字段，接口，请求方式等，后端一般会给我们一个接口文档，然后我们前端调接口拿到数据去放到页面上。我们前端也可以使用mock去模拟请求，减少开发周期，不懂的可以看官方文档：Mock.js。测试接口可以使用：postman、aipost，Apifox等。我习惯是使用aipost：

image-20251014111536964.png

5-部署（宝塔快速部署）

项目完成之后就可以打包部署了，常见指令：npm run build，打包成一个dist文件，然后我们可以选择一个云服务商：腾讯云、阿里云、七牛云等，这里我经常使用的是腾讯云，可以去购买一个轻量型云服务器（新用户有试用期一个月），然后就部署我们的前端项目。

image-20251014111812384.png

image-20251014111840423.png

这里我以我的一个无敌服务器（其实一大堆危险）为例，点击三个点…查看应用详情

image-20251014111950051.png

复制我们的命令，然后点击登录

image-20251014112003568.png

然后执行：

image-20251014112046822.png

image-20251014112109559.png

拿到我们进入宝塔的一个链接，进去之后（选择高级），可能不安全，不管他，然后输入账号密码进去页面：

image-20251014112235337.png

然后点击文件菜单，把我们的dist文件上传上去。

image-20251014112308685.png

然后点击网站

image-20251014113134756.png

image-20251014112320161.png

来网站这边选择php项目/html项目，添加站点

image-20251014113013432.png

然后把dist目录路径选对

image-20251014113038737.png

然后网站名就是我们的ip地址，然后配置我们的nginx，配置好端口/404页面

image-20251014113134756.png

然后放行我们的防火墙9095端口

image-20251014113247482.png

然后重启一下nginx

image-20251014113153344.png

我们的项目就可以上线演示咯！

27拓扑前端日常实习面经

Thu, 04 Sep 2025 05:18:50 GMT

27拓扑前端日常实习面经

作者: 前端AC | 原文: https://juejin.cn/post/7545794742550855730

没有笔试题，但是会有情景题数学题 1-面试官进来就先介绍他们的业务还有技术还有招的人数，主要是在业务这方面聊天差不多20分钟 2-自我介绍 3-es6新特性 4-讲讲promise 5-讲一下v-for的key吧，为什么要用，然后涉及到虚拟dom的什么原理 6-前端工程化 7-问我开发有没有ai习惯，是ai主导还是自己主导，然后跟我讲了现在中小厂都是ai开发的 8-前端未来方向是超级程序员，啥都干，要跳出前端，业务为主，业务就是秦始皇反问 1-项目大了怎么维护呢？

前端常见安全问题 + 防御方法 + 面试回答

Sun, 31 Aug 2025 09:48:02 GMT

前端常见安全问题 + 防御方法 + 面试回答

作者: 前端AC | 原文: https://juejin.cn/post/7543981652944273460

1. XSS（跨站脚本攻击）

定义

XSS（Cross-Site Scripting）是一种 通过注入恶意脚本执行非预期操作 的攻击。
分为三类：

存储型：代码存储在数据库中，用户访问时执行（评论区、论坛）。
反射型：代码通过 URL 参数返回执行。
DOM 型：前端 JS 动态插入数据时执行。

危害

窃取 Cookie、Token，盗取用户身份。
伪造请求（转账、发帖）。
植入恶意脚本、广告、木马。

防御手段

输入过滤 + 输出转义。
CSP（Content Security Policy） 限制脚本来源。
HttpOnly Cookie，防止通过 JS 获取。
前端框架（React/Vue）默认转义 HTML。

示例

❌ 漏洞代码

document.body.innerHTML = location.search;

访问：

http://site.com?msg=<script>alert(1)</script>

✅ 安全代码

document.body.textContent = location.search;

2. CSRF（跨站请求伪造）

定义

CSRF（Cross-Site Request Forgery）利用 用户已登录状态，诱导其访问恶意链接，伪造合法请求。
浏览器会自动带上用户 Cookie，从而冒充用户身份。

危害

转账、盗刷。
修改密码、邮箱。
批量操作（删帖、发帖）。

防御手段

CSRF Token 验证（每个请求附带随机 Token）。
SameSite Cookie：阻止跨站请求携带 Cookie。
验证码 / 二次确认。
Referer / Origin 校验。

示例

❌ 漏洞

<img src="http://bank.com/transfer?to=attacker&amount=1000">

✅ 安全（CSRF Token）

<form method="POST" action="/transfer">
  <input type="hidden" name="csrfToken" value="random123">
  <input name="to">
  <input name="amount">
  <button>提交</button>
</form>

3. SQL 注入

定义

SQL 注入是攻击者 在输入中注入恶意 SQL 代码，拼接后数据库直接执行。

危害

绕过登录验证。
窃取/篡改数据。
删除数据库。

防御手段

参数化查询 / 预编译（Prepared Statement） ✅
输入校验（过滤 ', --, ; 等特殊符号）。
最小权限（避免删库）。
使用 ORM 框架。

示例

❌ 漏洞

const sql = `SELECT * FROM users WHERE username='${username}' AND password='${password}'`;
db.query(sql);

输入：

' OR '1'='1

✅ 安全

const sql = 'SELECT * FROM users WHERE username=? AND password=?';
db.query(sql, [username, password]);

4. 文件上传漏洞

定义

文件上传漏洞是指：攻击者上传恶意文件（如 WebShell），服务器未严格校验，导致代码执行或 DoS 攻击。

危害

上传脚本木马，控制服务器。
上传恶意文档，攻击用户。
上传大文件，导致拒绝服务。

防御手段

白名单文件类型（校验扩展名 + MIME + 文件头）。
重命名文件（避免保留原始扩展名）。
存储到非 Web 目录。
限制大小/数量。
前端校验（次要）+ 后端强制校验（核心） 。

示例

❌ 漏洞

if (substr($_FILES['file']['name'], -4) === ".jpg") {
    move_uploaded_file($_FILES['file']['tmp_name'], "/uploads/" . $_FILES['file']['name']);
}

攻击者上传 evil.php.jpg。

✅ 安全（Node.js）

const upload = multer({
  storage,
  fileFilter: (req, file, cb) => {
    const allowed = ['image/jpeg', 'image/png'];
    if (!allowed.includes(file.mimetype)) return cb(new Error('Invalid type'));
    cb(null, true);
  },
  limits: { fileSize: 1024 * 1024 * 2 }
});

5. 其他前端常见安全问题

5.1 点击劫持（Clickjacking）

定义：攻击者在透明 iframe 中嵌套目标站点，引导用户点击。
防御：X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors 'none';。

5.2 敏感信息泄露

问题：前端暴露 API Key、JWT、调试接口。
防御：
- 不在前端存储敏感信息。
- 使用环境变量 + 后端代理。

5.3 依赖安全漏洞

问题：前端依赖（npm 包）可能被注入恶意代码。
防御：
- 使用 npm audit/yarn audit。
- 锁定依赖版本。
- 关注供应链安全（supply chain attack）。

6. 面试常见问答

Q1: 什么是 XSS？怎么防御？

跨站脚本攻击，注入恶意 JS。
危害：窃取 Cookie、执行恶意操作。
防御：输入过滤 + 输出转义 + CSP + HttpOnly Cookie。

Q2: 什么是 CSRF？怎么防御？

跨站请求伪造，利用用户 Cookie 发起伪造请求。
防御：CSRF Token、SameSite Cookie、验证码、Referer 校验。

Q3: 什么是 SQL 注入？怎么防御？

在输入中拼接 SQL 语句篡改数据库。
防御：预编译、参数化查询、最小权限、ORM 框架。

Q4: 文件上传漏洞如何防御？

白名单校验文件类型（MIME + 文件头）。
上传后重命名，存储到非 Web 目录。
限制大小和数量，多层校验。

Q5: 点击劫持如何防御？

使用 X-Frame-Options 或 CSP frame-ancestors。

吉比特（雷霆游戏）前端二面问题总结

Wed, 27 Aug 2025 09:53:13 GMT

吉比特（雷霆游戏）前端二面问题总结

作者: 前端AC | 原文: https://juejin.cn/post/7542953832671592467

一、岗位与经历相关

介绍在吉比特雷霆游戏岗位负责的具体工作内容（如营销活动、H5页面等）。
岗位要求中提到需要哪些技术能力（如前端、服务端基础、小游戏经验等）？
介绍你的教育背景（学校、专业）及前端学习经历（Vue/React掌握程度）。
讲讲你在东田数码和中科院的两段实习分别做了什么？
你近期参与了哪些开源项目（如OMI框架）？具体贡献了什么？
你开发过哪些小工具或技术探索项目（如Markdown预览器、Three.js游戏）？

二、技术问题（深入探讨）

1. 开源与工具开发

你参与的开源编辑器（模仿BigMall）是为了解决什么问题？腾讯为什么要做这个编辑器？
这个编辑器的底层引擎是什么？开发模式是怎样的（如团队分工、流程）？

2. 性能优化

你在东田实习时如何优化动画S5编辑器的webpack打包性能？具体用了什么方案？
你提到的SMR热更新是如何实现的（核心机制）？
移动端适配你用了rem和CSS媒体查询，吴湖生建议用PX+Webpack插件转rem，你怎么看？
水产养殖系统里为什么把PNG图片换成Webp？还用了哪些优化手段（如CDN/SSR）？
前端单页面应用和SSR在首屏渲染上有什么区别？从SEO角度为什么推荐SSR？
大屏可视化项目中3D图表卡顿，你是怎么优化的（如何切换2D/3D）？
前端盒子模型有哪两种（标准/怪异）？它们的宽高计算有什么区别？

3. 前端基础与原理

Vue 2的响应式原理是什么（如何实现依赖收集和更新）？有哪些缺点（如数组、对象操作）？
Vue 3的响应式原理和Vue 2有什么区别（Proxy的作用）？
Vue 2依赖收集时用的数据结构是什么（吴湖生问但未答出）？
Vue 2中数组索引变化和新增/删除对象属性为什么监听不到？怎么解决（deep/watch）？
Vue 2中是如何重写数组方法（如push）来实现新增项通知依赖的？具体怎么实现？
webpack打包的完整流程是什么（从入口到输出）？生产环境优化方案有哪些（如Tree Shaking）？
webpack中loader的作用是什么？它的执行顺序是怎样的（从上到下/从右到左）？

4. 其他技术

HTTPS和HTTP有什么区别（加密/安全性）？HTTPS的实现原理是什么（握手过程）？
你认为前端性能优化的核心指标有哪些（如首屏加载、渲染时间）？具体优化方法是什么（如懒加载、CDN）？

三、代码实践

用递归实现一个深拷贝（现场编码，考察逻辑与实现细节）。

四、面试流程相关

你之前技术面的表现如何？接下来可能有HR面吗？
你知道吉比特（雷霆游戏）的办公地点在深圳吗？

吉比特27前端实习面试

Sat, 16 Aug 2025 07:40:02 GMT

吉比特27前端实习面试

作者: 前端AC | 原文: https://juejin.cn/post/7538769988296900660

前言

朱波误闯GBT，面试官挺好的，居然后面说也是同校师兄，给了一些面评还有简历修改意见，下面是询问的一些内容，有一些忘记了。

一、技术问题复盘

算法题

1. 无重复字符的最长子串（LeetCode 原题）

问题：求字符串中不含重复字符的最长子串长度
反思：需掌握滑动窗口解法（双指针+哈希表记录字符索引），理解时间复杂度 O(n) 的优化逻辑

项目拷打 & 实习经历

2. 项目拷打 / 实习拷打

问题：对实习项目和课程项目的细节挖掘（技术实现、难点解决、量化结果）
反思：回答过于浅层，需明确「使用了什么技术 → 解决了什么问题 → 达成了什么效果（数据量化）」

前端核心原理

3. 响应式原理

问题：Vue/React 响应式实现机制（如 Vue2 的 Object.defineProperty、Vue3 的 Proxy；React 的 setState 调度）
反思：需区分框架差异，结合依赖收集、派发更新等流程详细说明

4. OMI 是什么？你做了什么？

问题：对自研/使用的前端框架（如 OMI，类 Web Components 方案）的理解与实践
反思：需清晰描述 OMI 的核心特性（如基于 Custom Elements 的封装），以及个人在其中的开发贡献（如组件开发、性能优化等）

5. 封装组件如何实现 React 和 Vue 兼容？

问题：跨框架组件设计的通用方案（如通过 Web Components 或 props/event 标准化）
反思：需提及适配层设计（如统一事件通信、属性传递规范）

6. 如何封装组件？

问题：组件的设计原则（单一职责、可复用性）与实现步骤（Props 定义、状态管理、事件暴露）
反思：需结合具体场景（如业务组件/通用组件）说明封装思路

7. 组件通信

问题：父子/跨组件通信方式（如 Props/Events、Context、Vuex/Pinia、Redux、事件总线等）
反思：需区分场景说明适用方案

JavaScript 基础

8. 闭包

问题：函数与词法环境的绑定关系（如闭包的形成条件、应用场景、内存泄漏风险）
反思：需通过代码示例解释（如计数器、模块化封装）

9. HTTP 和 HTTPS

问题：两者区别（明文传输 vs 加密传输）、HTTPS 的必要性

10. HTTPS 加密过程

问题：SSL/TLS 握手流程（非对称加密协商密钥 → 对称加密传输数据），涉及证书校验、密钥交换算法（如 RSA/ECDHE）
反思：需分步骤说明（客户端 Hello → 服务端响应 → 密钥交换 → 加密通信）

11. 继承

问题：JavaScript 实现继承的方式（原型链继承、构造函数继承、组合继承、寄生组合继承）及优缺点

12. 原型链及其优点

问题：原型链的查找机制（proto 与 prototype 的关系）、通过原型实现方法复用的优势

前端性能与图形

13. WebGL 和 ECharts-GL 怎么切换的？

问题：WebGL 原生开发与 ECharts-GL（基于 WebGL 的图表库）的适配逻辑（如场景需求决定技术选型）

14. Three.js 性能优化

问题：渲染优化（如实例化渲染、LOD、合并几何体）、资源管理（如纹理压缩、模型减面）、动画优化（如减少重绘）

15. WebP 渐进式加载如何兼容浏览器？降级如何处理？

问题：通过 <picture> 标签或 JavaScript 检测浏览器支持（如 Image 对象探测），降级至 JPEG/PNG

实习功能实现

16. 实习中如何实现视频/图片动态文本叠加功能？

问题：技术实现细节（如 Canvas/WebGL 叠加、动态文本渲染、交互控制），需说明具体方案与难点

浏览器原理

17. 浏览器的渲染原理

问题：从 HTML 解析到页面显示的全流程（DOM 树 → CSSOM 树 → 渲染树 → 布局 → 绘制 → 合成），重绘与回流的影响因素

18. CSS 是怎么解析的？

问题：CSS 解析流程（选择器匹配 → 样式计算 → 层叠优先级），以及与渲染流程的关联

二、面试面评总结

主要问题

基础不扎实：核心原理（如响应式、原型链、HTTPS 加密）理解停留在表面，缺乏细节推导能力。
项目回答过浅：仅描述「做了什么」，未说明「为什么做 → 怎么解决 → 效果如何」，量化结果缺失。
表达能力不足：技术描述逻辑混乱，未能清晰传递关键信息。

改进方向

算法：针对性刷题（重点 LeetCode 热题 100），每题需总结「解题思路 → 代码实现 → 时间复杂度分析」。
基础知识：重新梳理前端核心原理（响应式、原型链、浏览器渲染、HTTP/HTTPS），结合图示理解流程。
项目复盘：精简简历项目描述，保留「技术栈 → 核心功能 → 解决的问题 → 量化效果」结构（如：通过虚拟列表优化长列表渲染，首屏加载时间减少 40%）。
表达训练：用「STAR 法则」练习技术问题回答（Situation-背景, Task-任务, Action-行动, Result-结果）。

三、简历优化建议

内容精简：控制在 1 页内，删除冗余信息（如移动端 rem 适配等基础技能）。
重点突出：保留 1-2 个高含金量奖项（如国家级竞赛），项目聚焦「性能优化」「复杂功能实现」等亮点。
项目描述：按「技术栈 → 核心功能 → 解决的问题 → 效果提升」结构编写（示例：
- 项目名称：XXX 动态文本叠加系统
  - 技术栈：Canvas/WebGL + Vue.js
  - 功能：实现视频/图片与动态文本的实时叠加（支持字体、位置、动画调整）
  - 解决问题：通过离屏渲染优化文本绘制性能，解决多图层叠加时的闪烁问题
  - 效果：渲染帧率从 30fps 提升至 60fps，用户操作响应延迟降低 50%
    ）。

纷享销客前端实习一面

Thu, 07 Aug 2025 07:33:33 GMT

纷享销客前端实习一面

作者: 前端AC | 原文: https://juejin.cn/post/7535495474457182242

自我介绍

学校+专业+姓名+什么时候开学前端+前端经验+实习公司+项目

1. 前端是怎么学的？

我一开始是通过 B 站、掘金、官网文档等资源自学 HTML、CSS 和 JavaScript，后面通过做一些小项目巩固知识，比如实现简易的 todoList、天气查询、图形拖拽等。后来我系统性地学习了 Vue 和 React，掌握了组件化开发、路由、状态管理、前端工程化等内容，并在实习中参与真实项目，不断积累实践经验。

2. 为什么对前端感兴趣？

我喜欢前端是因为它“看得见”，可以快速地将代码变成界面和交互体验，并且它紧跟技术潮流、新东西不断出现，很有挑战和成就感。同时，我也喜欢把复杂的逻辑通过交互变得简单直观，提升用户体验。

3. 和别人相比，你觉得自己有什么优势？

学习能力强：我能快速掌握新框架新技术。
实践动手能力强：不仅看理论，也会动手做项目实践。
注重细节和用户体验：对 UI 和交互的细节比较敏感。
团队协作意识强：在实习和合作项目中习惯使用 git 协作，能主动沟通推进任务。

4. 城市地铁规划使用了什么算法？有用到遍历吗？

地铁规划本质是图论问题，地铁站是节点、线路是边，常用算法包括：

最短路径算法：如 Dijkstra（用于求最短行驶路线）
最小生成树算法：如 Prim、Kruskal（构建最优成本线路）
遍历算法：如 DFS/BFS（查找所有路径或最少换乘路径）
A*：启发式最优路径（更智能）
网络流算法：分析高峰期站点流量瓶颈

所以遍历是必须要用的，尤其是在路径搜索、换乘优化等场景中。

5. 举一个时间复杂度的例子

function printPairs(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr.length; j++) {
      console.log(arr[i], arr[j]);
    }
  }
}

时间复杂度是 O(n^2)
因为有两个嵌套循环，每个都跑 n 次。

6. Promise实例？ promise.all 第一个执行后面的还会执行吗？为什么？

1. 创建普通 Promise 实例

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("成功");
    // 或 reject("失败");
  }, 1000);
});

2. Promise.resolve()

快速创建一个成功的 Promise

const p = Promise.resolve("立即成功");
p.then(console.log); // 立即成功

3. Promise.reject()

快速创建一个失败的 Promise

const p = Promise.reject("立即失败");
p.catch(console.error); // 立即失败

4. Promise.all()

等待所有 Promise 成功，否则立刻失败

Promise.all([
  Promise.resolve(1),
  Promise.resolve(2)
]).then(res => console.log(res)); // [1, 2]

5. Promise.race()

谁先完成（成功或失败），就返回谁的结果

Promise.race([
  new Promise(r => setTimeout(() => r("A"), 500)),
  new Promise(r => setTimeout(() => r("B"), 1000))
]).then(console.log); // A

6. Promise.allSettled()

等待所有完成（不管成功或失败），返回每个的状态

Promise.allSettled([
  Promise.resolve("yes"),
  Promise.reject("no")
]).then(console.log);

/*
[
  { status: 'fulfilled', value: 'yes' },
  { status: 'rejected', reason: 'no' }
]
*/

7. Promise.any()（ES2021）

只要有一个成功就返回结果；全部失败才报错

Promise.any([
  Promise.reject("fail"),
  Promise.resolve("success")
]).then(console.log); // success

8. async/await 与 Promise

async function fetchData() {
  const data = await Promise.resolve("结果");
  console.log(data); // 结果
}

二、promise.then 返回什么？

1. 返回一个新的 Promise

const p = Promise.resolve(1);

const p2 = p.then(val => {
  return val + 1;
});

p2.then(console.log); // 2

then() 返回的是一个新的 Promise 实例
可以链式调用，不会影响原 Promise

2. 返回值分类

返回内容	结果
普通值（如字符串、数字）	包装成一个成功的 Promise
Promise 对象	等待它的状态
抛出异常 / 返回 `throw`	返回失败的 Promise

3. 示例：then 返回普通值

Promise.resolve("a")
  .then(val => val + "b") // 返回的是 "ab"
  .then(console.log); // ab

4. 示例：then 返回一个 Promise

Promise.resolve("a")
  .then(val => Promise.resolve(val + "b"))
  .then(console.log); // ab

5. 示例：then 抛异常

Promise.resolve("x")
  .then(val => {
    throw new Error("出错了");
  })
  .catch(err => console.error(err.message)); // 出错了

const p1 = new Promise(resolve => setTimeout(() => resolve('A'), 1000));
const p2 = new Promise(resolve => setTimeout(() => resolve('B'), 2000));

Promise.all([p1, p2]).then(res => {
  console.log(res); // ['A', 'B']
});

是的，后面的会继续执行。
Promise.all 会等所有 Promise 都成功，才返回结果。
即使第一个已经执行完，后面的也会照常执行，不会提前停止。
如果其中有一个失败（reject），Promise.all 会立刻 reject，后续结果不会返回。

7. reduce 是什么？使用示例？

reduce 是数组的一个高阶函数，用于累计处理数组值。

const arr = [1, 2, 3, 4];
const sum = arr.reduce((acc, cur) => acc + cur, 0); // 10

也可以将数组转对象：

const people = [{ id: 1, name: 'Tom' }, { id: 2, name: 'Jerry' }];
const map = people.reduce((acc, cur) => {
  acc[cur.id] = cur.name;
  return acc;
}, {});

8. nextTick 是什么？

在 Vue 中，nextTick 用于等待 DOM 更新完成后再执行某个逻辑。
在 Node.js 中，process.nextTick 是一种微任务，比 setTimeout 还早执行。

Vue.nextTick(() => {
  console.log('DOM updated!');
});

9. 数组扁平化有几种方式？

方法一：`flat()`（ES2019+）

[1, [2, [3]]].flat(Infinity) // [1, 2, 3]

方法二：递归

function flatten(arr) {
  return arr.reduce((acc, cur) =>
    Array.isArray(cur) ? acc.concat(flatten(cur)) : acc.concat(cur), []);
}

方法三：栈（迭代模拟递归）

function flatten(arr) {
  const stack = [...arr];
  const result = [];
  while (stack.length) {
    const val = stack.pop();
    if (Array.isArray(val)) {
      stack.push(...val);
    } else {
      result.unshift(val);
    }
  }
  return result;
}

10. 在项目中，Vue 和 React 有什么区别？

对比项	Vue	React
编程范式	更接近模板 + 配置式	更偏函数式、JSX 写法
数据绑定	响应式系统（双向绑定）	单向数据流，需要自己用 state 和 props 控制
组件写法	options API / composition API	函数组件 / class 组件（已弃用）
状态管理	Vuex / Pinia	Redux / Zustand / Context
生命周期命名	比较直观（如 `mounted`）	更底层（如 `useEffect`）
上手难度	上手快	更灵活但学习曲线稍陡

字节前端面试知识点总结

Sun, 27 Jul 2025 09:28:51 GMT

字节前端面试知识点总结

作者: 前端AC | 原文: https://juejin.cn/post/7531664455932231722

前言

主包总结了前端字节经常出现的真题，也是其他面试也经常会问的题目，答案是询问gpt的，有需要自取

1. 闭包是什么？

定义： 闭包是函数和其词法作用域的组合，即一个函数可以“记住”其定义时所处的作用域，即使在函数在其作用域外执行。

原理： 函数在定义时会“捕获”其外部作用域变量，即便函数在外部执行，这些变量仍然可以访问。

应用场景：

数据隐藏（如创建私有变量）
函数柯里化
缓存（memoization）
防抖 / 节流函数

示例：

function createCounter() {
  let count = 0
  return function() {
    count++
    return count
  }
}
const counter = createCounter()
counter() // 1
counter() // 2

面试话术： 闭包的本质是函数作用域的记忆，它能保存状态、做私有封装，是 JS 函数式编程的核心能力。

2. 防抖函数

定义： 设定一个固定时间 delay，事件触发后 delay 时间内不再触发才执行函数。

应用：

输入框搜索
resize 监听
scroll 滚动优化

实现：

function debounce(fn, delay) {
  let timer = null
  return function(...args) {
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}

通俗解释： 比如你敲键盘，每次敲一个字母，后台就发请求——太浪费了。防抖就是“等你停 500ms 再发”。

面试话术： 防抖通过闭包保存定时器，避免频繁调用，是前端事件性能优化中最常见的应用。

3. Flex 布局项目中如何使用

核心轴： 主轴（默认横向）+ 交叉轴（默认纵向）

常用属性：

容器属性（display: flex, justify-content, align-items）
项目属性（flex, order, align-self）

示例： 横向居中：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

项目中应用： 页面布局、导航栏、左右结构、弹性容器都可用 flex 实现响应式适配。

面试话术： Flex 布局简洁强大，适合一维布局场景，主流页面都离不开它。

4. 跨域是什么？如何解决？

定义： 浏览器同源策略限制，不允许从一个域向另一个域发起 AJAX 请求。

判断跨域标准： 协议、域名、端口三者只要有一个不同就属于跨域。

常见解决方案：

CORS（后端设置 Access-Control-Allow-Origin）
JSONP（仅 GET 请求）
代理转发（前端开发服务器配置 proxy）
iframe + postMessage 通信

面试话术： 跨域是浏览器安全机制导致，生产中主要使用 CORS 或 proxy。JSONP 是早期解决方案。

5. JSONP 和 postMessage

JSONP： 利用 <script> 标签无跨域限制，通过 URL 传参数，后端返回 JS 调用函数。

// 前端：
function handleData(data) {
  console.log(data)
}
const script = document.createElement('script')
script.src = 'http://example.com/data?callback=handleData'
document.body.appendChild(script)

缺点： 仅支持 GET，请求不安全，不推荐用于敏感数据。

postMessage： 跨域 iframe/窗口之间通信的安全机制。

// 子页面：
window.parent.postMessage('hello', '*')

// 父页面：
window.addEventListener('message', (e) => {
  console.log(e.data)
})

面试话术： postMessage 更现代、安全，推荐用在 iframe 跨域、OAuth 登录、前端微服务通信场景。

6. WebSocket 重连接与消息重发

定义： WebSocket 是双向通信协议，可实现浏览器和服务器的实时通信。

断线重连实现思路：

使用 onclose 监听断开
延迟一段时间尝试 reconnect
设置最大重试次数避免无限重连

发送消息重试：

发送前检测 socket.readyState
若未连接好，将消息暂存，连接建立后 flush 消息队列

示例代码片段：

let socket
let msgQueue = []

function initSocket() {
  socket = new WebSocket('wss://server')

  socket.onopen = () => {
    msgQueue.forEach(msg => socket.send(msg))
    msgQueue = []
  }

  socket.onclose = () => {
    setTimeout(initSocket, 1000)
  }
}

function send(msg) {
  if (socket.readyState === 1) socket.send(msg)
  else msgQueue.push(msg)
}

面试话术： WebSocket 是实时通信首选协议，断线重连和消息重发机制对稳定性要求较高的业务尤为重要。

7. npm / yarn / pnpm 区别

工具	安装速度	node_modules 结构	支持 monorepo	特点
npm	普通	扁平	部分支持	官方默认，稳定性好
yarn	快	扁平	✅	缓存机制好，lock 文件稳定
pnpm	更快	严格嵌套 + 软链	✅	节省磁盘空间，速度极快，软链接

面试话术：在大多数现代项目中，推荐使用 pnpm 或 yarn 替代 npm，尤其是配合 monorepo 管理大型代码仓库时。

8. Monorepo 是什么？

定义：多个项目/包统一放在一个仓库中维护的方式（mono=单，repo=仓库）。

优势：

模块之间联动方便
依赖统一管理
适合组件库或多个产品线统一维护

工具：

pnpm workspaces
Lerna
Turborepo

面试话术：Monorepo 能简化大型项目协同开发、版本管理及构建发布过程，在中大型前端团队中很常见。

9. VueRouter 实现原理（手写版）

核心机制：监听 URL 变化（hash/history）→ 渲染对应组件

基本手写实现（Hash 模式）：

const routes = {
  '/': '首页',
  '/about': '关于页'
}

function render() {
  const path = location.hash.slice(1) || '/'
  document.getElementById('view').innerText = routes[path] || '404'
}

window.addEventListener('hashchange', render)
render()

关键点：

使用 location.hash 获取路由
页面中预留 <div id="view"></div> 容器渲染内容

面试话术：VueRouter 本质是监听 URL 变化，然后根据路由映射渲染对应视图，可通过自定义组件结合响应式完成 router-view 效果。

10. Tree Shaking 与按需加载

Tree Shaking 原理：ES Module 静态结构分析 + 标记未使用代码 + 删除

工具支持：Webpack、Rollup、Vite 都支持 Tree Shaking

按需加载组件库方式（如按需加载 Element Plus）：

import { ElButton } from 'element-plus'

或使用插件：

// babel-plugin-import
{
  "libraryName": "element-plus",
  "libraryDirectory": "es",
  "style": true
}

面试话术：Tree Shaking 能有效减少产物体积，前提是使用 ESModule 且编译工具支持。按需加载组件库也是一种 Tree Shaking 的实际运用。

11. 打包流程与图片资源处理

整体打包流程（以 Webpack 为例）：

解析入口文件（entry）
构建模块依赖图（import/require）
编译代码（Babel、TS、CSS loader）
Tree shaking / 压缩优化
输出 bundle 到 dist 文件夹

图片处理：

小图（<8kb）：转 base64 内联到 JS 中，减少请求数
大图：复制到 dist，生成 hash 文件名，自动替换路径

module.exports = {
  module: {
    rules: [
      {
        test: /\.png$/,
        type: 'asset',
        parser: { dataUrlCondition: { maxSize: 8 * 1024 } },
      }
    ]
  }
}

面试话术：打包的核心是将源码模块化、标准化处理为浏览器可识别的 JS/CSS/HTML/图片资源，优化性能、缓存与部署流程。

12. 浏览器缓存机制

两类缓存：

强缓存（状态码 200 from cache）：Expires、Cache-Control
协商缓存（状态码 304 Not Modified）：Last-Modified、ETag

强缓存示例：

Cache-Control: max-age=31536000

协商缓存示例：

ETag: "abc123"
If-None-Match: "abc123"

面试话术：合理配置 HTTP 缓存头可显著提升网站性能与加载速度，需兼顾更新与命中率。

13. this 的指向、new 创建过程

this 取决于调用方式：

普通函数：window（或 undefined 严格模式）
对象调用：this 指向调用者
bind/call/apply 修改 this
箭头函数：this 不变，取决于父作用域

new 做了哪些事？

创建空对象
this 指向该对象
执行构造函数
返回对象（显式返回对象则替换）

示例：

function Person(name) {
  this.name = name
}
const p = new Person('Tom')

面试话术：this 是 JS 中最容易出错的机制，理解调用上下文尤为重要。new 是构造函数实例化对象的过程。

14. 原型链与类的区别

原型链定义： 每个对象都有 __proto__，指向其构造函数的 prototype，最终形成一条链。

类的实现（ES6 class）： 语法糖，本质仍是构造函数 + prototype 实现继承

区别总结：

类是语法层面结构
原型链是对象查找属性的方法机制

面试话术：理解原型链是理解继承、作用域、 instanceof 的关键，类是对原型的封装，便于组织代码结构。

15. Vue3 响应式原理

**Vue2 响应式缺陷：**基于 Object.defineProperty，数组无法监听新增属性

Vue3 使用 Proxy 实现响应式：

捕捉 get、set 操作
结合依赖收集与触发更新（effect）

示例核心代码：

const reactive = obj => new Proxy(obj, {
  get(target, key) {
    track(target, key) // 依赖收集
    return Reflect.get(target, key)
  },
  set(target, key, value) {
    const res = Reflect.set(target, key, value)
    trigger(target, key) // 触发更新
    return res
  }
})

面试话术：Vue3 相比 Vue2，在响应式系统更具灵活性和性能，Proxy 的优势在于可监听新增、删除、数组索引等所有操作。

16. 虚拟列表与 IntersectionObserver 实现懒加载

虚拟列表定义：只渲染可视区域的数据，提升长列表性能。

实现方式：

固定高度列表 + 滚动监听
滚动时计算渲染区间索引，动态替换 DOM

IntersectionObserver 实现图片懒加载：

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target
      img.src = img.dataset.src
      observer.unobserve(img)
    }
  })
})

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img)
})

面试话术：虚拟列表提高了性能，避免一次性渲染大量 DOM。IntersectionObserver 是现代浏览器优化滚动监听的首选。

17. 发布订阅模式

定义：一种解耦通信机制，发布者发事件，订阅者监听响应。

手写实现：

class EventBus {
  constructor() {
    this.events = {}
  }
  on(event, fn) {
    (this.events[event] ||= []).push(fn)
  }
  emit(event, ...args) {
    this.events[event]?.forEach(fn => fn(...args))
  }
}

应用场景：

组件通信（兄弟组件）
Vue 的 emit/emit / emit/on 本质

面试话术：发布订阅用于组件解耦或异步通知，是前端常用架构思想之一。

18. Composition API 与 Options API

特性	Options API	Composition API
组织方式	分散（data、methods）	聚合（setup 函数中）
复用逻辑	Mixin	可组合函数（Composable）
类型推导支持	较弱	TypeScript 更友好

面试话术：Composition API 更适合复杂逻辑组合与 TS 项目，Options API 更适合初学者。Vue3 推荐使用 Composition。

19. computed 与 watch 区别

特性	computed	watch
概念	派生状态，自动缓存	监听响应式数据，手动触发回调
使用场景	模板渲染的衍生值	监听异步操作、副作用处理
返回值	返回值	无返回值

面试话术：computed 是依赖驱动、自动缓存的计算属性，而 watch 更像是监听器，用于观察数据变化并做副作用操作。

20. React18 特性

核心变化：

自动批处理（无需手动包裹 setTimeout）
并发特性（startTransition）
useId（防止 SSR 问题）

新 API 示例：

import { startTransition } from 'react'

startTransition(() => {
  setValue('new')
})

面试话术：React18 最大亮点是并发渲染与自动批处理机制，大幅提升响应能力与开发体验。

21. let / const / var 区别

特性	var	let	const
作用域	函数作用域	块级作用域	块级作用域
提升	有（值为 undefined）	有（不初始化）	有（不初始化）
重复声明	允许	报错	报错
可修改	是	是	否（基本类型）

面试话术：let/const 是 ES6 提供的更安全、作用域明确的声明方式，建议默认使用 const。var 已逐步淘汰。

22. Vuex 与 Pinia 区别

特性	Vuex	Pinia
API 风格	module + mutations/actions	setup 语法，函数式组织
类型支持	差	优秀（TS 支持一流）
使用成本	多	少（无需冗余代码）
Devtools	Vue Devtools	支持更好

面试话术：Pinia 是 Vue3 官方推荐状态库，简洁、支持 Composition API、类型推导强，是 Vuex 的未来替代品。

23. HTTP 与 HTTPS 区别

项目	HTTP	HTTPS
安全性	明文传输，易被窃听	加密传输（SSL/TLS）
端口	80	443
证书要求	无	需 CA 签发的数字证书

面试话术：HTTPS 是 HTTP + SSL/TLS 加密，防止中间人攻击与数据泄露，现代站点必备。

24. HTTP 状态码分类

1xx：信息（如 101 Switching Protocols）
2xx：成功（如 200 OK，204 No Content）
3xx：重定向（如 301 永久重定向，302 临时重定向）
4xx：客户端错误（如 404 Not Found，403 Forbidden）
5xx：服务端错误（如 500 内部错误，502 Bad Gateway）

面试话术：重点掌握 200、301、302、304、403、404、500、503 等状态含义。

25. HTTP/2 特性

多路复用（一个连接并发多个请求）
头部压缩（减少重复 header 体积）
Server Push（服务端主动推送资源）
二进制协议（比文本更快）

面试话术：HTTP/2 在性能上是 HTTP1 的升级，极大减少了连接数量与传输体积。

26. TCP 三次握手

过程说明：

客户端：发送 SYN
服务端：收到后返回 SYN + ACK
客户端：收到后回复 ACK，连接建立

为什么三次？

防止已失效的连接请求重复到达造成错误

面试话术：三次握手确保双方具备收发能力并保持同步，防止半连接攻击。

27. HTTP 缓存控制方式

强缓存：

Expires（绝对时间）
Cache-Control: max-age=3600

协商缓存：

Last-Modified + If-Modified-Since
ETag + If-None-Match

流程图：

有强缓存 → 直接使用
无强缓存 → 发请求，命中协商缓存返回 304

面试话术：合理缓存配置可极大提升前端性能和用户体验。

28. DNS 使用的协议

DNS 查询过程涉及多个协议：

应用层协议：DNS
传输层协议：UDP（默认）或 TCP（大于 512 字节）
网络层协议：IP

面试话术：DNS 查询是 Web 加载的第一步，通常使用 UDP 提高效率，大包或可靠性要求则转为 TCP。

29. 应用层协议

常见应用层协议包括：

HTTP / HTTPS
FTP / SFTP
SMTP / POP3 / IMAP
WebSocket
DNS

面试话术：OSI 七层模型最顶层是应用层，主要面向用户交互与数据格式处理。

30. UDP 协议

特点：

面向无连接
不保证顺序、不保证可靠
发送快、开销小

典型应用：

视频直播
DNS 查询
实时游戏

与 TCP 区别：

TCP 可靠但慢，UDP 快但不可靠

面试话术：UDP 常用于对时效性要求高、能容忍少量丢包的场景。

08-刚体约束 Constraint

Wed, 23 Jul 2025 16:26:37 GMT

08-刚体约束 Constraint

作者: 前端AC | 原文: https://juejin.cn/post/7530180210872811570

刚体约束 Constraint

本节目标

学习如何使用 cannon-es 的约束（Constraint）系统，让多个刚体之间具有物理连接，如铰链、点对点连接等。

基础知识讲解

Cannon.js 中的约束用于在两个刚体之间建立某种规则限制，使它们表现出类似于物理连接（链条、铰链、弹簧等）的行为。

常见约束类型

约束类型	描述
`PointToPointConstraint`	点对点连接（类似绳子连接两点）
`HingeConstraint`	铰链连接（门的转动效果）
`LockConstraint`	锁定两个刚体之间的所有自由度
`DistanceConstraint`	固定两个点的距离（距离保持不变）

示例：点对点约束连接两个小球

我们将创建两个小球，并使用 PointToPointConstraint 将它们连接在一起，实现“弹簧绳索”的效果。

示例代码（Vue3 + cannon-es）

vue复制编辑<!-- App.vue -->
<template>
  <canvas ref="canvasRef"></canvas>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as THREE from 'three'
import * as CANNON from 'cannon-es'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

const canvasRef = ref()

onMounted(() => {
  // 创建 Three.js 场景
  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  camera.position.set(0, 5, 15)

  const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.value })
  renderer.setSize(window.innerWidth, window.innerHeight)

  const controls = new OrbitControls(camera, renderer.domElement)
  controls.enableDamping = true

  // 添加光源
  const light = new THREE.DirectionalLight(0xffffff, 1)
  light.position.set(5, 10, 5)
  scene.add(light)

  // 初始化物理世界
  const world = new CANNON.World()
  world.gravity.set(0, -9.82, 0)

  // 创建地面
  const groundBody = new CANNON.Body({
    mass: 0,
    shape: new CANNON.Plane()
  })
  groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0)
  world.addBody(groundBody)

  const ground = new THREE.Mesh(
    new THREE.PlaneGeometry(20, 20),
    new THREE.MeshStandardMaterial({ color: 0x999999, side: THREE.DoubleSide })
  )
  ground.rotation.x = -Math.PI / 2
  scene.add(ground)

  // 创建两个球体
  const sphereGeo = new THREE.SphereGeometry(0.5, 32, 32)
  const sphereMat = new THREE.MeshStandardMaterial({ color: 0x00aaff })

  const createSphere = (x, y) => {
    const mesh = new THREE.Mesh(sphereGeo, sphereMat)
    mesh.position.set(x, y, 0)
    scene.add(mesh)

    const body = new CANNON.Body({
      mass: 1,
      shape: new CANNON.Sphere(0.5),
      position: new CANNON.Vec3(x, y, 0)
    })
    world.addBody(body)

    return { mesh, body }
  }

  const ballA = createSphere(-2, 5)
  const ballB = createSphere(2, 5)

  // 添加点对点约束（连接 ballA 和 ballB）
  const constraint = new CANNON.PointToPointConstraint(
    ballA.body, new CANNON.Vec3(0.5, 0, 0),
    ballB.body, new CANNON.Vec3(-0.5, 0, 0)
  )
  world.addConstraint(constraint)

  // 动画循环
  const clock = new THREE.Clock()
  function animate() {
    requestAnimationFrame(animate)

    const delta = clock.getDelta()
    world.step(1 / 60, delta)

    // 同步位置
    [ballA, ballB].forEach(({ mesh, body }) => {
      mesh.position.copy(body.position)
      mesh.quaternion.copy(body.quaternion)
    })

    controls.update()
    renderer.render(scene, camera)
  }

  animate()
})
</script>

2025-07-23T16_13_19.635Z-496341.gif

重点解释

代码片段	解释
`PointToPointConstraint`	将两个球体通过世界坐标系中的特定点连接起来，模拟绳索连接的效果。
`new CANNON.Vec3(0.5, 0, 0)`	约束在 ballA 的局部空间的连接点
`new CANNON.Vec3(-0.5, 0, 0)`	约束在 ballB 的局部空间的连接点
`world.addConstraint(...)`	将该约束注册到物理世界中

你可以尝试的拓展

使用 DistanceConstraint 来实现固定距离效果
将其中一个球体 mass: 0 变为固定点
尝试加入多个球体，实现链条式连接（类似吊桥）

总结

刚体约束是 Cannon.js 中实现刚体间连接的重要方式
本节展示了点对点约束的用法
可以用来实现链条、吊桥、布料物理等效果

07-监听碰撞事件和获取碰撞信息

Wed, 23 Jul 2025 16:25:37 GMT

07-监听碰撞事件和获取碰撞信息

作者: 前端AC | 原文: https://juejin.cn/post/7530119090058084378

监听碰撞事件和获取碰撞信息

在物理仿真中，了解刚体之间的碰撞信息是非常关键的。Cannon.js 提供了 collide 事件，让我们能够在碰撞发生时捕获相关信息，比如碰撞对象、冲击速度等。

一、监听碰撞事件

body.addEventListener('collide', (event) => {
  console.log('发生碰撞！')
  console.log('碰撞到的刚体:', event.body)
  console.log('碰撞强度:', event.contact.getImpactVelocityAlongNormal())
})

字段	含义
`event.body`	与当前刚体发生碰撞的刚体
`event.contact`	碰撞联系信息
`getImpactVelocityAlongNormal()`	获取法向方向上的冲击速度（衡量碰撞强度）

二、完整示例

球体从空中落下与地面发生碰撞，并在控制台打印碰撞信息：

<!-- App.vue -->
<script setup>
import { onMounted, ref } from 'vue'
import * as THREE from 'three'
import * as CANNON from 'cannon-es'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

const canvasRef = ref()

onMounted(() => {
  // 创建 Three.js 场景与相机
  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100)
  camera.position.set(0, 5, 10)

  // 渲染器和轨道控制器
  const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.value })
  renderer.setSize(window.innerWidth, window.innerHeight)
  const controls = new OrbitControls(camera, renderer.domElement)
  controls.enableDamping = true

  // 灯光
  const light = new THREE.DirectionalLight(0xffffff, 1)
  light.position.set(10, 10, 10)
  scene.add(light)

  // 创建物理世界
  const world = new CANNON.World()
  world.gravity.set(0, -9.82, 0)

  // 创建地面刚体
  const groundBody = new CANNON.Body({
    mass: 0,
    shape: new CANNON.Plane()
  })
  groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0)
  world.addBody(groundBody)

  // 创建地面网格
  const groundGeo = new THREE.PlaneGeometry(10, 10)
  const groundMat = new THREE.MeshStandardMaterial({ color: 0x999999, side: THREE.DoubleSide })
  const groundMesh = new THREE.Mesh(groundGeo, groundMat)
  groundMesh.rotation.x = -Math.PI / 2
  scene.add(groundMesh)

  // 创建小球
  const radius = 0.5
  const sphereGeo = new THREE.SphereGeometry(radius, 32, 32)
  const sphereMat = new THREE.MeshStandardMaterial({ color: 0x0077ff })
  const sphereMesh = new THREE.Mesh(sphereGeo, sphereMat)
  sphereMesh.position.set(0, 5, 0)
  scene.add(sphereMesh)

  const sphereBody = new CANNON.Body({
    mass: 1,
    shape: new CANNON.Sphere(radius),
    position: new CANNON.Vec3(0, 5, 0)
  })
  world.addBody(sphereBody)

  //  碰撞事件监听
  sphereBody.addEventListener('collide', (event) => {
    console.log(' 碰撞发生！')
    console.log('与谁发生碰撞:', event.body)
    console.log('冲击速度:', event.contact.getImpactVelocityAlongNormal().toFixed(2))
  })

  // 动画更新
  const clock = new THREE.Clock()
  const timeStep = 1 / 60

  function animate() {
    requestAnimationFrame(animate)
    const delta = clock.getDelta()
    world.step(timeStep, delta)

    sphereMesh.position.copy(sphereBody.position)
    sphereMesh.quaternion.copy(sphereBody.quaternion)

    controls.update()
    renderer.render(scene, camera)
  }

  animate()
})
</script>

<template>
  <canvas ref="canvasRef"></canvas>
</template>

2025-07-23T13_47_28.405Z-885294.gif

三、碰撞信息可以做什么？

用途	描述
播放音效	根据碰撞强度播放不同音效
触发逻辑	如“命中目标”后触发销毁或得分
记录日志	用于物理调试或分析仿真结果
可视化反应	冲击越强，颜色变化越剧烈

小技巧

若想检测多个刚体的碰撞，分别为它们绑定监听器。
想获取更详细的碰撞点信息，可查看 event.contact.ri 和 event.contact.rj（相对接触点）。

06 - 物体休眠与休眠事件详解（Cannon.js）

Wed, 23 Jul 2025 16:24:47 GMT

06 - 物体休眠与休眠事件详解（Cannon.js）

作者: 前端AC | 原文: https://juejin.cn/post/7530106154313433098

06 - 物体休眠与休眠事件详解（Cannon.js）

Cannon.js 提供了物体的休眠机制（Sleep），当刚体长时间处于静止或低速状态时，会自动进入“休眠”状态，从而 节省计算资源。

一、核心知识点

概念	说明
`allowSleep`	是否允许该物体休眠（默认 false）
`sleepSpeedLimit`	速度低于该值会开始休眠计时（默认 0.1）
`sleepTimeLimit`	静止多久后才真正休眠（默认 1 秒）
`sleepState`	当前休眠状态（`AWAKE`, `SLEEPY`, `SLEEPING`）
事件	`sleep`, `wakeup` 可监听进入或唤醒状态

二、常量说明（`CANNON.Body.SLEEPING`）

状态	值	含义
`CANNON.Body.AWAKE`	0	活跃状态
`CANNON.Body.SLEEPY`	1	正在准备休眠
`CANNON.Body.SLEEPING`	2	已休眠

三、完整示例（Vue3 + Cannon.js）

<!-- App.vue -->
<script setup>
import { onMounted, ref } from 'vue'
import * as THREE from 'three'
import * as CANNON from 'cannon-es'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

const canvasRef = ref()

onMounted(() => {
  // 场景、相机
  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100)
  camera.position.set(0, 5, 10)

  // 渲染器与轨道控制
  const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.value })
  renderer.setSize(window.innerWidth, window.innerHeight)
  const controls = new OrbitControls(camera, renderer.domElement)
  controls.enableDamping = true

  // 灯光
  const light = new THREE.DirectionalLight(0xffffff, 1)
  light.position.set(10, 10, 10)
  scene.add(light)

  // 物理世界
  const world = new CANNON.World()
  world.gravity.set(0, -9.82, 0)

  // 地面刚体
  const groundBody = new CANNON.Body({
    mass: 0,
    shape: new CANNON.Plane()
  })
  groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0)
  world.addBody(groundBody)

  // 地面可视化
  const groundGeo = new THREE.PlaneGeometry(10, 10)
  const groundMat = new THREE.MeshStandardMaterial({ color: 0x999999, side: THREE.DoubleSide })
  const groundMesh = new THREE.Mesh(groundGeo, groundMat)
  groundMesh.rotation.x = -Math.PI / 2
  scene.add(groundMesh)

  // 创建一个立方体（可休眠）
  const boxSize = 1
  const boxGeo = new THREE.BoxGeometry(boxSize, boxSize, boxSize)
  const boxMat = new THREE.MeshStandardMaterial({ color: 0x44aa88 })
  const boxMesh = new THREE.Mesh(boxGeo, boxMat)
  boxMesh.position.set(0, 5, 0)
  scene.add(boxMesh)

  const boxBody = new CANNON.Body({
    mass: 1,
    shape: new CANNON.Box(new CANNON.Vec3(0.5, 0.5, 0.5)),
    position: new CANNON.Vec3(0, 5, 0)
  })
  // ✅ 允许休眠
  boxBody.allowSleep = true
  boxBody.sleepSpeedLimit = 0.1
  boxBody.sleepTimeLimit = 1.0

  world.addBody(boxBody)

  //  监听休眠与唤醒事件
  boxBody.addEventListener('sleep', () => {
    console.log(' 物体进入休眠状态')
    boxMesh.material.color.set(0xaaaaaa)
  })

  boxBody.addEventListener('wakeup', () => {
    console.log(' 物体被唤醒')
    boxMesh.material.color.set(0x44aa88)
  })

  // 动画循环
  const clock = new THREE.Clock()
  const timeStep = 1 / 60

  function animate() {
    requestAnimationFrame(animate)
    const delta = clock.getDelta()
    world.step(timeStep, delta)

    boxMesh.position.copy(boxBody.position)
    boxMesh.quaternion.copy(boxBody.quaternion)

    controls.update()
    renderer.render(scene, camera)
  }

  animate()
})
</script>

<template>
  <canvas ref="canvasRef"></canvas>
</template>

四、常见用途

性能优化：大量静态物体（如积木塔）静止后进入休眠，不再参与模拟。
状态切换提示：休眠时更换颜色、显示文字、播放音效等。
唤醒机制：被碰撞、手动移动物体时自动唤醒。

小结

优点	描述
减少 CPU 计算开销	休眠体不会参与碰撞检测和力更新
适用于静态场景	如地面上的箱子、稳定的堆叠结构
事件驱动更直观	`sleep` / `wakeup` 能帮助构建游戏逻辑

05-碰撞与碰撞组

Wed, 23 Jul 2025 16:24:10 GMT

05-碰撞与碰撞组

作者: 前端AC | 原文: https://juejin.cn/post/7530141922515795978

碰撞与碰撞组

一、核心知识点讲解

在 Cannon.js 中，我们可以使用 碰撞过滤 来控制哪些物体可以彼此发生碰撞。主要依赖以下两个属性：

属性	类型	说明
`collisionFilterGroup`	`Number`	表示刚体所属的组（可以多个组按位或组合）
`collisionFilterMask`	`Number`	表示刚体可以与哪些组发生碰撞（按位与判断）

类似 bitmask 位运算控制。比如：

A 属于组 1，只想和组 2 碰撞，则：

A.collisionFilterGroup = 1

A.collisionFilterMask = 2

二、示例：三个方块，控制不同的碰撞组

地面：属于组 1，允许与组 2 和组 4 碰撞
红色方块：属于组 2，只碰地面
绿色方块：属于组 4，只碰地面
蓝色方块：属于组 8，不碰任何人

示例代码

<script setup>
import { onMounted, ref } from 'vue'
import * as THREE from 'three'
import * as CANNON from 'cannon-es'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

const canvasRef = ref()

onMounted(() => {
  // ------------------- 初始化场景、相机、渲染器 -------------------
  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  camera.position.set(0, 8, 15)

  const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.value })
  renderer.setSize(window.innerWidth, window.innerHeight)

  const controls = new OrbitControls(camera, renderer.domElement)
  controls.enableDamping = true

  // ------------------- 光照 -------------------
  const light = new THREE.DirectionalLight(0xffffff, 1)
  light.position.set(10, 20, 10)
  scene.add(light)

  // ------------------- 创建物理世界 -------------------
  const world = new CANNON.World()
  world.gravity.set(0, -9.82, 0)

  // ------------------- 创建地面刚体 -------------------
  const groundShape = new CANNON.Plane()
  const groundBody = new CANNON.Body({
    mass: 0,
    shape: groundShape,
    collisionFilterGroup: 0b0001, // 属于组 1
    collisionFilterMask: 0b1111   // 可与所有组碰撞
  })
  groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0)
  world.addBody(groundBody)

  const groundGeo = new THREE.PlaneGeometry(20, 20)
  const groundMat = new THREE.MeshStandardMaterial({ color: 0x888888, side: THREE.DoubleSide })
  const groundMesh = new THREE.Mesh(groundGeo, groundMat)
  groundMesh.rotation.x = -Math.PI / 2
  scene.add(groundMesh)

  // ------------------- 创建球体函数 -------------------
  function createBall(color, x, group, mask) {
    const radius = 0.5

    const geometry = new THREE.SphereGeometry(radius, 32, 32)
    const material = new THREE.MeshStandardMaterial({ color })
    const mesh = new THREE.Mesh(geometry, material)
    mesh.position.set(x, 5, 0)
    scene.add(mesh)

    const shape = new CANNON.Sphere(radius)
    const body = new CANNON.Body({
      mass: 1,
      shape,
      position: new CANNON.Vec3(x, 5, 0),
      collisionFilterGroup: group,
      collisionFilterMask: mask
    })
    world.addBody(body)

    return { mesh, body }
  }

  // ------------------- 创建三个球体 -------------------
  const redBall   = createBall(0xff0000, -4, 0b0010, 0b0001) // 红球：只与地面碰撞
  const greenBall = createBall(0x00ff00,  0, 0b0100, 0b1111) // 绿球：与所有碰撞
  const blueBall  = createBall(0x0000ff,  4, 0b1000, 0b0100) // 蓝球：只与绿球碰撞

  const balls = [redBall, greenBall, blueBall] // 避免 undefined

  // ------------------- 动画更新 -------------------
  const clock = new THREE.Clock()
  const fixedTimeStep = 1 / 60

  function animate() {
    requestAnimationFrame(animate)

    const delta = clock.getDelta()
    world.step(fixedTimeStep, delta)

    for (const { mesh, body } of balls) {
      if (mesh && body) {
        mesh.position.copy(body.position)
        mesh.quaternion.copy(body.quaternion)
      }
    }

    controls.update()
    renderer.render(scene, camera)
  }

  animate()
})
</script>

<template>
  <canvas ref="canvasRef"></canvas>
</template>

三、效果说明

红色方块和绿色方块都能落在地面上（因为它们的组和掩码与地面对上了）
蓝色方块直接穿透地面（它没有任何碰撞掩码匹配地面）

四、小贴士

碰撞组默认是 1，所有物体都在组 1
掩码为 -1 时表示与所有组碰撞
可用 1 << N 来表示不同的位（如 1 << 3 = 8）

04 - 弹性与接触材质详解

Wed, 23 Jul 2025 16:22:12 GMT

04 - 弹性与接触材质详解

作者: 前端AC | 原文: https://juejin.cn/post/7530141922515779594

04 - 弹性与接触材质详解

本节目标

理解 restitution（弹性系数）的意义
设置两种材质之间的弹跳效果
对比高弹性与低弹性物体的物理行为差异

什么是弹性系数（`restitution`）？

restitution 表示两个物体碰撞时的“反弹程度”：

restitution	效果
0	完全不弹跳
1	完全弹回原高度
0 ~ 1	部分弹跳

它控制的是动能的保留程度。数值越高，动能损耗越少，弹跳越多。

在 Cannon.js 中，它在 ContactMaterial 中设置：

new CANNON.ContactMaterial(matA, matB, {
  restitution: 0.9
})

示例：高弹与低弹两个球的落地行为

我们将创建两个球，一个弹性系数为 0（完全不弹），另一个为 1（高度弹跳），观察它们的表现差异。

完整 Vue3 示例（使用 cannon-es）

<script setup>
import { ref, onMounted } from 'vue'
import * as THREE from 'three'
import * as CANNON from 'cannon-es'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

const canvasRef = ref()

onMounted(() => {
  // 1. Three.js 场景、相机、渲染器
  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000)
  camera.position.set(0, 5, 15)
  camera.lookAt(0, 0, 0)

  const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.value, antialias: true })
  renderer.setSize(window.innerWidth, window.innerHeight)

  // 2. 轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement)
  controls.enableDamping = true // 阻尼，惯性效果
  controls.dampingFactor = 0.05

  // 3. 光照
  scene.add(new THREE.AmbientLight(0xffffff, 0.7))
  const dirLight = new THREE.DirectionalLight(0xffffff, 1)
  dirLight.position.set(10, 10, 10)
  scene.add(dirLight)

  // 4. 地面网格
  const groundGeo = new THREE.BoxGeometry(20, 1, 20)
  const groundMat = new THREE.MeshStandardMaterial({ color: 0x888888 })
  const groundMesh = new THREE.Mesh(groundGeo, groundMat)
  groundMesh.position.set(0, -0.5, 0)
  scene.add(groundMesh)

  // 5. 物理世界初始化
  const world = new CANNON.World()
  world.gravity.set(0, -9.82, 0)

  // 6. 地面物理体
  const groundBody = new CANNON.Body({
    mass: 0,
    shape: new CANNON.Box(new CANNON.Vec3(10, 0.5, 10)),
  })
  groundBody.position.set(0, -0.5, 0)
  world.addBody(groundBody)

  // 7. 创建材质
  const groundMaterial = new CANNON.Material('ground')
  const softMaterial = new CANNON.Material('soft')
  const bouncyMaterial = new CANNON.Material('bouncy')

  groundBody.material = groundMaterial

  // 8. 接触材质
  world.addContactMaterial(new CANNON.ContactMaterial(groundMaterial, softMaterial, {
    friction: 0.4,
    restitution: 0.0,
  }))

  world.addContactMaterial(new CANNON.ContactMaterial(groundMaterial, bouncyMaterial, {
    friction: 0.4,
    restitution: 0.9,
  }))

  // 9. 两个球体（视觉+物理）
  const sphereGeo = new THREE.SphereGeometry(1, 32, 32)

  const softMesh = new THREE.Mesh(
    sphereGeo,
    new THREE.MeshStandardMaterial({ color: 0xff5555 })
  )
  softMesh.position.set(-3, 8, 0)
  scene.add(softMesh)

  const softBody = new CANNON.Body({
    mass: 1,
    shape: new CANNON.Sphere(1),
    position: new CANNON.Vec3(-3, 8, 0),
    material: softMaterial,
  })
  world.addBody(softBody)

  const bouncyMesh = new THREE.Mesh(
    sphereGeo,
    new THREE.MeshStandardMaterial({ color: 0x55ff55 })
  )
  bouncyMesh.position.set(3, 8, 0)
  scene.add(bouncyMesh)

  const bouncyBody = new CANNON.Body({
    mass: 1,
    shape: new CANNON.Sphere(1),
    position: new CANNON.Vec3(3, 8, 0),
    material: bouncyMaterial,
  })
  world.addBody(bouncyBody)

  // 10. 动画循环
  const fixedTimeStep = 1 / 60

  function animate() {
    requestAnimationFrame(animate)

    world.step(fixedTimeStep)

    softMesh.position.copy(softBody.position)
    softMesh.quaternion.copy(softBody.quaternion)

    bouncyMesh.position.copy(bouncyBody.position)
    bouncyMesh.quaternion.copy(bouncyBody.quaternion)

    controls.update()

    renderer.render(scene, camera)
  }
  animate()

  // 11. 窗口尺寸变化处理
  window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
  })
})
</script>

<template>
  <canvas ref="canvasRef" style="display: block; width: 100vw; height: 100vh;"></canvas>
</template>

观察结果

2025-07-23T13_02_28.319Z-592165.gif

红色小球（restitution = 0）：一落地即停止
绿色小球（restitution = 0.9）：反复弹跳好几次后才慢慢停止

你也可以试试修改 restitution = 1.0，观察是否可以无限弹跳（理论上动能完全保留，不会停下）。

小结

restitution 决定了刚体之间碰撞的反弹程度
设置在 ContactMaterial 中控制材质对之间的表现
弹跳模拟可以用于球类、橡胶类、弹簧类等物理对象
实际模拟中弹性和摩擦常常需要搭配调试

03 - Cannon 材质与摩擦系数设置

Wed, 23 Jul 2025 16:20:58 GMT

03 - Cannon 材质与摩擦系数设置

作者: 前端AC | 原文: https://juejin.cn/post/7530105407846563890

03 - Cannon 材质与摩擦系数设置

本节目标

理解什么是物理材质（Material）
学会设置摩擦系数 friction
使用 ContactMaterial 控制材质间交互
观察摩擦力对运动的影响

材质与摩擦介绍

在 Cannon.js 中：

Material 是一个刚体的物理属性载体，包括摩擦、弹性等。
只有在 ContactMaterial 中组合两个 Material 才能生效。
ContactMaterial 可定义：
- friction 摩擦系数
- restitution 弹性系数（可反弹）

举个例子：

const wood = new CANNON.Material('wood')
const ice = new CANNON.Material('ice')

const contactMat = new CANNON.ContactMaterial(wood, ice, {
  friction: 0.05,
  restitution: 0.1
})
world.addContactMaterial(contactMat)

示例：三个立方体摩擦不同的滑动对比

我们创建一个倾斜的平面，然后放上三个摩擦系数不同的立方体，观察它们滑动速度的不同。

完整 Vue3 示例（使用 cannon-es）

<script setup>
import { onMounted, ref } from 'vue'
import * as THREE from 'three'
import * as CANNON from 'cannon-es'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

const canvasRef = ref()

onMounted(() => {
  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  camera.position.set(0, 5, 15)

  const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.value })
  renderer.setSize(window.innerWidth, window.innerHeight)

  const controls = new OrbitControls(camera, renderer.domElement)
  controls.enableDamping = true

  const world = new CANNON.World()
  world.gravity.set(0, -9.82, 0)

  // 创建基础材质
  const groundMaterial = new CANNON.Material('ground')
  const matLow = new CANNON.Material('low')
  const matMid = new CANNON.Material('mid')
  const matHigh = new CANNON.Material('high')

  // 设置接触材质（摩擦系数不同）
  world.addContactMaterial(new CANNON.ContactMaterial(groundMaterial, matLow, { friction: 0.0 }))
  world.addContactMaterial(new CANNON.ContactMaterial(groundMaterial, matMid, { friction: 0.3 }))
  world.addContactMaterial(new CANNON.ContactMaterial(groundMaterial, matHigh, { friction: 1.0 }))

  // 添加地面（倾斜）
  const groundGeo = new THREE.BoxGeometry(20, 1, 10)
  const groundMat = new THREE.MeshStandardMaterial({ color: 0x888888 })
  const groundMesh = new THREE.Mesh(groundGeo, groundMat)
  groundMesh.position.set(0, -0.5, 0)
  groundMesh.rotation.z = -0.3
  scene.add(groundMesh)

  const groundBody = new CANNON.Body({
    mass: 0,
    shape: new CANNON.Box(new CANNON.Vec3(10, 0.5, 5)),
    position: new CANNON.Vec3(0, -0.5, 0),
    material: groundMaterial
  })
  groundBody.quaternion.setFromEuler(0, 0, -0.3)
  world.addBody(groundBody)

  // 立方体基础设置
  const cubeGeo = new THREE.BoxGeometry(1, 1, 1)
  const cubeShape = new CANNON.Box(new CANNON.Vec3(0.5, 0.5, 0.5))

  const cubes = []
  const bodies = []

  const settings = [
    { x: -4, color: 0xff0000, material: matLow },
    { x: 0, color: 0xffff00, material: matMid },
    { x: 4, color: 0x00ff00, material: matHigh }
  ]

  for (let i = 0; i < 3; i++) {
    const { x, color, material } = settings[i]

    const mesh = new THREE.Mesh(
      cubeGeo,
      new THREE.MeshStandardMaterial({ color })
    )
    mesh.position.set(x, 2, 0)
    scene.add(mesh)

    const body = new CANNON.Body({
      mass: 1,
      shape: cubeShape,
      position: new CANNON.Vec3(x, 2, 0),
      material
    })
    world.addBody(body)

    cubes.push(mesh)
    bodies.push(body)
  }

  // 添加灯光
  const light = new THREE.DirectionalLight(0xffffff, 1)
  light.position.set(10, 20, 10)
  scene.add(light)

  const clock = new THREE.Clock()
  const timeStep = 1 / 60

  function animate() {
    requestAnimationFrame(animate)
    const delta = clock.getDelta()
    world.step(timeStep, delta)

    for (let i = 0; i < cubes.length; i++) {
      cubes[i].position.copy(bodies[i].position)
      cubes[i].quaternion.copy(bodies[i].quaternion)
    }

    groundMesh.quaternion.copy(groundBody.quaternion)

    controls.update()
    renderer.render(scene, camera)
  }

  animate()
})
</script>

<template>
  <canvas ref="canvasRef"></canvas>
</template>

2025-07-23T12_42_22.550Z-557681.gif

观察结果

绿色立方体：friction = 0，滑得最远
黄色立方体：friction = 0.3，滑行距离适中
红色立方体：friction = 1.0，几乎立即停止

这就是摩擦系数对运动的控制作用。

小结

使用 Material 可以控制物体的物理属性
必须用 ContactMaterial 来定义两个材质之间的行为
friction 越大，滑动越慢甚至停止
可以使用多组材质，设置多种不同摩擦情况
倾斜地面是检验摩擦的最佳手段之一

02 - Cannon 引擎基础碰撞讲解

Wed, 23 Jul 2025 16:19:59 GMT

02 - Cannon 引擎基础碰撞讲解

作者: 前端AC | 原文: https://juejin.cn/post/7530105395282952230

02 - Cannon 引擎基础碰撞讲解

本节目标

理解 Cannon.js 中的碰撞原理
学习如何让两个刚体发生碰撞
配置质量、形状、位置使碰撞真实生效
用 Vue3 示例观察碰撞过程

什么是碰撞？

在 Cannon.js 中，碰撞（Collision） 是指两个或多个刚体接触后发生的物理响应。要实现碰撞：

两个物体都必须有 shape
至少一个物体必须有质量（mass > 0）
物体必须靠近、发生交错

碰撞最小实现逻辑

我们用一个最基本的例子说明：

一个球从上往下掉
底下是一个静止的平面（地板）
当球体接触地板后停止

示例：球落地碰撞+掉落

<template>
  <canvas ref="canvasRef"></canvas>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import * as THREE from 'three'
import * as CANNON from 'cannon-es'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

const canvasRef = ref()

onMounted(() => {
  // 初始化场景
  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  camera.position.set(0, 5, 15)

  const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.value })
  renderer.setSize(window.innerWidth, window.innerHeight)

  // 添加轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement)
  controls.enableDamping = true

  // 添加球体 Mesh
  const ballGeo = new THREE.SphereGeometry(1)
  const ballMat = new THREE.MeshStandardMaterial({ color: 0xff5555 })
  const ballMesh = new THREE.Mesh(ballGeo, ballMat)
  scene.add(ballMesh)

  // 添加地面 Mesh
  const groundGeo = new THREE.BoxGeometry(10, 1, 10)
  const groundMat = new THREE.MeshStandardMaterial({ color: 0x88cc88 })
  const groundMesh = new THREE.Mesh(groundGeo, groundMat)
  groundMesh.position.set(0, -0.5, 0)
  scene.add(groundMesh)

  // 添加灯光
  const light = new THREE.DirectionalLight(0xffffff, 1)
  light.position.set(10, 20, 10)
  scene.add(light)

  // 初始化物理世界
  const world = new CANNON.World()
  world.gravity.set(0, -9.82, 0)

  // 创建球体刚体
  const ballBody = new CANNON.Body({
    mass: 1, // 会受到重力影响
    shape: new CANNON.Sphere(1),
    position: new CANNON.Vec3(0, 5, 0)
  })
  world.addBody(ballBody)

  // 创建地面刚体（静止）
  const groundBody = new CANNON.Body({
    type: CANNON.Body.STATIC, // 不会动
    shape: new CANNON.Box(new CANNON.Vec3(5, 0.5, 5)),
    position: new CANNON.Vec3(0, -0.5, 0)
  })
  world.addBody(groundBody)

  // 动画循环
  const clock = new THREE.Clock()
  const timeStep = 1 / 60
  function animate() {
    requestAnimationFrame(animate)

    const delta = clock.getDelta()
    world.step(timeStep, delta)

    // 同步位置
    ballMesh.position.copy(ballBody.position)
    ballMesh.quaternion.copy(ballBody.quaternion)

    controls.update()
    renderer.render(scene, camera)
  }
  animate()
})
</script>

2025-07-23T12_14_56.568Z-506054.gif

<script setup>
import { onMounted, ref } from 'vue'
import * as THREE from 'three'
import * as CANNON from 'cannon-es'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

const canvasRef = ref()

onMounted(() => {
  // 初始化场景
  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  camera.position.set(0, 5, 15)

  const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.value })
  renderer.setSize(window.innerWidth, window.innerHeight)

  // 添加轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement)
  controls.enableDamping = true

  // 添加球体 Mesh
  const ballGeo = new THREE.SphereGeometry(1)
  const ballMat = new THREE.MeshStandardMaterial({ color: 0xff5555 })
  const ballMesh = new THREE.Mesh(ballGeo, ballMat)
  scene.add(ballMesh)

  // 添加倾斜地面 Mesh（略微倾斜）
  const groundGeo = new THREE.BoxGeometry(10, 1, 10)
  const groundMat = new THREE.MeshStandardMaterial({ color: 0x88cc88 })
  const groundMesh = new THREE.Mesh(groundGeo, groundMat)
  groundMesh.position.set(0, -0.5, 0)
  groundMesh.rotation.z = 0.1 // 倾斜 0.1 弧度
  scene.add(groundMesh)

  // 添加灯光
  const light = new THREE.DirectionalLight(0xffffff, 1)
  light.position.set(10, 20, 10)
  scene.add(light)

  // 初始化物理世界
  const world = new CANNON.World()
  world.gravity.set(0, -9.82, 0)

  // 创建球体刚体
  const ballBody = new CANNON.Body({
    mass: 1,
    shape: new CANNON.Sphere(1),
    position: new CANNON.Vec3(0, 5, 0)
  })
  world.addBody(ballBody)

  // 创建倾斜地面刚体
  const groundBody = new CANNON.Body({
    type: CANNON.Body.STATIC,
    shape: new CANNON.Box(new CANNON.Vec3(5, 0.5, 5)),
    position: new CANNON.Vec3(0, -0.5, 0)
  })
  groundBody.quaternion.setFromEuler(0, 0, 0.1) // Z 轴倾斜 0.1 弧度
  world.addBody(groundBody)

  // 动画循环
  const clock = new THREE.Clock()
  const timeStep = 1 / 60
  function animate() {
    requestAnimationFrame(animate)
    const delta = clock.getDelta()
    world.step(timeStep, delta)

    ballMesh.position.copy(ballBody.position)
    ballMesh.quaternion.copy(ballBody.quaternion)

    groundMesh.quaternion.copy(groundBody.quaternion)

    controls.update()
    renderer.render(scene, camera)
  }
  animate()
})
</script>

<template>
  <canvas ref="canvasRef"></canvas>
</template>

2025-07-23T12_14_12.043Z-860045.gif

核心知识点说明

1. `mass` 决定是否受重力影响

mass = 0（或 type: STATIC）表示不受重力、不会移动
mass > 0 表示刚体受力、能运动

2. `shape` 决定碰撞体积

用 CANNON.Sphere(radius) 创建球体
用 CANNON.Box(new Vec3(x,y,z)) 创建立方体（地面）

3. `position` 设置初始位置

球体在上方 y=5
地面在 y = -0.5，高度为1（底面居中）

4. `step()` 每帧推进物理计算

world.step() 计算物理
然后把位置同步回 Three.js 的 Mesh 上

如何确认碰撞发生了？

在这个例子中，我们还没有使用事件监听，但你可以通过观察：

球体从空中落下
触碰地面后停止下落

下一节将介绍如何监听碰撞事件，获取更详细的碰撞信息。

小结

碰撞需要物体有 shape，并至少一个有质量
STATIC 类型物体常用于地面、墙体等不可动物体
每帧调用 step() 推进物理，并同步位置
碰撞响应是 Cannon.js 的核心机制之一

下一节：监听碰撞事件与获取碰撞信息

01 - Cannon.js 引擎的用途和基本使用

Wed, 23 Jul 2025 16:18:30 GMT

01 - Cannon.js 引擎的用途和基本使用

作者: 前端AC | 原文: https://juejin.cn/post/7530106154313400330

01 - Cannon.js 引擎的用途和基本使用

前言

朱波想做游戏，前来学习这个cannon物理引擎，太好用了。

Cannon.js 是什么？

Cannon.js 是一个轻量级的 JavaScript 物理引擎，适用于 Web 应用和游戏开发。它专注于刚体物理模拟，能高效地处理物体间的碰撞、力学反应、摩擦等物理效果。

适用于 Three.js 等 WebGL 引擎配合使用，增强场景的真实物理行为。

Cannon.js 的用途

游戏开发中的物理碰撞检测与响应
Web3D 场景中的物体重力、摩擦模拟
拖拽物体、堆叠、刚体运动模拟
教育和科学可视化中的物理实验

安装 Cannon.js

推荐使用 cannon-es（是 Cannon.js 的现代 ES module 重构版，维护活跃）

npm install cannon-es

如果你使用 Vue3 + Vite，安装完成后就可以像普通模块一样导入：

import * as CANNON from 'cannon-es'

Vue3 示例：球体因重力下落

我们来展示一个最简物理模拟示例：

一个球体在空中受到重力影响下落
不设置地面，不发生碰撞，仅用于演示重力作用

<script setup>
// 引入必要模块
import { onMounted, ref } from 'vue'
import * as THREE from 'three'
import * as CANNON from 'cannon-es'

// 创建 canvas 引用
const canvasRef = ref()

onMounted(() => {
  // 初始化 Three.js 场景
  const scene = new THREE.Scene()

  // 创建相机并设置位置
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  camera.position.set(0, 5, 15)

  // 创建渲染器并绑定 canvas
  const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.value })
  renderer.setSize(window.innerWidth, window.innerHeight)

  // 创建球体的几何体和材质，并生成 mesh
  const sphereGeometry = new THREE.SphereGeometry(1)
  const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0x0077ff })
  const sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial)
  scene.add(sphereMesh)

  // 添加半球光照，增强视觉效果
  const light = new THREE.HemisphereLight(0xffffff, 0x444444, 1.2)
  light.position.set(0, 20, 0)
  scene.add(light)

  // 初始化 Cannon.js 世界
  const world = new CANNON.World()
  world.gravity.set(0, -9.82, 0) // 设置重力加速度，单位 m/s²

  // 创建一个球体刚体，初始位置在 y=10
  const ballBody = new CANNON.Body({
    mass: 1, // 质量为 1，表示会受到重力影响
    shape: new CANNON.Sphere(1), // 与 Three.js 中的球体对应
    position: new CANNON.Vec3(0, 10, 0),
  })
  world.addBody(ballBody)

  // 创建时间步长与时钟
  const clock = new THREE.Clock()
  const step = 1 / 60

  // 动画更新函数
  function animate() {
    requestAnimationFrame(animate) // 循环调用动画帧

    const delta = clock.getDelta() // 获取自上一帧的时间差
    world.step(step, delta) // 推进物理世界一步

    // 同步物理刚体位置到 Three.js mesh
    sphereMesh.position.copy(ballBody.position)

    // 渲染场景
    renderer.render(scene, camera)
  }

  animate() // 启动动画循环
})
</script>

<template>
  <!-- 渲染用 canvas 元素 -->
  <canvas ref="canvasRef"></canvas>
</template>

2025-07-23T10_15_23.407Z-25720.gif

部分代码解释：

参数	含义	示例值	解释
`75`	视野角度（FOV）	`75`	像人眼视角那样，角度越大视野越广，但会有畸变
`window.innerWidth / window.innerHeight`	长宽比	比如 `16:9`	防止画面拉伸或压缩，使用窗口的实际比例
`0.1`	近裁剪面	`0.1` 米	相机能“看到”的最近距离，太小会有深度精度问题
`1000`	远裁剪面	`1000` 米	相机能“看到”的最远距离，超过这个距离的物体不会被渲染

行号	代码	解释
`const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.value });`	创建一个 WebGL 渲染器（Renderer）实例，并将其渲染目标绑定到 Vue 模板中的 `<canvas>` 元素上。这样，Three.js 渲染结果会直接显示在页面上的这个 canvas 中。
`renderer.setSize(window.innerWidth, window.innerHeight);`	设置渲染器的宽度和高度为浏览器窗口的尺寸，使画布充满整个屏幕，避免图像变形或只显示一部分。

小结

Cannon.js 用于模拟真实物理行为：重力、碰撞、摩擦等
推荐使用 cannon-es 模块，结合 Vue3 和 Three.js 渲染效果
该示例展示了最基本的重力作用：球体自然下落

一款减轻前端图片命名工作量的图片转换器

Wed, 09 Jul 2025 01:39:19 GMT

一款减轻前端图片命名工作量的图片转换器

作者: 前端AC | 原文: https://juejin.cn/post/7524608157575200787

在这个图片格式百花齐放的时代，你是否也遇到过这样的困扰：手机拍的HEIC格式照片无法在网页上显示？PNG图片太大影响网站加载速度？想要批量转换图片格式却找不到合适的工具？今天，我将分享如何用纯前端技术打造一款功能强大、用户友好的图片格式转换器。

项目背景与需求分析

痛点分析

在日常工作和生活中，我们经常需要处理各种格式的图片：

兼容性问题：不同平台对图片格式的支持不同
文件大小：PNG图片质量高但体积大，JPG压缩率高但不支持透明
批量处理：需要转换大量图片时，逐个处理效率低下
隐私安全：在线转换工具需要上传图片，存在隐私泄露风险
移动端体验：手机上使用图片转换工具体验普遍较差
手动命名多个图片：前端开发痛点，多个图片的命名增加命名工作量

解决方案

基于以上痛点，我决定开发一款：

✅ 纯前端处理的图片转换工具，保护用户隐私
✅ 支持批量转换，提高工作效率
✅ 移动端优化，特别是微信等内置浏览器
✅ 现代化UI设计，提供优秀的用户体验

技术选型与架构设计

为什么选择纯前端方案？

隐私保护：图片不离开用户设备，完全本地处理
无服务器成本：不需要后端服务器，降低维护成本
响应速度快：无需网络传输，处理速度更快
部署简单：静态文件，可部署到任何Web服务器

核心技术栈

// 主要使用的Web API
const techStack = {
    '图片处理': 'Canvas API + File API',
    '文件操作': 'Blob API + URL API',
    '移动端优化': 'Web Share API + Clipboard API',
    '用户体验': 'CSS3 Animation + Intersection Observer',
    '兼容性处理': 'Feature Detection + Polyfills'
};

架构设计

采用单一职责原则设计的类结构：

class ImageConverter {
    // 核心功能模块
    constructor()           // 初始化配置
    handleFiles()          // 文件处理模块
    convertImages()        // 图片转换引擎
    
    // 下载模块
    downloadSingle()       // 单文件下载
    downloadAll()          // 批量下载
    mobileDownload()       // 移动端下载优化
    
    // 用户体验模块
    showNotification()     // 通知系统
    createProgressBar()    // 进度显示
    animateSection()       // 动画效果
    
    // 环境检测模块
    isWeChatBrowser()      // 微信环境检测
    isMobileDevice()       // 移动设备检测
    checkBrowserEnvironment() // 智能环境适配
}

核心功能实现详解

1. 图片格式转换引擎

图片转换的核心是利用Canvas API：

convertImage(file, format, quality) {
    return new Promise((resolve, reject) => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        
        img.onload = () => {
            canvas.width = img.width;
            canvas.height = img.height;
            
            //  关键优化：JPG格式添加白色背景
            if (format === 'jpeg') {
                ctx.fillStyle = '#FFFFFF';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
            }
            
            ctx.drawImage(img, 0, 0);
            
            //  转换为目标格式
            canvas.toBlob((blob) => {
                blob ? resolve(blob) : reject(new Error('转换失败'));
            }, `image/${format}`, quality);
        };
        
        img.src = URL.createObjectURL(file);
    });
}

技术亮点：

自动处理透明背景（PNG→JPG时添加白色背景）
支持质量调节（0.1-1.0）
异步处理，不阻塞UI线程

2. 移动端下载优化

移动端下载是最大的技术挑战，特别是微信等内置浏览器：

async mobileDownload(blob, fileName, url) {
    //  智能环境检测
    if (this.isInAppBrowser()) {
        return this.handleInAppBrowserDownload(blob, fileName, url);
    }
    
    //  尝试现代Web Share API
    if (navigator.share && navigator.canShare) {
        const file = new File([blob], fileName, { type: blob.type });
        if (navigator.canShare({ files: [file] })) {
            await navigator.share({
                files: [file],
                title: '保存转换后的图片'
            });
            return;
        }
    }
    
    //  降级方案：传统下载
    this.fallbackDownload(blob, fileName, url);
}

创新点：

多层级降级策略
环境自适应处理
用户体验优先

3. 微信专属优化

针对微信环境的特殊处理：

tryWeChatDirectSave(blob, fileName, url) {
    //  创建微信专用保存界面
    const modal = this.createWeChatSaveModal();
    
    //  转换为Base64便于微信处理
    const reader = new FileReader();
    reader.onload = (e) => {
        const base64Data = e.target.result;
        
        // ️ 显示可长按保存的图片
        modal.querySelector('img').src = base64Data;
        
        //  添加长按反馈
        this.addTouchFeedback(modal.querySelector('img'));
    };
    
    reader.readAsDataURL(blob);
}

用户体验优化：

专门的微信保存界面
详细的操作指导
多种保存方案
触觉反馈支持

UI/UX设计亮点

1. 现代化视觉设计

/*  渐变背景 + 毛玻璃效果 */
body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-attachment: fixed;
}

.container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);  /* 毛玻璃效果 */
    border-radius: 25px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/*  动态光效 */
.container::before {
    content: '';
    background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
}

2. 交互动画设计

/*  上传区域悬停效果 */
.upload-area:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.2);
}

/*  移动端触摸反馈 */
.upload-area:active {
    transform: scale(0.98);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/*  拖拽动画 */
.upload-area.dragover {
    animation: pulse 1s ease-in-out infinite alternate;
}

3. 响应式布局

/*  移动端优化 */
@media (max-width: 768px) {
    .container {
        margin: 10px;
        border-radius: 15px;
    }
    
    /*  触摸目标优化 */
    .convert-btn {
        min-height: 56px;  /* 符合移动端最小触摸目标 */
        -webkit-tap-highlight-color: transparent;
    }
    
    /*  防止页面缩放 */
    * {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
    }
}

技术难点与解决方案

1. 内存管理

问题：大量图片处理可能导致内存泄漏

解决方案：

// 及时释放Blob URL
setTimeout(() => {
    URL.revokeObjectURL(url);
}, 1000);

// 清理Canvas引用
canvas.width = canvas.height = 0;
canvas = null;

2. 移动端兼容性

问题：不同移动浏览器对下载的支持差异很大

解决方案：

// 多层级降级策略
const downloadStrategies = [
    'webShareAPI',      // 现代浏览器
    'directDownload',   // 传统下载
    'dataURLDownload',  // Data URL方案
    'iframeDownload',   // iframe方案
    'saveModal'         // 最终方案：显示保存界面
];

3. 文件格式检测

问题：仅依靠文件扩展名不够可靠

解决方案：

// 多重验证
const isValidImage = (file) => {
    // 1. MIME类型检查
    if (!file.type.startsWith('image/')) return false;
    
    // 2. 文件头检查（可选）
    return new Promise((resolve) => {
        const reader = new FileReader();
        reader.onload = (e) => {
            const arr = new Uint8Array(e.target.result).subarray(0, 4);
            const header = Array.from(arr).map(b => b.toString(16)).join('');
            // 检查常见图片格式的文件头
            resolve(this.isImageHeader(header));
        };
        reader.readAsArrayBuffer(file.slice(0, 4));
    });
};

性能优化策略

1. 异步处理

//  使用Web Workers处理大图片（可扩展）
const processLargeImage = async (file) => {
    if (file.size > 10 * 1024 * 1024) { // 10MB以上
        return new Promise((resolve) => {
            const worker = new Worker('image-processor.js');
            worker.postMessage({ file, options });
            worker.onmessage = (e) => resolve(e.data);
        });
    }
    return this.convertImage(file);
};

2. 批量处理优化

//  分批处理，避免浏览器卡顿
const batchProcess = async (files, batchSize = 5) => {
    const results = [];
    for (let i = 0; i < files.length; i += batchSize) {
        const batch = files.slice(i, i + batchSize);
        const batchResults = await Promise.all(
            batch.map(file => this.convertImage(file))
        );
        results.push(...batchResults);
        
        // 更新进度
        this.updateProgress((i + batchSize) / files.length * 100);
        
        // 让出主线程
        await new Promise(resolve => setTimeout(resolve, 10));
    }
    return results;
};

跨平台兼容性处理

浏览器特性检测

const featureDetection = {
    // 检测Canvas支持
    canvas: (() => {
        const canvas = document.createElement('canvas');
        return !!(canvas.getContext && canvas.getContext('2d'));
    })(),
    
    // 检测File API支持
    fileAPI: !!(window.File && window.FileReader && window.FileList),
    
    // 检测Web Share API
    webShare: !!(navigator.share && navigator.canShare),
    
    // 检测Clipboard API
    clipboard: !!(navigator.clipboard && navigator.clipboard.write)
};

优雅降级

//  功能降级处理
if (!featureDetection.webShare) {
    // 使用传统下载方式
    this.fallbackDownload();
}

if (!featureDetection.clipboard) {
    // 隐藏复制功能按钮
    document.querySelector('.copy-btn').style.display = 'none';
}

移动端体验优化

1. 触摸交互优化

//  防止双击缩放
document.addEventListener('touchstart', (e) => {
    if (e.touches.length > 1) {
        e.preventDefault();
    }
}, { passive: false });

//  触摸反馈
const addTouchFeedback = (element) => {
    element.addEventListener('touchstart', () => {
        element.style.transform = 'scale(0.95)';
        navigator.vibrate && navigator.vibrate(50);
    });
    
    element.addEventListener('touchend', () => {
        element.style.transform = 'scale(1)';
    });
};

2. 视口优化

<!--  完美的移动端视口设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

安全性考虑

1. 客户端安全

//  文件类型严格验证
const validateFile = (file) => {
    const allowedTypes = ['image/png', 'image/jpeg', 'image/webp', 'image/bmp', 'image/gif'];
    const maxSize = 50 * 1024 * 1024; // 50MB
    
    if (!allowedTypes.includes(file.type)) {
        throw new Error('不支持的文件类型');
    }
    
    if (file.size > maxSize) {
        throw new Error('文件大小超出限制');
    }
    
    return true;
};

//  防止XSS攻击
const sanitizeFileName = (fileName) => {
    return fileName.replace(/[<>:"/\\|?*]/g, '_');
};

2. 隐私保护

✅ 本地处理：图片不上传到服务器
✅ 无数据收集：不收集用户任何信息
✅ 内存清理：及时释放图片数据
✅ HTTPS部署：建议使用HTTPS协议

部署与优化

1. 构建优化

//  资源压缩配置
const buildConfig = {
    minifyCSS: true,
    minifyJS: true,
    optimizeImages: false, // 避免影响转换质量
    gzip: true,
    cacheControl: {
        static: '1y',
        html: '1h'
    }
};

2. CDN部署

<!--  CDN加速 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="//cdn.jsdelivr.net">

<!--  PWA支持 -->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#667eea">

源码：Gitee仓库

图片格式转换器

总结：一个双非大学生的两年，是怎么过来的？

Thu, 03 Jul 2025 07:31:44 GMT

总结：一个双非大学生的两年，是怎么过来的？

作者: 前端AC | 原文: https://juejin.cn/post/7522418729440739370

前言

主包高考失利，来到一所双非读大数据，现大二的暑假，想总结一下这两年的大学经历，也是写下我这两年的前端学习经历吧。

初始前端

在进校园之前，我也是从我助班口中得知，学校有实验室，分为前后端嵌入式人工智能，我对计算机也是比较感兴趣，由于我助班学的也是前端，我也就开启的我的前端校园生活~刚开始也是学着入门口中熟知的前端三件套：Html+css+js，刚开始学前端我，也是保留着高中的记笔记习惯，笑死，也是开始背代码（现在真想抽死自己），还有拿本子记那些th，tr，表格表单这些，在图书馆抄代码，背代码，完全没有去自己手打，以为自己看完，抄下来，代码就是自己的了，可惜现实也是残酷，在实验室笔试的时候，也是有很多记不起来，依稀记得我不会的一个ui列表怎么去除前面的点，当时傻乎乎的写了一个display：none，笑死了。不过也是凭借主播的背诵技巧，也是拿到的笔试的第二，也是顺利的进入了二面，然后也是度过了大一的上半年，发现我大一的上半年，都是图书馆-教室-宿舍三点一线，发现出去玩的机会只有期末考完的一次，真想骂当时的自己怎么不多去走走玩玩，非要死卷绩点干什么。

小试前端

大一下的我，也是开始接触到vue框架，刚开始看的也是尚硅谷的vue视频，看完也是以为自己会了，项目也没去练，就敢敢的接下老师的一个小项目，结果师兄分配了一个搜索框的功能，我也能写两个星期，最后还是师兄远程帮我改的代码，那个时候开始，我发现我要自己手打代码，边看边理解，而不是纯看。后面参加了一个学校的比赛，从那次比赛开始，我也是亲自知道前端的魅力，是做一个大数据可视化，可视化这种是比较炫酷的，当时也是经过两个星期的努力学习，问ai，问师兄，也是不慌不忙的如期完成，拿到了二等奖，从这时候开始，我领悟到了代码是如何运作，一个框架是怎么搭的，也算一次成长，所以我想告诉师弟师妹们，不要等准备好了再去做，要边做边完善，中国人就是一直在等，等我学完，等我干嘛干嘛的，一直不敢去尝试，要一直试错，以后遇见一模一样的bug才会更高效的解决。正如我刚开始会的一个bug，就是按照package包的问题，当时npm i 也会报错，才发现忘记进入文件夹，忘记删除modules缓存，忘记删除package-lock.json…现在遇到一样的问题立马知道怎么解决了。后面也是实验室二面拿下面试A+第一的成绩，顺利进入实验室学习啦。但是，经过一学期的相处，老师开始分配项目，可惜遇到了一个人品不好的后端，写到后面代码删库跑路，也是个人才，朱波的被迫去学node，MySQL自己搭建了一个小的后台服务，后面也是开始在b站刷到了小王老师的视频，跟着练起来，进群讨论，也是认识了一些好网友。朱波的大一暑假生活前端暂缓一步。

新手前端

大二开学，就被老师叫去重构一个项目，也算是一个学校的机会，给一个乡村做一个宣传网站，当时我还是笨蛋，ai也没有那么发达，不过我脑子还是灵活，脑子也是开始想着怎么布局，用什么技术，当时就使用了vue+three+echarts+饿了么-ui来做，最后也是花了一个月搞定了，看起来还不错，不过当时还是一个新手，还没怎么做过前后端的项目，都是纯前端，所以我渴望有一个后端能给我接口，www。后面发现在这个实验室没有得到鉴赏，立马跳槽去别的老师的实验室当leadership，把我从这个实验室师兄教的知识，运用到我的团队中去，然后大二的上学期也是一个学习的阶段，然后学期末也是一如既往的写简历，当时好像是2.0版本，大一一个版本，说到简历，大一傻傻的把部门也加进去，然后去boss投，发现也是没人理，偶尔会有几个笔试刷kpi，面试几乎是0的，当时也是不懂，傻的一批。后面去请教了师兄们，也是修修补补了，写了三个项目进去，在大二寒假的一次偶然，约到了人生的第一场面试。

处女面

面试约在四天后，当时也是既紧张又兴奋又害怕，兴奋是终于有人约我，害怕是我技术不牢，大多是问ai的，在跟老师沟通了之后，也是决定试一试，反正也是当锻炼了，然后就开启了我的面试之路： 1-csdn搜面经 2-搜vue3vue2的知识，比如常问的八股文：生命周期，组件通信，响应式原理，vue2Vu3对比… 3-牛客搜面经 4-默写，背诵 5-搜自我介绍怎么说 6-搜怎么反问面试官：薪资，公司业务，多久入职等做了这些准备之后，也是出发，开始的时候，也没告诉我要笔试啊，当时给我整懵逼了，结果笔试结果也是不好，依稀记得有什么扁平化，性能优化，算法题等等，好像也是结果不乐观，基本很难做得出来，然后也是开始面试了，也是问的一些vue的八股，但是还是回答的不好，最后结果也是毫无音讯被刷kpi了哈哈，不过经过这一次之后，我也不在畏惧面试了，也知道面试的具体流程是什么样了。虽然没进，但是也是学到东西了哈哈，不过朱波也是重新努力，继续深耕。

一点突破

在大二下，我着急的跟导师要项目，为的就是大二暑期能够攒够项目去实习，所以导师也是分配了一个水产养殖相关的科普项目给我，我也是委以重任，担任着产品经理、UI、前端、算法的职位，我也是学习着公司的项目流程，从选用技术栈，分析项目需求，设计原型图，前后端接口文档，开发项目，服务器部署这一流程来，我很认真的对待这一次项目，所以我很认真的配置环境，配置路由，使用flex布局先布置好页面，但是最后漏了一个严重的错误，没有大屏适配，使用的px写死的位置，这个是我犯的一个大错。后续也是写好页面，自己训练YOLO模型，使用flask框架配置好api然后前端调用，后端那边接口也是正常使用，最后也是大功告成啦，后面也是拿这个项目打了很多比赛，也是获得很多奖项。在4月份初，我又学习如何写简历，把简历完善到6.0版本，也是开始继续我的投简历生涯，在四月份，我陆续收到了三家公司的面试，在第一家是在越秀，当时是我的第二次面试，也是有点小紧张，但是朱波也是准备了差不多80%，但是居然有一些居然忘记了，真的可恶啊，不过我也不喜欢这个公司（在旁边听到老板pua员工哈哈）不过面试官也是好好给我回答，我也是记起来最后自己总结成面经发在自己博客了。在第三家呢？由于有前两次面试的准备，我大概知道了小公司的面试套路，在面试过程中也是越来越自信了，后面也是面试官问到了我如何到岗，通勤时间，具体业务什么的，我就知道第三次稳了！不过在第三次结果出来之前，过两天我又去面试了一家教育公司，也是我现在正在实习的公司，面试官看到我的简历，没问什么八股，就是看到我的技术栈（three，动画）刚好符合他们公司的业务需求，然后我的成绩也是第一，奖项也很多，所以面试官问我要什么好问他的，我也是从公司业务，公司项目运行流程，技术栈问起…也是正常流程吧，后面就是两个hr来为问我的薪资要求，我肯定是越多越好啊，还问我会不会觉得他们公司的技术太普通了会不会接受不了哈哈，后面也是问了到岗时间等等，也是很愉快一次，毕竟一周至少到岗三天，对于一个大二有课的算是接纳了。最后也是拿到了第三家第四家的offer，最后结合通勤这个方面，我选择了第四家哈哈，毕竟第三家一周五天。

第一次实习体验

人嘛，只有在入职和离职的时候是最开心的，所以在入职的前几天，也是熟悉一下公司代码，还有认识一下组长还有周围的同事，业务其实还好，不难，熟悉代码之后很快就能完成，公司也有免费午餐（食堂），也是不错的，其他三个实习生也是211的，第一天也是给我上院校压力了，就我一个双非，我也不好意思逼逼哈哈，只能默默工作然后摸鱼摸鱼。上班了才发现，厕所真的是摸鱼的好地方啊，只要进了公司一步，阳气就被吸光了一样，虽然一天没干什么累活，就是很累哈哈，每次下班头都很晕。实习了两个月之后，发现实习其实也一般哈哈，没那么可怕。所以说，只有自己经历过了，后面发现这些其实都是小事，人，过的开心就好。

总结

现在也是大二暑假了，也是在考虑大三是否考研，还是冲击大厂，不过最近投了大厂，也没约到机会，所以我也在学react，发现react不习惯哈哈，感觉还是vue好，不过没办法，还是要硬着头皮学下去，争取把项目完成。我的两年大学生活，好像就是这样子，时常感叹大学好累不如高中，但是看到自己获得荣誉之后，好像也是值得的，所以，加油吧孩子。做你自己！

Webpack模板热更新实现

Fri, 20 Jun 2025 00:20:19 GMT

Webpack模板热更新实现

作者: 前端AC | 原文: https://juejin.cn/post/7517474788174348325

概述

本文档详细介绍了为生成工具项目实现模板热更新功能的完整过程，包括技术选型、实现思路、遇到的问题及解决方案。

1. 项目背景分析

1.1 项目结构

Platform-Web-ExercisesGenerator/
├── app/
│   ├── exercisesgenerator/     # 主应用（Vue.js）
│   └── template/               # 模板源码（ES6）
│       ├── templateFun/        # 模板实现文件
│       ├── common/            # 公共组件
│       └── utils/             # 工具函数
├── public/template/           # 构建后的模板文件
└── script/                    # 构建脚本

1.2 现有构建流程

原有的模板构建需要手动执行：

yarn generateFile    # 生成模板列表缓存
yarn build:template  # 构建模板

2. 技术选型

2.1 核心依赖

chokidar - 文件监听库

"chokidar": "^3.5.3"

选择理由：

跨平台兼容性好（Windows/macOS/Linux）
性能优秀，支持大量文件监听
API 简洁，配置灵活
支持忽略模式，避免监听不必要的文件

chalk - 终端彩色输出

const chalk = require('chalk');
console.log(chalk.green('✅ 构建成功'));
console.log(chalk.red('❌ 构建失败'));

child_process - 子进程管理

const { spawn } = require('child_process');

2.2 技术架构

文件变化 → chokidar监听 → 防抖处理 → 两阶段构建 → 结果反馈

3. 实现过程详解

3.1 创建监听脚本

文件位置

script/bin/watch-template.js

核心实现

const chokidar = require('chokidar');
const { spawn } = require('child_process');
const path = require('path');
const chalk = require('chalk');

// 监听目录配置
const watchDir = path.resolve(__dirname, '../../app/template');
const DEBOUNCE_DELAY = 1000; // 防抖延迟

// 状态管理
let buildTimeout = null;
let isBuilding = false;

3.2 防抖机制实现

为什么需要防抖？

避免频繁触发构建（如保存时可能触发多次文件变化事件）
提升性能，减少不必要的构建
提供更好的用户体验

function debouncedBuild() {
  if (buildTimeout) {
    clearTimeout(buildTimeout);
  }
  
  buildTimeout = setTimeout(() => {
    buildTemplate();
  }, DEBOUNCE_DELAY);
}

3.3 文件监听配置

const watcher = chokidar.watch(watchDir, {
  ignored: [
    '**/node_modules/**',
    '**/.git/**',
    '**/dist/**',
    '**/build/**',
    '**/.cache/**',
    '**/templateFun/**' // 排除构建产物
  ],
  persistent: true,
  ignoreInitial: true
});

配置说明：

ignored: 排除不需要监听的目录
persistent: 保持监听进程运行
ignoreInitial: 忽略初始扫描，只监听后续变化

3.4 两阶段构建实现

问题发现： 直接执行 yarn build:template 会因为缺少缓存文件而失败。

解决方案： 实现两阶段构建流程：

function buildTemplate() {
  // 第一阶段：生成缓存文件
  const generateProcess = spawn('yarn', ['generateFile'], {
    cwd: path.resolve(__dirname, '../..'),
    stdio: 'pipe',
    shell: true
  });

  generateProcess.on('close', (code) => {
    if (code !== 0) {
      console.log(chalk.red(`❌ 生成文件失败! 退出码: ${code}`));
      return;
    }
    
    // 第二阶段：构建模板
    const buildProcess = spawn('yarn', ['build:template'], {
      cwd: path.resolve(__dirname, '../..'),
      stdio: 'inherit',
      shell: true
    });
    
    // 处理构建结果...
  });
}

4. 遇到的问题及解决方案

4.1 工作目录路径错误

问题现象：

npm ERR! enoent ENOENT: no such file or directory, open 'E:\ACwork\Allcode\package.json'

原因分析： 脚本位于 script/bin/ 目录，使用 ../../../ 会指向错误的父目录。

解决方案：

// 错误的路径
cwd: path.resolve(__dirname, '../../..')

// 正确的路径
cwd: path.resolve(__dirname, '../..')

4.2 模板列表缓存文件缺失

问题现象：

Error: Cannot resolve module '../../app/template/.cache/templateList'

原因分析： webpack 配置依赖 templateList.js 文件，但该文件需要通过 generateFile 命令生成。

解决方案： 在构建前自动执行文件生成：

// 先生成缓存文件
spawn('yarn', ['generateFile'])
// 再执行模板构建
spawn('yarn', ['build:template'])

4.3 npm vs yarn 命令兼容性

问题： 初始使用 npm run build:template，在某些环境下可能出现兼容性问题。

解决： 统一使用项目配置的包管理器 yarn：

spawn('yarn', ['build:template'])

5. 核心技术要点

5.1 子进程管理

const buildProcess = spawn('yarn', ['build:template'], {
  cwd: path.resolve(__dirname, '../..'),  // 工作目录
  stdio: 'inherit',                       // 继承父进程的输入输出
  shell: true                             // 使用系统shell
});

参数说明：

cwd: 指定命令执行的工作目录
stdio: 控制子进程的输入输出流
shell: 在shell中执行命令（Windows兼容性）

5.2 事件监听模式

watcher
  .on('change', (filePath) => {
    console.log(chalk.yellow(` 文件已修改: ${path.relative(watchDir, filePath)}`));
    debouncedBuild();
  })
  .on('add', (filePath) => {
    console.log(chalk.green(`➕ 文件已添加: ${path.relative(watchDir, filePath)}`));
    debouncedBuild();
  })
  .on('unlink', (filePath) => {
    console.log(chalk.red(`️ 文件已删除: ${path.relative(watchDir, filePath)}`));
    debouncedBuild();
  });

5.3 优雅退出处理

process.on('SIGINT', () => {
  console.log(chalk.cyan('\n 正在关闭文件监听...'));
  watcher.close().then(() => {
    console.log(chalk.cyan('✅ 文件监听已关闭'));
    process.exit(0);
  });
});

6. 配置文件修改

6.1 package.json 脚本添加

{
  "scripts": {
    "watch:template": "node script/bin/watch-template.js"
  },
  "devDependencies": {
    "chokidar": "^3.5.3"
  }
}

6.2 使用说明文档

创建了详细的使用说明文档 TEMPLATE_HOT_RELOAD.md，包含：

功能介绍
安装步骤
使用方法
故障排除
开发建议

7. 性能优化技巧

7.1 文件过滤策略

ignored: [
  '**/node_modules/**',    // 排除依赖包
  '**/.git/**',           // 排除版本控制
  '**/dist/**',           // 排除构建产物
  '**/build/**',          // 排除构建目录
  '**/.cache/**',         // 排除缓存文件
  '**/templateFun/**'     // 排除模板构建产物
]

7.2 并发控制

let isBuilding = false;

function buildTemplate() {
  if (isBuilding) {
    console.log(chalk.yellow('构建正在进行中，跳过本次构建...'));
    return;
  }
  isBuilding = true;
  // 构建逻辑...
}

7.3 输出优化

// 生成文件时使用 pipe 模式，减少输出干扰
stdio: 'pipe'

// 构建时使用 inherit 模式，显示详细进度
stdio: 'inherit'

8. 扩展建议

8.1 可配置化

// 可以添加配置文件支持
const config = {
  watchDir: './app/template',
  debounceDelay: 1000,
  ignored: ['**/node_modules/**'],
  buildCommand: 'yarn build:template'
};

8.2 增量构建

// 可以根据变化的文件类型决定构建策略
if (filePath.includes('templateFun/')) {
  // 只构建特定模板
} else {
  // 全量构建
}

8.3 通知集成

// 可以集成系统通知
const notifier = require('node-notifier');
notifier.notify({
  title: '模板构建',
  message: '构建完成！'
});

9. 总结

通过实现模板热更新功能，我们：

提升了开发效率：无需手动执行构建命令
改善了开发体验：实时反馈，彩色日志输出
增强了系统稳定性：完善的错误处理和状态管理
保证了构建可靠性：两阶段构建确保依赖完整

这个实现展示了如何使用 Node.js 生态系统中的工具来解决实际开发问题，是一个很好的工程化实践案例。