前言

最近有看到两个报告，调查、总结、2024年程序员的生存情况以及一些工作情况，国内国外都有。接下来摘抄部分数据看看是否与我们的实际相符。

1. 程序员的年龄分段

先看国内的数据：

可以看出，2630岁之间的程序员占比是最多的，1835岁之间占比将近80%。
18~25岁，包含在校学生和刚毕业三年内的学生，按现在考研的趋势，这部分占比会逐渐变低。
35岁以上占比接近19%，说明还是有不少大龄程序员。

再看国外的数据：

2124岁、2529岁占比是并列第一，18~35岁之间占比将近70%。
35岁以上占比30%，说明国外程序员"老龄化"更严重。

看国家之间的对比：

18~29岁程序员分布的国家。

论哪里拥有最多的年轻程序员？还得是神秘的东方大国，人口大国、文明古国---印度。怪不得印度程序员在美国混得很开，毕竟每年都有大量的年轻程序员。
中国在中东、非洲、中亚之后。
看样子美国有不少大龄程序员。

2. 程序员的工作年限

先看国内的数据：

工作13年是最多的，其次是310年。
而10年以上的就比较少，这个时间大都32岁以上了，中途有不少人主动、被动转行。

再看国外的数据：

拥有3~5年的工作经历占比最多，10年以上的工作经历占比接近30%，这比国内的高。

3. 程序员的薪资水平

先看国内水平：

大部分月收入是在10k20k之间，换算成年收入在12w24w之间。
这和地域有关系，比如一个程序员在一线城市北上深薪资20k，那么到二线城市如杭州、成都、武汉可能会打七折，如果再到长沙、西安等估计还会更低。

再看国外水平（收入中位数）：

此处显示的是年薪，可以看到美国程序员的收入遥遥领先。
按照汇率计算：

美国程序员收入中位数是百万年薪（人民币)。
而中国是22万人民币，此处的差距还是比较大，同志仍需努力。

4. 哪个年龄段最卷？

通过上述数据，可以看出，35岁以下程序员群体最庞大，工作十年以内人数最多，工资10k~20k人最多，这也符合我们平时职场的感知。

22~25岁，刚毕业几年，正是学习知识，刷小怪升级的时候，按理来说应该会在下班时间蹭公司的免费空调自我学习提升。然而，经过实际观察，目前这个年龄段是00后占据主体，大部分是到点下班。
访谈得知原因如下：

1. 大学四年大部分在上网课，天天对着电脑，现在工作还是对着电脑，顶不住，下班就直接溜。


2. 我加班能得到什么？就这点钱只能买我8小时。


3. 老员工都是既得利益者，是公司的"精神股东"，我们就是喽啰，不做额外奉献。

25~30岁，已经在职场中历练了不少年，写的bug、产生的线上事故、输出的复盘文档、与其它部门撕逼等等统统都有经验了，理论上来应该不怎么卷，而实际上最卷的反而是这段年龄的。
总结原因如下：

1. 实战经验积累了不少，成为技术骨干，需要调研、学习的东西更多了；平时开会撕逼、晚上怒写业务、周末学习新知识提升自我，花费的时间比较多。


2. 这个年龄段处在恋爱、结婚的思考期，没有家庭、小孩的牵挂，留给自己的时间更多。


3. 有些还独挡一面当了leader，比如前端小组长，还想再往上踮踮脚，够一下，博一下，卷的主观能动性比较强。

30~35岁，职场老油条，见多识广，动态卷，就是比较能苟。
交流总结如下：

1. 家庭牵扯了不少精力，还好靠经验能弥补一些亏空。


2. 发展的天花板已经看到，就是摸不着，不相信什么大器晚成，看不到太多希望，做好自己分内事就好。


3. 每年的体检总是新增各项小毛病，更加关注自己的身体健康。


4. 懂得职场潜规则，该加班配合的演出还是不能视而不见。

35~45岁，这个年龄段出任CEO、赢取白富美的凤毛麟角，要么上升，要么转行，留下来继续编码的反而是最看开的一群人，因为身体/精神原因，没实力卷，实在卷不动。
访谈如下：

1. 我在外包挺好的，再干个几年存够社保和养老金就退休。


2. 不争不吵，你说的都对，按你的来。


3. 组内都是年少有为的人啊，天赋高又刻苦，公司的发展靠你们了，我的养老也靠你们了。


4. 最近又发现了个野钓的地方，不容易空军，周末赶早去来一杆。

45岁以上，职场除了高管，没见过这个年龄段的一线码农。
按现在发展，也许多年后，我会看见这样的自己。

引言

🤡 年初立过的Flag中包含一条：开发开源个人效率APP——惜命，这都半年过去了，搞得怎么样啦~

🤣 em... 有在做的啦~

就是进度有点慢，搞了这么久，还TM在 搞天气的模块，em... 光UI都改几次了，第二版UI：

第三版UI：

归根结底还是一个字 "乱+完美主义"，对自己想要的目标非常模糊，以往都是 产品经理捋清交互出原型，设计师出设计稿，我照葫芦画瓢写界面就好了。🐶 而现在这两个都要我自己来做，产品功能还好，我自己梳理清楚逻辑就行，但 UI设计 这块，我是真的一窍不通，完全无从下手。🤡 上面两个界面都是写提示词让 Cursor 直接写的页面，主打一个 随缘，但也带来了问题：页面风格的不一致，上一个页面是 Material 风格，下一个页面秒变 iOS 风格，🙃 让人有一种撕裂感。

🤔 一种解法是写一堆长篇大论的 rule 来严格限制 Cursor 生成的画面风格，另一种就是自己整 UI设计稿 (原型)，我选择了后者，学PS是不可能的🐶，周期太长了，搜了圈"简单UI设计工具"，很多人安利用 Figma，直接B站搜 "Figma速成"，选了这个快速看完：

《Figma新手教程2025｜30分钟高效掌握Figma基础操作与UI设计流程》

😄 照着Up主的视频走了一遍案例，工具操作确实不复杂，然后觉得自己强得可怕💪，新建惜命项目，然后对着空白页面，我又陷入了呆滞，TM该怎么开始 ？？？根本不知道要弄成什么样的页面...

🤡 归根结底：工具是"术"，设计理论是"道" ，关于道我一点 经验积累 都没有，这需要大量的看和模仿练习。自己画不出来，但是画得好不好看，我是能评判的，突然有一个想法：🤔 能不能让 AI 出 线框图，我再自己调整和细化？😳 Figma 是有AI功能的，但现在只有 付费用户 能用，白嫖教育版 没法耍咯：

😏 没法用官方的AI功能，但有 MCP Server 啊！官方有一个 Dev Mode MCP，试了下不太好用🤷‍♀️：

《Introducing our Dev Mode MCP server: Bringing Figma int0 your workflow》

《Guide to the Dev Mode MCP Server》

🐶 也可能不太符合我们的场景，直接在它的 插件商店 搜了下，发现这个：Cursor Talk To Figma MCP Plugin

👍 这插件还是开源的：

sonnylazuardi/cursor-talk-to-figma-mcp

插件效果视频：

😋 体验了一下，确实是我们想要的 嘴遁出Figma设计稿的MCP，接着详细介绍下怎么用~

安装

① Clone 项目到本地

git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git

顺手让 Cursor 生成一份 详细的项目结构说明文档：

😄 不难看出这个MCP主要由三部分组成：MCP服务、WebSocket通信、Figma插件，对具体实现感兴趣的童鞋，可以自行看下生成的文档：

《项目结构详细说明文档》

② 安装 Bun

安装完，重启下 PowerShell，键入 bun -v 查看版本号，确定是否安装成功：

③ 初始化项目

接着 cd 到项目的根目录，执行 bun setup 进行 初始化，🐶 理论上是这样，但 Windows 运行会直接报错，原因是系统 不支持直接运行.sh脚本文件：

🤡 解法就是：手动执行 setup.sh 脚本里的命令：

😶 其实就是创建下 .cursor/mcp.json文件 和 执行 bun install (😄 搞不定就问Cursor~)，安装完后：

④ 启动Websocket

键入 bun socket 启动 Websocket：

⑤ Cursor 配置 MCP

Chat Settings → MCP Tools →TalkToFigma (一般默认有的，没有自己就配下，很简单) → 启用

🤡 我这里启用完是红的 (正常是绿色的)，说明有问题：

试了下文档中提到的 windows wsl 要去掉这行的注释：

然后 Ctrl+C 停掉 WebSocket 服务，然后再执行 bun socket，依旧爆红... 🐶 折腾了一会儿发现，是 Cursor 终端没有更新 (装了Bun要重启)，重启下 Cursor 就好了：

⑥ 安装Figma桌面端 + 配置Figma 插件

点击用户头像，下拉找到 Get desktop app 进行下载安装：

打开桌面端，进入 要生成设计稿的Page，点击 Actions：

底下会有弹窗，依次点击：Plugins & widgets → Import from manifest..

然后按照下图中的路径选中 manifest.json 文件:

接着点击这个插件：

会弹窗，显示正在连接上面启动的 Websocket 服务 (如果失败的话，重启试试，在 Cursor 的终端直接执行 bun socket！)

这个 Channel ID 等下 Cursor 也要用到，终端也会输出：

Cursor 切 Agent 模式，输入提示词进行链接，示例：

• 使用channel: channel ID 连接服务和Figma进行对话


• Talk to Figma, channel [您的Channel ID]

连接后会有输出信息：

接着让它开始整设计稿，弄个 简单的登录页 看看效果，Cursor 疯狂输出：

另一边 Figma桌面端 也是热火朝天的堆砌UI：

最终输出结果：

🐶 左上角这个 表单区域 有点迷，还有登录按钮上那个 紫色半透明圆形，Shift + 鼠标 选中 这三组件：

Cursor 的回答：

完全不懂这什么设计...

接着让它删掉这三，移动下组件，添加一个同意隐私协议的组件：

最终效果：

🐂🍺，Cursor 通过这个 MCP，不止能读，还能操作设计稿 👍。另外，除了用 Cursor 外，其它支持 MCP 调用的工具也是可以用的，自己做下配置就好，如：Trae、Cursor，甚至是 Cherry Studio：

修改后的设计稿：

以上就是这个MCP的基本用法，🤔 感觉很适合初期，没什么灵感时，让它来搭建基本的主体框架，然后自己再此基础上做精细化的调整。一些常规命令示例：

• create_rectangle：创建一个新的矩形。


• create_ellipse：创建一个新的椭圆或圆形。


• create_text：创建一个新的文本元素。


• create_frame：创建一个新的框架。


• set_fill_color：设置节点的填充颜色。


• set_stroke_color：设置节点的描边颜色。


• move_node：移动节点到新位置。


• resize_node：调整节点大小。

• set_font_name：设置文本节点的字体名称和样式。


• set_font_size：设置文本节点的字体大小。


• set_font_weight：设置文本节点的字体粗细。


• set_letter_spacing：设置文本节点的字母间距。


• set_line_height：设置文本节点的行高。


• set_paragraph_spacing：设置文本节点的段落间距。

别人分享的提示词

💁‍♂️ 有 生成HTML页面 需求的童鞋，可以在提示词里让 Cursor 直接生成对应代码，这是别处的看到的提示词：

获取Profile的所有信息，并根据设计稿信息进行开发

- 使用HTML，Tailwindcss

- 苹果、google等大厂设计配色风格

- 生成的文件保存到`figma-demo`目录下

- 无法下载的图片可以使用`export_node_as_image`生成或者使用unsplash

😶 没这个需求，就不尝试了，生成代码也是耗费点数的，Cursor Pro 一个月才500点，根本不够花，能省一点是一点🤷‍♀️。还看到一个更全提示词，也CV下，真正需要用到的时候参考着改就好了：

你是一名大厂资深UI/UX设计专家，拥有丰富的移动端应用设计经验，精通苹果人机界面设计指南。请帮我完成一款名为`百草集`iOS App的原型设计。请按照以下要求输出一套完整的高质量Figma APP原型图：

1. 设计目标

- 创建符合苹果人机界面指南(Human Interface Guidelines)的iOS原生风格设计

- 面向中草药爱好者和自然探索者，设计简洁直观的界面

- 确保原型图能直观展示APP的功能流程和用户体验

2. 用户需求分析

- 目标用户群体：对中草药、植物学、自然疗法感兴趣的用户，包括初学者和爱好者

- 用户痛点：缺乏系统化的中草药知识、难以识别野外植物及其药用价值、无法记录和整理自己的植物观察

- 用户期望：直观的植物识别功能、个性化学习路径和推荐、社区互动和知识分享

3. 功能规划

- 主页：提供快速访问草本图鉴、观察记录和社区的入口

- 草本图鉴：分类别展示中草药，配有详细图文介绍和音频讲解

- 观察记录：记录用户在野外的植物观察，支持拍照识别和地理位置标记

- 配方推荐：基于用户兴趣推荐草本配方和使用方法

- 社区互动：分享观察、交流经验、获取专业指导

- 设置：个人信息管理、通知设置等

4. 设计规范

- 使用最新的iOS设计元素和交互模式

- 遵循iPhone 6尺寸规格(宽度750px, 高度1624px)

- 采用自然、清新的配色方案，符合草本主题氛围

- 重视无障碍设计，确保文字对比度和交互区域大小合适

- 使用简洁清晰的图标和插图风格，融入自然元素

5. 原型图呈现要求

- 使用Figma创建所有设计稿

- 为每个功能设计一个到两个屏幕，如：登录/注册、主页、草本图鉴、观察记录、配方推荐、社区互动、设置

- 每行最多排列三个屏幕，之后换行继续展示

- 为每个屏幕添加设备边框和阴影，不要遮住屏幕内的内容

- 为每个屏幕添加简短说明，解释其功能和设计考虑

6. 关键用户旅程原型屏幕

- 6.1 登录/注册屏幕

- 功能：用户可以通过邮箱、手机号或社交媒体账号登录/注册

- 设计考虑：使用简洁的表单设计，提供快速登录选项，符合iOS设计规范

- 6.2 主页屏幕

- 功能：展示主要功能入口，包括草本图鉴、观察记录、配方推荐和社区动态

- 设计考虑：采用卡片式布局，突出视觉重点，使用自然色调

- 6.3 草本图鉴屏幕

- 功能：分类展示中草药，支持搜索和筛选

- 设计考虑：使用网格布局，提供清晰的视觉层次，支持图片预览

- 6.4 植物详情屏幕

- 功能：展示植物的详细信息，包括图片、文字介绍、音频讲解

- 设计考虑：采用上下滑动的单页布局，提供丰富的多媒体内容

- 6.5 观察记录屏幕

- 功能：记录用户的植物观察，支持拍照识别和地理位置标记

- 设计考虑：使用时间线布局，提供直观的记录展示方式

- 6.6 配方推荐屏幕

- 功能：基于用户兴趣推荐草本配方，支持收藏和分享

- 设计考虑：采用卡片式布局，突出配方的视觉吸引力

- 6.7 社区互动屏幕

- 功能：用户可以发布动态、浏览社区内容、与其他用户互动

- 设计考虑：使用流式布局，支持点赞、评论等社交互动

- 6.8 设计规范概述

- 配色方案：主色调为自然绿色(#4CAF50)，辅助色为棕色(#795548)和黄色(#FFC107)

- 图标：采用简洁的线性图标风格，融入自然元素

- 无障碍设计：确保文字对比度符合WCAG 2.1标准，交互区域大小合适

- 动效：使用微妙的过渡动画，提升用户体验但不干扰主要功能

😄 设计效果看起还是挺不错的：

😏 Figma 免费版：适合个人或小型团队，支持无限文件存储，但只能创建3个项目，最多2人协作，版本历史仅保留30天，不能共享设计文件进行多人实时编辑，离线时无法使用。专业版：适合2人以上设计团队，取消项目和编辑者数量限制，版本历史无限，支持团队组件库、Slack集成、私人项目等高级协作功能，价格约12-16美元/月/人（年付较便宜），可按月或按年订阅。😄 限于篇幅，怎么 白嫖专业版 可以参见另外一篇文章~

前端开发者应该对 Ant Design 不陌生，特别是 React 开发者，antd 应该是组件库的标配了。

近年来随着 AI 的爆火，凡是想要接入 AI 的都想搞一套自己的 AI 交互界面。专注于 AI 场景组件库的开源项目倒不是很多见，近日 antd 宣布推出 Ant Design X 1.0 🚀 ，这是一个基于 Ant Design 的全新 AGI 组件库，使用 React 构建 AI 驱动的用户交互变得更简单了，它可以无缝集成 AI 聊天组件和 API 服务，简化 AI 界面的开发流程。

该项目已在 Github 开源，拥有 1.6K Star！

看了网友的评论，看来大家还是需要的！当前的 Ant Design X 只支持 React 项目，看来 Vue 开发者要羡慕了...

ant-design-x 特性

• 🌈 源自企业级 AI 产品的最佳实践：基于 RICH 交互范式，提供卓越的 AI 交互体验


• 🧩 灵活多样的原子组件：覆盖绝大部分 AI 对话场景，助力快速构建个性化 AI 交互页面


• ⚡ 开箱即用的模型对接能力：轻松对接符合 OpenAI 标准的模型推理服务


• 🔄 高效管理对话数据流：提供好用的数据流管理功能，让开发更高效


• 📦 丰富的样板间支持：提供多种模板，快速启动 LUI 应用开发


• 🛡 TypeScript 全覆盖：采用 TypeScript 开发，提供完整类型支持，提升开发体验与可靠性


• 🎨 深度主题定制能力：支持细粒度的样式调整，满足各种场景的个性化需求

支持组件

以下圈中的部分为 ant-design-x 支持的组件。可以看到主要都是基于 AI Chat 场景的组件设计。现在你可以基于这些组件自由组装搭建一个自己的 AI 界面。

ant-design-x 也提供了一个完整 AI Chat 的 Demo 演示，可以查看 Demo 的代码并直接使用。

更多组件详细内容可参考 组件文档

使用

以下命令安装 @ant-design/x 依赖。

注意，ant-design-x 是基于 Ant Design，因此还需要安装依赖 antd。

yarn add antd @ant-design/x

import React from 'react';

import {

  // 消息气泡

  Bubble,

  // 发送框

  Sender,

} from '@ant-design/x';



const messages = [

  {

    content: 'Hello, Ant Design X!',

    role: 'user',

  },

];

const App = () => (

  <div>

    <Bubble.List items={messages} />

    <Sender />

  </div>

);



export default App;

Ant Design X 前生 ProChat

不知道有没有小伙伴们使用过 ProChat，这个库后面的维护可能会有些不确定性，其维护者表示 “24 年下半年后就没有更多精力来维护这个项目了，Github 上的 Issue 存留了很多，这边只能尽量把一些恶性 Bug 修复”

如上所示，也回答了其和 Ant Design X 的关系：ProChat 是 x 的前生，新用户请直接使用 x，老用户也请尽快迁移到 x。

感兴趣的朋友们可以去试试哦！

前言

最近感觉自己有点颓废，左思右想后觉得不能这样浪费时间，天天来摆烂。受到了群友的激励以及最近自己喜欢看小说。就想我能不能自己也做一款小说阅读器出来呢。在最开始的时候花了一段时间写了一个版本。当时用的是一个开源的接口，当我写好后使用了两天接口挂了我就只有大眼瞪小眼了。之后在 FlutterCandies里面咨询了群友，发现了一种使用外部提供书籍数据源的方法可以避免数据来源挂掉，说干就干vscode启动！

项目地址

github.com/fluttercand…

项目介绍

BITReader是一款基于Flutter实现的小说阅读器

当前功能包含：

• 源搜索：使用内置数据来源进行搜索数据（后续更新：用户可以自行导入来源进行源搜索


• 收藏书架


• 阅读历史记录


• 阅读设置：字号设置，字体颜色更改，自定义阅读背景（支持调色板自定义选择，支持image设置为背景


• 主题设置：支持九种颜色的主题样式


• 书籍详情：展示书籍信息以及章节目录等书籍信息

支持平台

项目截图

mac运行截图

windows运行截图

项目结构

lib

├── main.dart -- 入口

├── assets -- 本地资源生成

├── base -- 请求状态、页面状态

├── db -- 数据缓存

├── icons -- 图标

├── net -- 网络请求、网络状态

├── n_pages

    ├── detail -- 详情页

    ├── home -- 首页

    ├── search -- 全网搜索搜索页

    ├── history -- 历史记录 

    ├── read -- 小说阅读 

    └── like -- 收藏书架

├── pages  已废弃⚠

    ├── home -- 首页

    ├── novel -- 小说阅读

    ├── search -- 全网搜索

    ├── category -- 小说分类

    ├── detail_novel -- 小说详情

    ├── book_novel -- 书架、站源

    └── collect_novel -- 小说收藏

├── route -- 路由

└── theme -- 主题管理

    └── themes -- 主题颜色-9种颜色

├── tools -- 工具类 、解析工具、日志、防抖。。。

└── widget -- 自定义组件、工具 、加载、状态、图片 等。。。。。。

阅读器主要包含的模块

• 阅读显示：文本解析，对文本进行展示处理


• 数据解析： 数据源的解析，以及数据来源的解析（目前只支持简单数据源格式解析、后续可能会更新更多格式解析


• 功能：阅读翻页样式、字号、背景、背景图、切换章节、收藏、历史记录、本地缓存等

阅读显示

阅读文本展示我用的是extended_text因为支持自定义效果很好。

实现的效果把文本中 “ ” 引用起来的文本自定义成我自己想要的效果样式。

class MateText extends SpecialText {

  MateText(

    TextStyle? textStyle,

    SpecialTextGestureTapCallback? onTap, {

    this.showAtBackground = false,

    required this.start,

    required this.color,

  }) : super(flag, '”', textStyle, onTap: onTap);

  static const String flag = '“';

  final int start;

  final Color color;



  /// whether show background for @somebody

  final bool showAtBackground;



  @override

  InlineSpan finishText() {

    final TextStyle textStyle =

        this.textStyle?.copyWith(color: color) ?? const TextStyle();



    final String atText = toString();



    return showAtBackground

        ? BackgroundTextSpan(

            background: Paint()..color = Colors.blue.withOpacity(0.15),

            text: atText,

            actualText: atText,

            start: start,



            ///caret can move int0 special text

            deleteAll: true,

            style: textStyle,

            recognizer: (TapGestureRecognizer()

              ..onTap = () {

                if (onTap != null) {

                  onTap!(atText);

                }

              }))

        : SpecialTextSpan(

            text: atText,

            actualText: atText,

            start: start,

            style: textStyle,

            recognizer: (TapGestureRecognizer()

              ..onTap = () {

                if (onTap != null) {

                  onTap!(atText);

                }

              }));

  }

}

class NovelSpecialTextSpanBuilder extends SpecialTextSpanBuilder {

  NovelSpecialTextSpanBuilder({required this.color});

  Color color;

  set setColor(Color c) => color = c;

  @override

  SpecialText? createSpecialText(String flag,

      {TextStyle? textStyle,

      SpecialTextGestureTapCallback? onTap,

      int? index}) {

    if (flag == '') {

      return null;

    } else if (isStart(flag, AtText.flag)) {

      return AtText(

        textStyle,

        onTap,

        start: index! - (AtText.flag.length - 1),

        color: color,

      );

    } else if (isStart(flag, MateText.flag)) {

      return MateText(

        textStyle,

        onTap,

        start: index! - (MateText.flag.length - 1),

        color: color,

      );

    }

    // index is end index of start flag, so text start index should be index-(flag.length-1)

    return null;

  }

}

数据解析编码格式转换

首先数据是有不同的编码格式，否则我们直接展示可能会导致乱码问题。
先把数据给根据查找到的编码类型来做单独的处理转换。

/// 解析html数据 解码 不同编码

  static String parseHtmlDecode(dynamic htmlData) {

    String resultData = gbk.decode(htmlData);

    final charset = ParseSourceRule.parseCharset(htmlData: resultData) ?? "gbk";

    if (charset.toLowerCase() == "utf-8" || charset.toLowerCase() == "utf8") {

      resultData = utf8.decode(htmlData);

    }

    return resultData;

  }

 static String? parseCharset({

    required String htmlData,

  }) {   

    Document document = parse(htmlData);

  

    List<Element> metaTags = document.getElementsByTagName('meta').toList();

    for (Element meta in metaTags) {

      String? charset = meta.attributes['charset'];

      String content = meta.attributes['content'] ??

          ""; //<meta http-equiv="Content-Type" content="text/html; charset=utf-8">



      if (charset != null) {

        return charset; 

      }

      List<String> parts = content.split(';');

      for (String part in parts) {

        part = part.trim();

        if (part.startsWith('charset=')) {

          return part.split('=').last.trim();

        }

      }

    }



    return null; 

  }

数据结构解析-代码太多只展示部分

Document document = parse(htmlData);



    //

    List<Element> rootNodes = [];

    if (rootSelector != null && rootSelector.isNotEmpty) {

      // 

      List<String> rootParts = rootSelector.split(RegExp(r'[@>]'));

      String initialPart = rootParts[0].trim();



      //

      if (initialPart.startsWith('class.')) {

        String className = initialPart.split('.')[1];

        rootNodes = document.getElementsByClassName(className).toList();

      } else if (initialPart.startsWith('.')) {

        String className = initialPart.substring(1);

        rootNodes = document.getElementsByClassName(className).toList();

      } else if (initialPart.startsWith('#')) {

        String idSelector = initialPart.substring(1);

        rootNodes = document.querySelectorAll('#$idSelector').toList();

      } else if (initialPart.startsWith('id.')) {

        String idSelector = initialPart.split('.')[1];

        var element = document.querySelector('#$idSelector');

        if (element != null) {

          rootNodes.add(element);

        }

      } else if (initialPart.contains(' ')) {

        String idSelector = initialPart.replaceAll(' ', ">");

        var element = document.querySelector(idSelector);

        if (element != null) {

          rootNodes.add(element);

        }

      } else {

        rootNodes = document.getElementsByTagName(initialPart).toList();

      }

存储工具类 - 部分代码

/// shared_preferences

class PreferencesDB {

  PreferencesDB._();

  static final PreferencesDB instance = PreferencesDB._();

  SharedPreferencesAsync? _instance;

  SharedPreferencesAsync get sps => _instance ??= SharedPreferencesAsync();



  /*** APP相关 ***/



  /// 主题外观模式

  ///

  /// system(默认)：跟随系统 light：普通 dark：深色

  static const appThemeDarkMode = 'appThemeDarkMode';



  /// 多主题模式

  ///

  /// default(默认)

  static const appMultipleThemesMode = 'appMultipleThemesMode';



  /// 字体大小

  ///

  ///

  static const fontSize = 'fontSize';



  /// 字体粗细

  static const fontWeight = 'fontWeight';



  /// 设置-主题外观模式

  Future<void> setAppThemeDarkMode(ThemeMode themeMode) async {

    await sps.setString(appThemeDarkMode, themeMode.name);

  }



  /// 获取-主题外观模式

  Future<ThemeMode> getAppThemeDarkMode() async {

    final String themeDarkMode =

        await sps.getString(appThemeDarkMode) ?? 'system';

    return darkThemeMode(themeDarkMode);

  }



  /// 设置-多主题模式

  Future<void> setMultipleThemesMode(String value) async {

    await sps.setString(appMultipleThemesMode, value);

  }



  /// 获取-多主题模式

  Future<String> getMultipleThemesMode() async {

    return await sps.getString(appMultipleThemesMode) ?? 'default';

  }



  /// 获取-fontsize 大小 默认18

  Future<double> getNovelFontSize() async {

    return await sps.getDouble(fontSize) ?? 18;

  }



  /// 设置 -fontsize 大小

  Future<void> setNovelFontSize(double size) async {

    await sps.setDouble(fontSize, size);

  }



  /// 设置-多主题模式

  Future<void> setNovelFontWeight(NovelReadFontWeightEnum value) async {

    await sps.setString(fontWeight, value.id);

  }



  /// 获取-多主题模式

  Future<String> getNovelFontWeight() async {

    return await sps.getString(fontWeight) ?? 'w300';

  }

}

最后

特别鸣谢FlutterCandies糖果社区，也欢迎加入我们的大家庭。让我们一起学习共同进步

免责声明：本项目提供的源代码仅用学习，请勿用于商业盈利。

用 Cursor 做 UI，有两种最简单又有效的方法，一个免费一个付费，不管你要做网页 UI 还是应用程序 UI，都能用。

我这里不推荐直接用 Cursor 自带模型生成 UI，模型生成出来的效果比较差，就算是最强的 Claude 也不太行。

本文我分享的方法是我最近学到的，先说免费的。当我们手头有一张 UI 图片时，不要直接丢给 Cursor，而是先用 Google 的 Gemini 模型、Claude 或者 ChatGPT，这里我用的是 Gemini 并打开 Canvas 功能。

我把 UI 图片放到 Gemini 中，然后让它根据 UI 截图生成一份 JSON 格式的设计规范文件。

提示词参考：

Create a JSON-formatted design system profile. This profile should extract relevant visualdesign information from the provided screenshots. The JSON output must specifically include:

The overarching design style (e.g., color palette, typography, spacing, visual hierarchy).The structural elements and layout principles.Any other attributes crucial for an Al to consistently replicate these design systems.Crucially, do not include the specific content or data present within the images, focusing solely

生成出来的 JSON 包含整体设计风格、结构元素、布局原则，以及一些关键属性。

接着把这份 JSON 文件复制到 Cursor 中，让 Cursor 根据这份 JSON 来生成代码。

提示词参考：

参考 @design.json 设计规范，根据图片中的样式，生成一个网页。

生成效果如下：

对比一下如果直接用 Cursor 根据截图生成代码，不用 JSON 文件。

提示词：

按照图片中的UI样式，创建一个新的页面。注意：尽可能按照图片中的样子创建!!!

效果如下：

可以看到，效果差了很多，我原型 UI 的截图如下：

这是我随便找的一张图片作为例子，可以明显看出，先提取一份 JSON 文件，然后再让 Cursor 生成代码，效果要好很多。

为什么这种先提取 JSON 文件再生成代码的方法很有效？因为当任务涉及精确、结构化、无歧义的数据时，JSON 让模型理解更清晰，处理更高效，生成的结果也更稳定。

以上就是免费的方法。

接下来是付费的方法。

如果你对 UI 要求比较高，比如需要反复修改，那我推荐直接用 v0 API。v0 模型是 Vercel 推出的，专门针对 UI 和前端开发优化，所以在处理这类任务时，v0 比 Claude、Gemini、ChatGPT 都更强。

我一般会在需要大量生成 UI 时订阅 v0，一个月 20 美金，这个月把需要的 UI 全部生成完，然后就可以退订。

订阅后去后台生成 API Key，然后在 Cursor 中调用 v0 模型即可。

在 Cursor 模型设置中，把 v0 的 API Key 填进去，v0 模型是符合 OpenAI API 规范的，所以直接选择 OpenAI 模型即可。

实际使用时，你在对话中用的是 OpenAI 模型，但后台用的其实是 v0 模型。

好了，这就是免费和付费的两种方法。

最后再推荐两个动画工具：Framer Motion 和 React Bits，也都是很棒的选择。

你可以把 React Bits 中动画代码直接粘贴到 Cursor 中，让模型帮你集成即可。

• React：相当于项目经理和架构师


• Radix UI：相当于功能工程师


• Tailwind CSS：相当于视觉设计师


• Framer Motion：相当于动效设计师

以上就是一套现代强大 UI 开发工具箱，大家可以根据需要组合使用！

这两天啊，各地高考的成绩终于是陆续公布了。

现在，也是时候揭晓全球第一梯队的大模型们的 “高考成绩” 了——

我们先来看下整体的情况（该测试由字节跳动 Seed 团队官方发布）：

按照传统文理分科计分方式，Gemini 的理科总成绩 655 分，在所有选手里排名第一。豆包的文科总成绩 683 分，排名第一，理科总成绩是 648 分，排名第二。

再来看下各个细分科目的成绩情况：

除了数学、化学和生物之外，豆包的成绩依旧是名列前茅，6 个科目均是第一。

不过其它 AI 选手的表现也是比较不错，可以说是达到了优秀学生的水准。

比较遗憾的选手就要属 O3，因为它在语文写作上跑了题，因此语文成绩仅 95 分，拉低了整体的分数。

若是从填报志愿角度来看，因为这套测试采用的是山东省的试卷，根据过往经验判断，3 门自选科目的赋分相比原始分会有一定程度的提高，尤其是在化学、物理等难度较大的科目上。本次除化学成绩相对稍低外，豆包的其余科目组合的赋分成绩最高能超过 690 分，有望冲刺清华、北大。

（赋分规则：将考生选考科目的原始成绩按照一定比例划分等级，然后将等级转换为等级分计入高考总分）

好，那现在的豆包面临的抉择是：上清华还是上北大？

大模型参加高考，分数怎么判？

在看完成绩之后，或许很多小伙伴都有疑惑，这个评测成绩到底是怎么来的。

别急，我们这就对评测标准逐条解析。

首先在卷子的选择上，由于目前网络流出的高考真题都是非官方的，而山东是少数传出全套考卷的高考大省；因此主科（即语文、数学、英语）采用的是今年的全国一卷，副科采用的则是山东卷，满分共计 750 分。

其次在评测方式上，都是通过 API 测试，不会联网查询，评分过程也是参考高考判卷方式，就是为了检验模型自身的泛化能力：

• 选择题、填空题
  
  

  采用机评（自动评估）加人工质检的方式；



• 开放题
  
  

  实行双评制，由两位具有联考阅卷经验的重点高中教师匿名评阅，并设置多轮质检环节。

在给模型打分的时候，采用的是 “3 门主科（语文数学英语）+3 门综合科（理综或文综）” 的总分计算方式，给五个模型排了个名次。

值得一提的是，整个评测过程中，模型们并没有用任何提示词优化技巧来提高模型的表现，例如要求某个模型回答得更详细一些，或者刻意说明是高考等等。

最后，就是在这样一个公平公正的环境之下，从刚才我们展示的结果来看，Gemini、豆包相对其他 AI 来说取得了较优的成绩。

细分科目表现分析

了解完评测标准之后，我们继续深入解读一下 AI 选手们在各个科目上的表现。

由于深度思考的大火，大模型们在数学这样强推理科目上的能力明显要比去年好很多（此前大部分均不及格），基本上都能达到 140 分的成绩。

不过在一道不算难的单选题（全国一卷第 6 题）上，国内外的大模型们却都栽了跟头：

这道题大模型们给出的答案是这样的：

豆包：C；Gemini：B；Claude：C；O3：C；DeepSeek：C。

但这道题的正解应该是 A，因此大模型们在此全军覆没。

之所如此，主要是因为题目里有方框、虚线、箭头和汉字混在一起的图，模型认不准图像，说明它们在 “看图说话” 这块还有进步空间。

以及在更难的压轴大题上，很多大模型也没完全拿下，经常漏写证明过程，或者推导不严谨被扣分，说明在细节上还需加强。

到做语文选择题和阅读题这两个版块，大模型们几乎是 “学霸本霸”，得分率超高。

不过在作文写作过程也暴露出了一些问题，例如写作过于刻板、文字冰冷，文章字数不达标（不足 800 字或超过 1200 字）、立意不对，形式上还经常会出现惯用的小标题。

在英语测试过程中，大模型们几乎挑不出毛病，唯一扣分点是在写作上，比如用词不够精准、句式稍显单调，但整体已经很接近完美。

对于理综，遇到带图的题目大模型们还是会犯难，不过豆包和 Gemini 这俩模型在看图像和理解图的能力上会比其他模型强一些。

例如下面这道题中，正确答案应当是 C，大模型们的作答是这样的：

豆包：C；Gemini：C；Claude：D；O3：D；DeepSeek：D。

最后在文综方面，大模型的地域差别就显现得比较明显，国外的大模型做政治、历史题时，经常搞不懂题目在考啥，对中国的知识点不太 “感冒”。

而对于地理题，最头疼的便是分析统计图和地形图，得从图里精准提取信息再分析。

以上就是对于本次评测的全面分析了。

除了今年国内的高考之外，这几位 “参赛选手” 还参加了印度理工学院的第二阶段入学考试——JEE Advanced。

这场考试每年有数百万人参与第一阶段考试，其中前 25 万考生可晋级第二阶段。它分为两场，每场时长 3 小时，同时对数学、物理、化学三科进行考察。

题目以图片形式呈现，重点考查模型的多模态处理能力与推理泛化能力。所有题目均为客观题，每道题进行 5 次采样，并严格按照 JEE 考试规则评分——答对得分、答错扣分，不涉及格式评分标准。

与全印度人类考生成绩对比显示，第一名得分 332 分，第十名得分 317 分。

值得注意的是，豆包与 Gemini 已具备进入全印度前 10 的实力：Gemini 在物理和化学科目中表现突出，而豆包在数学科目 5 次采样中实现全对。

怎么做到的？

相比去年一本线上下的水平，整体来看，大模型们在今年高考题上的表现均有明显的进步。

那么它们到底是如何提升能力的？我们不妨以拿下单科第一最多的豆包为例来了解一下。

豆包大模型 1.6 系列，是字节跳动 Seed 团队推出的兼具多模态能力与深度推理的新一代通用模型。

团队让它能力提升的技术亮点，我们可以归结为三招。

第一招：多模态融合与 256K 长上下文能力构建

Seed1.6 延续了 Seed1.5 在稀疏 MoE（混合专家模型）领域的技术积累，采用 23B 激活参数与 230B 总参数规模进行预训练。其预训练过程通过三个阶段实现多模态能力融合与长上下文支持：

• 第一阶段：纯文本预训练
  
  以网页、书籍、论文、代码等数据为训练基础，通过规则与模型结合的数据清洗、过滤、去重及采样策略，提升数据质量与知识密度。


• 第二阶段：多模态混合持续训练（MMCT）
  
  进一步强化文本数据的知识与推理密度，增加学科、代码、推理类数据占比，同时引入视觉模态数据，与高质量文本混合训练。


• 第三阶段：长上下文持续训练（LongCT）
  
  通过不同长度的长文数据逐步扩展模型序列长度，将最大支持长度从 32K 提升至 256K。

通过模型架构、训练算法及 Infra 的持续优化，Seed1.6 base 模型在参数量规模接近的情况下，性能较 Seed1.5 base 实现显著提升，为后续后训练工作奠定基础。

这一招的发力，就对诸如高考语文阅读理解、英语完形填空和理科综合应用题等的作答上起到了提高准确率的作用，因为它们往往涉及长文本且看重上下文理解。

第二招：多模态融合的深度思考能力

Seed1.6-Thinking 延续 Seed1.5-Thinking 的多阶段 RFT（强化反馈训练）与 RL（强化学习）迭代优化方法，每轮 RL 以上一轮 RFT 为起点，通过多维度奖励模型筛选最优回答。相较于前代，其升级点包括：

• 拓展训练算力，扩大高质量数据规模（涵盖 Math、Code、Puzzle 等领域）；


• 提升复杂问题的思考长度，深度融合 VLM 能力，赋予模型清晰的视觉理解能力；


• 引入 parallel decoding 技术，无需额外训练即可扩展模型能力 —— 例如在高难度测试集 Beyond AIME 中，推理成绩提升 8 分，代码任务表现也显著优化。

这种能力直接对应高考中涉及图表、公式的题目，如数学几何证明、物理电路图分析、地理等高线判读等；可以快速定位关键参数并推导出解题路径，避免因单一模态信息缺失导致的误判。

第三招：AutoCoT 解决过度思考问题

深度思考依赖 Long CoT（长思维链）增强推理能力，但易导致 “过度思考”—— 生成大量无效 token，增加推理负担。

为此，Seed1.6-AutoCoT 提出 “动态思考能力”，提供全思考、不思考、自适应思考三种模式，并通过 RL 训练中引入新奖励函数（惩罚过度思考、奖励恰当思考），实现 CoT 长度的动态压缩。

在实际测试中：

• 中等难度任务（如 MMLU、MMLU pro）中，CoT 触发率与任务难度正相关（MMLU 触发率 37%，MMLU pro 触发率 70%）；


• 复杂任务（如 AIME）中，CoT 触发率达 100%，效果与 Seed1.6-FullCoT 相当，验证了自适应思考对 Long CoT 推理优势的保留。

以上就是豆包能够在今年高考全科目评测中脱颖而出的原因了。

不过除此之外，还有一些影响因素值得说道说道。

正如我们刚才提到的，化学和生物的题目中读图题占比较大，但因非官方发布的图片清晰度不足，会导致多数大模型的表现不佳；不过 Gemini2.5-Pro-0605 的多模态能力较突出，尤其在化学领域。

不过最近，字节 Seed 团队在使用了更清晰的高考真题图片后，以图文结合的方式重新测试了对图片理解要求较高的生物和化学科目，结果显示 Seed1.6-Thinking 的总分提升了近 30 分（理科总分达 676）。

这说明，全模态推理（结合文本与图像）能显著释放模型潜力，是未来值得深入探索的方向。

那么你对于这次大模型们的 battle 结果有何看法？欢迎大家拿真题去实测后，在评论区留言你的感受~

评分明细详情：

bytedance.sg.larkoffice.com/sheets/QgoF…

欢迎在评论区留下你的想法！

— 完 —

NextTick

等待下一次 DOM 更新刷新的工具方法。

cn.vuejs.org/api/general…

<https://cn.vuejs.org/api/general.html#nexttick>

从字面上看 就知道 肯定是个 异步的嘛。

然后面试官 那你来说说 js执行过程吧。 宏任务 微任务 来做做 宏任务 微任务输出的结果的题吧。

再然后 问问你 nextTick 既然几个异步的 那么他是 宏任务 还是个 微任务呀。

vue2 中

文件夹 src/core/util/next-tick.js 中

promise --> mutationObserver -> setImmediate -> setTimeout

支持 哪个走哪个

vue3 中

好吧 好吧 promise 了嘛

全程 promise

大家好，我是农村程序员，独立开发者，行业观察员，前端之虎陈随易。

我会在这里分享关于 独立开发、编程技术、思考感悟 等内容，欢迎关注。

• 个人网站 1️⃣：chensuiyi.me


• 个人网站 2️⃣：me.yicode.tech


• 技术群，搞钱群，闲聊群，自驾群，想入群的在我个人网站联系我。

如果你觉得本文有用，一键三连 (点赞、评论、转发)，就是对我最大的支持~

网上冲浪看到一个有趣且违背常识的帖子，用了那么多年的 localhost，没想到 localhost 还能设置子域名。

而且还不需要修改 hosts 文件，直接就能使用，这真是离谱他妈给离谱开门，离谱到家了。

先说说应用场景：

• 多用户/多会话隔离：在本地开发中模拟不同用户的 cookies 和 session storage，适合测试用户认证或个性化功能。


• 跨域开发与测试：模拟真实多域环境 (如 API 和前端分离)，用于调试 CORS、单点登录或微服务架构。


• 简化开发流程：无需修改 hosts 文件即可快速创建子域名，适合快速原型设计或临时项目。


• 工具与服务器集成：与本地开发工具 (如 localias) 结合，支持 HTTPS 和自定义端口，增强开发体验。


• 灵活调试：通过自定义子域名和 IP (如 127.0.0.42) 进行高级调试或模拟复杂网络配置。

总得来说就是，localhsot 支持子域名比我们自己手动配置不同的域名并设置 hosts 文件方便多了。

接下来给大家实测一下。

请看，这是我直接在浏览器输入 test1.localhost:3020 后，就能请求到我本地启动的监听 3020 端口的后端接口返回的数据。

我没有配置 hosts 文件，没有做过任何多余的配置工作，直接就生效了。

那么我们可以直接在本地就能调试多服务器集群，跨域 cookie 共享，SSO 单点登录，微服务架构等功能，非常方便。

另外，本公众号是 前端之虎陈随易 专门分享技术的公众号，目前关注量不多，希望大家点点小手指，来个大大的关注哦~

前言

Vue3.5在2024-09-03正式上线，目前在Vue官网显最新版本已经是Vue3.5，其中主要包含了几个小改动，我留意到日常最常用的改动就是props了，肯定是用Vue3的人必用的，所以针对性说一下props的两个小改动使我们日常使用更加灵活。

一、带响应式Props解构赋值

简述： 以前我们对Props直接进行解构赋值是会失去响应式的，需要配合使用toRefs或者toRef解构才会有响应式，那么就多了toRefs或者toRef这工序，而最新Vue3.5版本已经不需要了。

这样直接解构，testCount能直接渲染显示，但会失去响应式，当我们修改testCount时页面不更新。

<template>

  <div>

    {{ testCount }}

  </div>

</template>



<script setup>

  import { defineProps } from 'vue';

  const props = defineProps({

    testCount: {

      type: Number,

      default: 0,

    },

  });



  const { testCount } = props;

</script>

保留响应式的老写法，使用toRefs或者toRef解构

<template>

  <div>

    {{ testCount }}

  </div>

</template>



<script setup>

  import { defineProps, toRef, toRefs } from 'vue';

  const props = defineProps({

    testCount: {

      type: Number,

      default: 0,

    },

  });



  const { testCount } = toRefs(props);

  // 或者

  const testCount = toRef(props, 'testCount');

</script>

最新Vue3.5写法，不借助”外力“直接解构，依然保持响应式

<template>

  <div>

    {{ testCount }}

  </div>

</template>



<script setup>

  import { defineProps } from 'vue';

  const { testCount } = defineProps({

    testCount: {

      type: Number,

    },

  });



</script>

相比以前简洁了真的太多，直接解构使用省去了toRefs或者toRef

二、Props默认值新写法

简述： 以前默认值都是用default: ***去设置，现在不用了，现在只需要解构的时候直接设置默认值，不需要额外处理。

先看看旧的default: ***默认值写法

如下第12就是旧写法，其它以前Vue2也是这样设置默认值

<template>

  <div>

    {{ props.testCount }}

  </div>

</template>



<script setup>

  import { defineProps } from 'vue';

  const props = defineProps({

    testCount: {

      type: Number,

      default: 1

    },

  });

</script>

最新优化的写法
如下第9行，解构的时候直接一步到位设置默认值，更接近js语法的写法。

<template>

  <div>

    {{ testCount }}

  </div>

</template>



<script setup>

  import { defineProps } from 'vue';

  const { testCount=18 } = defineProps({

    testCount: {

      type: Number,

    },

  });

</script>

小结

这次更新其实props的本质功能并没有改变，但写法确实变的更加丝滑好用了，props使用非常高频感觉还是有必要跟进这种更简洁的写法。如果那里写的不对或者有更好建议欢迎大佬指点啊。

引言

最近我的小册《油猴脚本实战指南》上线了，很多同学都很感兴趣。

有些人学习后就私下问我，油猴既然能将任意前端js注入到当前网页中，是否能结合手势识别实现任意网页隔空控制，实现类似手机上的隔空翻页功能呢？

这是个非常好的想法，于是，我经过研究，将它实现出来了！先看看脚本效果：

1️⃣ 上下翻页功能

• 左手张开，右手可以控制网页向下翻页


• 左手握拳，右手可以控制网页向上翻页

2️⃣ 右手可以控制一个模拟光标移动

3️⃣ 右手握拳，实现点击效果

当然，还预设了很多手势，比如双手比✌🏻关闭当前网页，左手竖起大拇指，右手实现缩放网页等效果。

实现原理

其实实现原理非常简单，就是油猴+手势识别

油猴Tampermonkey

油猴（Tampermonkey）是一款浏览器插件，允许用户在网页加载时注入自定义的 JavaScript 脚本，来增强、修改或自动化网页行为。

通俗地说，借助油猴，你可以将自己的 JavaScript 代码“植入”任意网页，实现自动登录、抢单、签到、数据爬取、广告屏蔽等各种“开挂级”功能，彻底掌控页面行为。

如果你想深入了解，可以参考文章：juejin.cn/book/751468…

手势识别MediaPipe

手势识别其实已经不是一个新鲜词了，随着大模型的普及，AI识别手势非常简单方便。本示例中使用的AI模型识别，主要依赖了谷歌的MediaPipe。

MediaPipe 解决方案提供了一套库和工具，可帮助您快速在应用中应用人工智能 (AI) 和机器学习 (ML) 技术。

本示例中的demo就是借助它的手势识别能力实现的。在web中，我们可以借助MediaPipe @mediapipe/tasks-vision NPM 软件包获取手势识别器代码。

MediaPipe @mediapipe/tasks-vision

它的使用也非常简单

// Create task for image file processing:

const vision = await FilesetResolver.forVisionTasks(

  // path/to/wasm/root

  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm "

);

const gestureRecognizer = await GestureRecognizer.createFromOptions(vision, {

  baseOptions: {

    modelAssetPath: "https://storage.googleapis.com/mediapipe-tasks/gesture_recognizer/gesture_recognizer.task"

  },

  numHands: 2

});

如何将两者结合

借助油猴的脚本注入能力，我们能让我们的手势识别代码运行在任意网页，从而轻松实现隔空手势控制效果。

当然，脚本运行时必须开启摄像机权限，页面其实会有一个画面，但是很尴尬，于是实际脚本中，我将画面隐藏了。

手势识别的原理其实也不复杂，通过tasks-vision，我们可以拿到上图中各个关键的点的位置信息，通过判断不同点位之间的距离，实现不同的手势判断。

// 判定手势

// 手掌张开手势

function isHandOpen(hand) {

  const fingers = [[8, 5], [12, 9], [16, 13], [20, 17]];

  return fingers.filter(([tip, base]) => dist(hand[tip], hand[base]) > 0.1).length >= 4;

}

// 握拳手势

function isFist(hand) {

  const fingers = [[8, 5], [12, 9], [16, 13], [20, 17]];

  return fingers.filter(([tip, base]) => dist(hand[tip], hand[base]) < 0.06).length >= 3;

}

// 胜利手势

function isVictory(hand) {

  const extended = [8, 12];

  const folded = [16, 20];

  return (

    extended.every((i) => dist(hand[i], hand[i - 3]) > 0.1) &&

    folded.every((i) => dist(hand[i], hand[i - 3]) < 0.05)

  );

}

上述代码中的hand就是mediapipe/tasks-vision返回的手势信息。结合这些自定义的手势信息，我们就能实现各种花里胡哨的功能！

进一步学习

对于手势识别的学习，我们可以去学习官方的demo，在npmjs上，我们可以找到使用说明

这个包人脸识别、手势识别等非常多的功能，非常强大！

如果你对油猴脚本感兴趣，可以看看教程 《 油猴脚本实战指南 》， 本示例中的demo也会在这个教程中详细讲解。

当然，你也可以加我shc1139874527，我会拉你进学习交流群，一起体验油猴脚本开发的魅力！

AI 端模型与前端开发的新时代

随着技术的发展，人工智能（AI）正以前所未有的速度融入我们的生活。从前端到后端，从移动应用到物联网设备，AI的应用场景越来越广泛。特别是在前端领域，AI技术的引入为网页开发带来了前所未有的机遇。

什么是脑神经网络库（Brain.js）

在前端领域，Brain.js 是一个非常受欢迎的库，它允许开发者在浏览器中直接使用神经网络进行各种任务，如文本分类、图像识别等。Brain.js 的一大优势在于其易于上手，即使是没有深厚机器学习背景的开发者也能快速开始使用。

Brain.js 在前端开发中的应用

数据准备

首先，我们需要准备用于训练神经网络的数据。这些数据通常以JSON数组的形式存在，每个元素包含输入（input）和输出（output）。例如，在以下示例中，我们准备了一组关于前端和后端开发的知识点，用于训练一个能够区分两者差异的神经网络。

const data = [

  { "input": "implementing a caching mechanism improves performance", "output": "backend" },

  // 更多数据...

];

神经网络初始化

接下来，我们使用 brain.recurrent.LSTM() 函数初始化一个长短期记忆（LSTM）神经网络。LSTM是一种特殊的递归神经网络（RNN），特别适合处理序列数据，如文本或时间序列。

const network = new brain.recurrent.LSTM();

模型训练

有了数据和神经网络之后，我们就可以开始训练模型了。训练过程可能需要一些时间，具体取决于数据集的大小和复杂度。network.train() 方法接受数据集作为参数，并允许设置训练的迭代次数和其他选项。

network.train(data, {

  iterations: 2000, // 迭代次数

  log: true,       // 是否打印训练日志

  logPeriod: 100   // 日志打印频率

});

应用模型

一旦模型训练完成，我们就可以使用 network.run() 方法对新的输入进行预测。例如，我们可以测试模型是否能正确地将“使用Flexbox布局”归类为前端开发。

const output = network.run("using flexbox for layout");

console.log(output); // 输出结果

完整代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>AI 端模型- 前端开发的时代</title>

</head>

<body>

<script src="./brain.js"></script>

<script>

// json 数组  

// 输入  input

// 喂给大模型的数据 

const data = [

  { "input": "implementing a caching mechanism improves performance", "output": "backend" },

  { "input": "hover effects on buttons", "output": "frontend" },

  { "input": "optimizing SQL queries", "output": "backend" },

  { "input": "using flexbox for layout", "output": "frontend" },

  { "input": "setting up a CI/CD pipeline", "output": "backend" },

  { "input": "SVG animations for interactive graphics", "output": "frontend" },

  { "input": "authentication using OAuth", "output": "backend" },

  { "input": "responsive images for different screen sizes", "output": "frontend" },

  { "input": "creating REST API endpoints", "output": "backend" },

  { "input": "CSS grid for complex layouts", "output": "frontend" },

  { "input": "database normalization for efficiency", "output": "backend" },

  { "input": "custom form validation", "output": "frontend" },

  { "input": "implementing web sockets for real-time communication", "output": "backend" },

  { "input": "parallax scrolling effect", "output": "frontend" },

  { "input": "securely storing user passwords", "output": "backend" },

  { "input": "creating a theme switcher (dark/light mode)", "output": "frontend" },

  { "input": "load balancing for high traffic", "output": "backend" },

  { "input": "accessibility features for disabled users", "output": "frontend" },

  { "input": "scalable architecture for growing user base", "output": "backend" }

];

// 初始化一个神经网络

const network = new brain.recurrent.LSTM();

// 训练 花蛮长时间

network.train(data,{

  iterations: 2000,

  log:true,

  logPeriod:100

});

// 执行一下

 const output = network.run("using flexbox for layout");

console.log(output);

</script>

</body>

</html>

前端与AI融合的未来

随着技术的进步，AI在前端的应用将更加广泛。从智能表单验证到个性化推荐系统，从前端性能优化到用户界面的自动设计，AI技术为前端开发提供了无限的可能性。此外，随着端侧模型（如AGI端侧模型）的发展，未来的设备将变得更加智能，能够即时响应用户的需要，提供更加个性化的体验。

最后，AI与前端开发的结合不仅提升了用户体验，也为开发者带来了新的挑战和机遇。通过不断学习和探索，我们能够在这个充满活力的领域中创造出更多令人兴奋的作品。

大家好，我卡颂，专注于AI助力程序员转型（阅读我的更多思考）

最近DeepSeek R1爆火。有多火呢？连我爷爷都用上了，还研究起提示词工程来了。

大模型不断发展对我们前端工程师有什么长远影响呢？本文聊聊25年前端会有的一个小趋势。

模型进步的影响

像DeepSeek R1这样的推理模型和一般语言模型（类似Claude Sonnet、GPT-4o、DeepSeek-V3）有什么区别呢？

简单来说，推理模型的特点是：推理能力强，但速度慢、消耗高。

他比较适合的场景比如：

• Meta Prompting（让推理模型生成或修改给一般语言模型用的提示词）


• 路径规划

等等

这些应用场景主要利好AI Agent。

再加上一般语言模型在生成效果、token上下文长度上持续提升。可以预见，类似Cursor Composer Agent这样的AI Agent在25年能力会持续提升，直到成为开发标配。

这会给前端工程师带来什么进一步影响呢？

一种抽象的理解

我们可以将AI Agent抽象得理解为应用压缩算法，什么意思呢？

以Cursor Composer Agent举例：

我们传入：

• 描述应用状态的提示词


• 描述应用结构的应用截图

AI Agent帮我们生成应用代码。

同样，也能反过来，让AI Agent根据应用代码帮我们生成描述应用的提示词。

从左到右可以看作是解压算法，从右往左可以看作是压缩算法。

就像图片的压缩算法存在失真，基于AI Agent抽象的应用压缩算法也存在失真，也就是生成的效果不理想。

随着上文提到的AI Agent能力提高（背后是模型能力提高、工程化的完善），应用压缩算法的失真率会越来越低。

这会带来什么进一步的影响呢？

对开发的影响

如果提示词（经过AI Agent）就能准确表达想要的代码效果，那会有越来越多原本需要用代码表达的东西被用提示词表达。

比如，21st.dev的组件不是通过npm，而是通过提示词引入。

相当于将引入组件的流程从：开发者 -> 代码

变成了：开发者 -> 提示词 -> AI Agent -> 代码

再比如，CopyCoder是一款上传应用截图，自动生成应用提示词的应用。

当你上传应用截图后，他会为你生成多个提示词文件。

其中.setup描述AI Agent需要执行的步骤，其他文件是描述应用实现细节的结构化提示词

这个过程相当于根据应用截图，将应用压缩为提示词。

很自然的，反过来我们就能用AI Agent将这段提示词重新解压为应用代码。

这个过程在25年会越来越丝滑。

这会造成的进一步影响是：越来越多前端开发场景会被提炼为标准化的提示词，比如：

• 后台管理系统


• 官网


• 活动页

前端开发的日常编码工作会越来越多被上述流程取代。

你可能会说，当前AI生成的代码效果还不是很好。

但请注意，我们谈的是趋势。当你日复一日做着同样的业务时，你的硅基对手正在每年大跨步进步。

总结

随着基础模型能力提高，以及工程化完善，AI Agent在25年会逐渐成为开发标配。

作为应用开发者（而不是算法工程师），我们可以将AI Agent抽象得理解为应用压缩算法。

随着时间推移，这套压缩算法的失真率会越来越低。

届时，会有越来越多原本需要用代码表达的东西被用提示词表达。

这对前端工程师来说，既是机遇也是挑战。

你可能想不到，只用两行 CSS，就能让你的卡片、图片、内容块自动适应各种屏幕宽度，彻底摆脱复杂的媒体查询！
秘诀就是 CSS Grid 的 auto-fill 和 auto-fit。

马上教你用！✨

🧩 基础概念

假设你有这样一个需求：

• 一排展示很多卡片


• 每个卡片最小宽度 200px，剩余空间平均分配


• 屏幕变窄时自动换行

只需在父元素加两行 CSS 就能实现：

/* 父元素 */

.grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}



/* 子元素 */

.item {

  height: 200px;

  background-color: rgb(141, 141, 255);

  border-radius: 10px;

}

下面详细解释这行代码的意思：

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

这是 CSS Grid 布局里定义列宽的常用写法，逐个拆解如下：

1. grid-template-columns

• 作用：定义网格容器里有多少列，以及每列的宽度。

2. repeat(auto-fit, ...)

• repeat 是个重复函数，表示后面的模式会被重复多次。


• auto-fit 是一个特殊值，意思是：自动根据容器宽度，能放下几个就放几个，每列都用后面的规则。
  
  
  
  • 容器宽度足够时，能多放就多放，放不下就自动换行。
  
  
  
  

3. minmax(200px, 1fr)

• minmax 也是一个函数，意思是：每列最小200px，最大可以占1fr（剩余空间的平分）


• 具体来说：
  
  
  
  • 当屏幕宽度很窄时，每列最小宽度是200px，再窄就会换行。
  
  
  • 当屏幕宽度变宽，卡片会自动拉伸，每列最大可以占据剩余空间的等分（1fr），让内容填满整行。
  
  
  
  

4. 综合起来

• 这行代码的意思就是：
  
  
  
  • 网格会自动生成多列，每列最小200px，最大可以平分一行的剩余空间。
  
  
  • 屏幕宽了就多显示几列，屏幕窄了就少显示几列，自动换行，自适应各种屏幕！
  
  
  • 不需要媒体查询，布局就能灵活响应。
  
  
  
  

总结一句话：

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

让你的网格卡片最小200px，最大自动填满一行，自动适应任何屏幕，布局永远美观！

这里还能填 auto-fill，和 auto-fit 有啥区别？

🥇 auto-fill 和 auto-fit 有啥区别？

1. auto-fill

🧱 尽可能多地填充列，即使没有内容也会“占位”

• 会自动创建尽可能多的列轨道（包括空轨道），让网格尽量填满容器。


• 适合需要“列对齐”或“固定网格数”的场景。

2. auto-fit

🧱 自动适应内容，能合并多余空列，不占位

• 会自动“折叠”没有内容的轨道，让现有的内容尽量拉伸占满空间。


• 适合希望内容自适应填满整行的场景。

👀 直观对比

假设容器宽度能容纳 10 个 200px 的卡片，但你只放了 5 个卡片：

• auto-fill 会保留 10 列宽度，5 个卡片在前五列，后面五列是“空轨道”。


• auto-fit 会折叠掉后面五列，让这 5 个卡片拉伸填满整行。

👇 Demo 代码：

<h2>auto-fill</h2>

<div class="grid-fill">

    <div>item1</div>

    <div>item2</div>

    <div>item3</div>

    <div>item4</div>

    <div>item5</div>

</div>



<h2>auto-fit</h2>

<div class="grid-fit">

    <div>item1</div>

    <div>item2</div>

    <div>item3</div>

    <div>item4</div>

    <div>item5</div>

</div>

.grid-fill {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  gap: 16px;

  margin-bottom: 40px;

}

.grid-fit {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 16px;

}

.grid-fill div {

  background: #08f700;

}

.grid-fit div {

  background: #f7b500;

}

.grid-fill div,

.grid-fit div {

  padding: 24px;

  font-size: 18px;

  border-radius: 8px;

  text-align: center;

}

兼容性

caniuse.com/?search=aut…

🎯 什么时候用 auto-fill，什么时候用 auto-fit？

• 希望每行“有多少内容就撑多宽”，用 auto-fit
  
  适合卡片式布局、相册、响应式按钮等。


• 希望“固定列数/有占位”，用 auto-fill
  
  比如表格、日历，或者你希望网格始终对齐，即使内容不满。

📝 总结

🌟 小结

• auto-fill 更像“占位”，auto-fit 更像“自适应”


• 推荐大部分响应式卡片用 auto-fit


• 善用 minmax 配合，让列宽自适应得更自然

只需两行代码，你的页面就能优雅适配各种屏幕！

觉得有用就点赞收藏吧，更多前端干货持续更新中！🚀✨

最近跟同事闲聊，大家都在吐槽一个问题：
！
App 是越做越像平台了，但开发却越做越痛苦了。

你想加个活动页，产品说今晚上线；

你想做个业务扩展，运营说要不你再写个低代码工具；

你想适配鸿蒙，领导说最好做个 React Native 得了；

同事活成了“加班工具人”，App 也做成了臃肿的 “功能集成器”。

难道开发一个通用的 App ，就非得这么累吗？

于是，我们试着去找更轻、更灵活的解决方案。

我们只是想做一个“活动页托管方案”，不想每次上线都发版，更不想因为临时需求牵扯整个开发团队。

但随着调研的深入，我们发现这种痛点其实根本不是“活动页”本身，而是：App 缺乏一个**“包容性很强的容器”**。

比如：

• 新功能不用频繁发版；


• 能复用现有页面或者组件；


• 可以独立上线，不干扰主应用。

我们对比了几个方向：

• WebView + H5：快是快，但弱得可怕，尤其是 JSBridge 管理地狱，体验不佳；


• 低代码平台：适合特定场景，但定制性不足，复杂页面性能堪忧；


• RN/Flutter 微模块化：维护成本太高，涉及太多客户端改动。

直到我在调研中遇到了 FinClip，才意识到这事完全可以换个方式。

让人眼前一亮的 FinClip

FinClip 是什么？

一句话说完：把小程序能力，通用化、标准化，塞进任何 App。

从技术架构来说，FinClip 提供的是一个极其轻量的小程序容器 SDK（3MB都不到），可以直接嵌进你的 iOS、Android、HarmonyOS App，甚至 React Native、Flutter、macOS、车机都能跑。

开发者只要写一套小程序代码，放进去就能运行。不用重新适配底层系统，也不用改框架结构。

而且它兼容微信/支付宝/抖音小程序语法，意味着你过去写的项目，可能几乎零改动就能跑起来。

于是，我们立刻拉了群，软磨硬泡，搞来了二组同事开发的活动页项目，

需要的同学请戳这里：github.com/FernAbby/H5…

然后通过 FinClip Studio 打包上传，再嵌入 App。

FinClip Studio，真的有点香

讲真，刚开始用 FinClip Studio，我也做好了“将就一下”的心理准备。

结果没想到是真香警告。

首先，新建项目一键生成模板，跟微信小程序开发工具 99% 像；

你也可以和我一样选择导入已有的项目，

其次，模拟器支持多终端调试，拖拉缩放，全程无需真机；

另外，发布打包一条龙服务，你只需要上传至云端后台：

输入相关上传信息：

等待上传成功即可！

后台是平台运营的“指挥中心”

接下来的重头戏，需要我们登陆后台系统，

一个超级应用不是靠开发者单打独斗，而是靠多个角色协同。FinClip 的后台做得非常细腻，功能齐全，不管是开发还是运维同学，都可以轻松驾驭！

小程序管理模块，不仅可以新建、管理前面上传的小程序，还可以体验预览版、发布审核；

首先，在隐私设置栏目里设置隐私保护指引：

然后我们就可以配置审核版本或者体验版本了！

接着我们就可以直接跳转到待办中心通过审核！

除此之外，常用的灰度发布、权限范围、自动上架全都支持；

数据分析清晰易读，不需要 BI 工具也能看懂；

让你不再为如何做好运维而发愁！

用了一周的真实感受

流程

使用一周多了，整体的流程是这样的：

优点

我们没改动原生代码，甚至没有重新接入任何 SDK，只是增加一个容器模块 + 几行配置。

团队有个原来的 RN 老项目，直接用 FinClip 的容器跑起来，居然都不用重写，兼容度真的惊人。

缺点

但是缺点也有：

比如，导入已有项目会进行检测，并且明确的告知用户，其实可以后台默认执行，用户体验会更好！

另外最主要的是，后台和编辑器的登陆状态是临时的，不会长期保持！每次登陆挺麻烦的

彩蛋

首先，FinClip 贴心的内置了 AI 助手，你使用过程遇到的任何问题都可以在这里找到答案！

最重要的是，FinClip 提供了基于接口的 AI 能力，可以通过 RAG 技术为小程序注入了智能化能力，涵盖内容生成、上下文交互、数据分析等多方面功能。

这不仅提升了用户体验，也为开发者提供了便捷的 AI 集成工具，进一步增强了 FinClip 生态的竞争力！

总结

如果再给我造一次 App 的机会，我一定毫不犹豫地选择 FinClip！

当我们从“做功能”切换到“建生态”，思路就会完全不一样：

• App 不再是“巨石应用”，而是一个个业务模块的拼图


• 小程序就像“微服务 UI 化”，能独立更新、上线、下架


• 技术架构也从“一体化耦合”变成“解耦 + 动态加载”

而 FinClip 帮助开发者从“重复搬砖” 变成 “生态平台管理员”！

如果你也有和我一样的困惑，你也可以试试：

• 把一个已有的活动页，用 FinClip 打包成小程序；


• 嵌进你现有 App 中，再用 FinClip Studio 发布版本；


• 后台配置白名单，手机扫码预览。

1 天内，你就能体验一把“做平台”的感觉。

时代正在变化。我们不该再为“发布一个功能”耗尽精力，而应该把更多时间留给真正重要的东西 —— 创新、体验、增长。

FinClip 不只是工具，更是重构开发者角色的机会。

你准备好了吗？

blender导出的轿车🚗.glb：

最近因为有需求，不得不搞起3d这一块，说到3d，以为是学一个threejs就够了，结果是blender也要学。

blender可能有的前端开发或者后端开发没了解过，简单得说就是捏3d模型的这么一个东西。

经常听人家说建模建模，就是这个东西来着。

下载下来就是这么一个软件👇🏻：

通过对blender的学习可以做很多东西，那blender究竟可以做什么。要想知道能做什么，就要先知道blender是个啥。

blender是一个永久开源且免费的三维创作软件，支持建模、雕刻、骨骼、装配、动画模拟实时渲染合成和运动跟踪等等三维创作。

推荐一下大家一些现成的模型网站或插件或者材质贴图等：

• sketchfab.com


• cubebrush.co


• cgmodel.com


• free3d.co


• blender.org/download/de…


• blendermarket.com


• blender.kim/


• github.com/poly-haven/…

🔴 入门

⭕︎ 课程内容与目标

• 学习基本设置、模型变换、建模、UV编辑、材质与贴图、渲染等核心流程


• 掌握独立制作初级3D模型的能力

核心学习点

观察 -> 辅助建模，提供更好的视觉策略

变换 -> 基本变化，实现移动、旋转、复制图像等移动策略

建模 -> 重塑多边形，杜绝线建模障碍

修改器 -> 提供更便捷的迭代可能性

uv -> 纹理图层的映射到表面的方法

材质 -> 基本材质的属性设置，只需参照别人设置的方式即可

渲染 -> 了解基本的渲染设置，灯光

不要被界面中无关的设置项影响。每个三维软件都是复杂的，但是目的只是为了满足不同人的不同需求。使用时，只需要按照方法简单设置一些需要的参数即可。别的参数默认即可。

如果你看文字太多，觉得烦躁，那就记得：没有太多欲望的话，我们目的就是实现建模，表现它的材质，把它渲染出来就可以了。三点:建模->材质->渲染。

⭕︎ Blender核心优势

⭕︎ 基础设置指南

⭕︎ 视口操作

快捷键ESC下面的波浪键,英文模式下:

flowchart TD

    B[基本视图控制]

    

    B --> B1[旋转视图]

    B1 -->|操作方式| 鼠标中键

    B1 -->|效果| 围绕视点中心旋转

    

    B --> B2[平移视图]

    B2 -->|操作方式| Shift+鼠标中键

    B2 -->|效果| 平移观察视角

    

    B --> B3[缩放视图]

    B3 -->|操作方式1| 滚动鼠标中键

    B3 -->|操作方式2| Shift+B框选缩放

    

    B --> B4[快捷键ESC下面的波浪键,英文模式下]

    

    style B fill:#4b8bf5

🔴 基础操作

⭕︎ 语言的设置

⭕︎ 场景设置单位

⭕︎ 文件栏

文件 - 编辑 - 渲染 - 窗口 - 帮助

⭕︎ 工作台

比如说uv编辑器：

比如说贴图：

比如说着色器：

比如编辑多边形的工具台：

⭕︎ 快捷键操作

按住鼠标中键 -> 旋转

按住鼠标中键 + shift -> 平移

鼠标中键滚动 -> 放大缩小

⭕︎ 不同视口查看

切换四格图：

shift+a创建一个网格:

ctrl+alt+q切换成四格图，同样再按一遍就是退出四格图。

如果需要查看更多的视图，也可以按一下Tab上面的波浪键，像这样：

(按住左键长按选中某个物体，可以单独查看选中物体的视图。)

接下来看一下这些视图的小图标，具体代表什么，如果有不太会的（大家可以鼠标悬浮在图标上面，它会给出具体的提示，然后大家可以每个小图标点一下试一试，不用害怕软件会崩盘，怎么弄软件都不会出事，自己可以多研究研究，即使崩了也可以重下载，放心大胆去试）：

一个是叠加层：可以添加线框，统计信息等辅助观察。

一个是视图着色方式。

🔴 基本体

点击文件->新建->常规，之前的文件看需求看看要不要保存。

默认会出现一个立方体，我们按x键，它会提示我们要删除这个物体吗？我们先删掉这个立方体。

上面我们说过，shift+a可以弹出一个面板：

这样子，我们先创建一个立方体，网格+立方体。

游标（在游标模式下，可以任意拖动游标）：

或者在选择模式下，按住shift+右键也是可以拖动游标的。

拖动游标，然后去新建一个立方体，我们会发现物体会创建在以游标为中心的位置。所以我们去创建一个物体，首先先要把游标的位置给设好，创新物体就会直接在游标那个位置了。

物体的设置面板：

选择某些或者某个物体，按住左键进行框选即可。

有时候选择的时候会发现框选住的，有一个是红的，一个是黄的。黄的是后加选上的，可以作为移动物体这样子。

按a键就是全选。ctrl + i就是反选。shift是加选。

🔴 基本变换

纸上得来终觉浅，我们还是得多动手去尝试尝试，就算是做一个小物件小物体，前期也会觉得会有满满的成就感，用某个操作键的知识特定得做一个小小练习。

⭕︎ 对齐、捕捉、复制

选中圆锥体，然后按shift选中平面。

那么圆锥体就是选中项，然后平面就是活动项。

圆锥体相对于平面这个活动体Z轴对齐：

吸附相关：

shift+D复制选中物体。ctrl+c + ctrl+v也可以复制粘贴物体。

作为一款程序员或者建筑设计行业的一款建模软件来讲，跟我们在学校里学的photoshop一样，需要投入主动学习成本，还有一些习惯上的成本比如一些快捷键取代图形化界面是非常有必要的。

到最后再结合去做three.js或者cesium模型加载展示、材质处理和动画。

🔴 总结

当然，除了blender，还有很多优秀的流行的3d渲染软件：

• blender


• 3dx Max


• Maya


• Cinema4D


• KeyShot

一些室内设计师用的: cad、酷家乐（要钱）。

我们这篇讲的是blender和threejs的结合。就是说blender负责建模和导出，threejs负责加载和交互，去做出交互式3d网页应用。

⭕︎ 流程

⭕︎ 1、blender导出：

在blender中创建模型，然后导出格式为.glb（二进制格式，包含材质、动画等）或.gltf。

⭕︎ 2、加载模型并交互：

// 导出默认函数，用于创建城市场景

export default function createCity() {

  // 创建GLTF加载器实例，用于加载.glb/.gltf格式的3D模型

  const gltfLoader = new GLTFLoader();



  // 加载城市模型文件

  gltfLoader.load("./model/city.glb", (gltf) => {

    // 遍历模型中的所有子对象

    gltf.scene.traverse((item) => {

      // 只处理网格类型(Mesh)的对象

      if (item.type == "Mesh") {

        console.log(item); // 调试用，打印网格信息



        // 创建新的基础材质并设置为深蓝色

        const cityMaterial = new THREE.MeshBasicMaterial({

          color: new THREE.Color(0x0c0e33), // 十六进制颜色值

        });

        item.material = cityMaterial; // 应用新材质到当前网格



        // 调用自定义函数修改城市材质(函数实现未展示)

        modifyCityMaterial(item);



        // 特殊处理名为"Layerbuildings"的网格

        if (item.name == "Layerbuildings") {

          // 使用MeshLine库创建线框效果(需额外引入MeshLine库)

          const meshLine = new MeshLine(item.geometry);

          const size = item.scale.x; // 获取原始缩放值

          meshLine.mesh.scale.set(size, size, size); // 保持原始比例

          scene.add(meshLine.mesh); // 将线框添加到场景

        }

      }

    });



    // 将整个模型添加到场景中

    scene.add(gltf.scene);



    // 以下是被注释掉的可选效果，可根据需要取消注释:

    

    // 添加普通飞线效果

    const flyLine = new FlyLine();

    scene.add(flyLine.mesh);



    // 添加着色器实现的飞线(性能更好)

    const flyLineShader = new FlyLineShader();

    scene.add(flyLineShader.mesh);

    

    // 添加雷达扫描效果

    const lightRadar = new LightRadar();

    scene.add(lightRadar.mesh);



    // 添加光墙效果

    const lightWall = new LightWall();

    scene.add(lightWall.mesh);



    // 添加可交互的警告标识

    const alarmSprite = new AlarmSprite();

    scene.add(alarmSprite.mesh);

    // 绑定点击事件

    alarmSprite.onClick(function (e) {

      console.log("警告", e); // 点击时触发

    });

  });

}

原有的结论有问题，这是最新的弥补篇。如果您还没有看过，可以先看新篇提出的问题再看这个。如果您已看过，可以看下最新篇。希望不会给您带来困扰，随时接受大佬们的批评。

新篇戳这里。更崩溃！！感觉被偷家了！Element-plus组件测试的后续~

---------------------以下为原文---------------------------

进来着急的前端佬，我直接抛出结论吧！

Element-plus的组件，经过测验，如下组件存在内存泄漏。如下：

• el-carousel


• el-select + el-options


• el-descriptions


• el-tag


• el-dialog


• el-notification


• el-loading


• el-result


• el-message


• el-button


• el-tabs


• el-menu


• el-popper

验证环境为：

Vue Version: 3.5.13

Element Plus Version: 2.9.7

Browser / OS: window 10 / Edge 134.0.3124.85 (正式版本) (64 位)

Build Tool: Webpack

不排查ElementUI也存在这个问题。

好了。接下来细细聊。

前因

为什么检测到这种问题？主要因为一个项目引用了Element-plus。然后，你懂的，买的人永远都会想要最好的，然后买的人就这么一顿狂点Web页面，看见内存占用飙到老高。

于是...前端佬都懂的，来活了。

排查

一开始我是不敢怀疑这种高star开源组件的。总以为自己是写的代码有问题。

详细代码就不贴了，主要用ElDialog组件，封装成一个命令式的Dialog组件，避免频繁的使用v-modal参数。

然后，就直接怀疑上这个组件了。

经过测试，果不其然，从关闭到销毁，会导致内存猛增，因为Dialog中有各种表单组件，一打开就创建了一大堆的Element元素。

精确定位，使用了FinalizationRegistry类追踪创建的Dialog实体，代码如下：

const finalizerRegistry = new FinalizationRegistry((heldValue) => {

  console.log('Finalizing instance: ',heldValue);

});





// 在创建处监听

const heldValue = Symbol(`DialogCommandComponent_${Date.now()}`);

finalizerRegistry.register(this, heldValue);

console.log(`Constructed instance:`,heldValue);

发现一直没有Constructed instance销毁的信息输出。

随后，使用了Edge浏览器中的分离元素来打快照，步骤如下图。

经过反复的操作，然后点击主动垃圾回收，然后发现el-dialog的元素都会增加，基本确认无疑了。

但还是怀疑，会不会是Dialog中，引用的问题，导致元素一直没能销毁？所以，使用了纯纯的el-dialog来校验，同样的操作，既然如故。

然后的然后，我使用了如下的代码，去校验其它组件是否存在同样的问题。代码如下：

<template>

  <div>

    <el-button @click="fn2">Reset</el-button>

  </div>

  <el-dialog v-model="model" destroy-on-close @closed="fn1" append-to-body v-if="destroyDialogModelValue"></el-dialog>

  <el-button @click="fn0" v-if="!button" primse>Click</el-button>

  <div class="weak" v-if="!button">xxx</div>

  <el-input v-if="!button" />

  <el-border v-if="!button" />

  <el-select v-if="!button">

    <el-option>1111</el-option>

  </el-select>

  <el-switch v-if="!button" />

  <el-radio v-if="!button" />

  <el-rate v-if="!button" />

  <el-slider v-if="!button" />

  <el-time-picker v-if="!button" />

  <el-time-select v-if="!button" />

  <el-transfer v-if="!button" />

  <el-tree-select v-if="!button" />

  <el-calendar v-if="!button" />

  <el-card v-if="!button" />

  <el-carousel height="150px" v-if="!button">

    <el-carousel-item v-for="item in 4" :key="item">

      <h3 class="small justify-center" text="2xl">{{ item }}</h3>

    </el-carousel-item>

  </el-carousel>

  <el-descriptions title="User Info" v-if="!button">

    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>

  </el-descriptions>

  <el-table style="width: 100%" v-if="!button">

    <el-table-column prop="date" label="Date" width="180" />

    <el-table-column prop="name" label="Name" width="180" />

    <el-table-column prop="address" label="Address" />

  </el-table>

  <el-avatar v-if="!button" />

  <el-pagination layout="prev, pager, next" :total="50" v-if="!button" />

  <el-progress :percentage="50" v-if="!button" />

  <el-result icon="success" title="Success Tip" sub-title="Please follow the instructions" v-if="!button">

    <template #extra>

      <el-button type="primary">Back</el-button>

    </template>

  </el-result>

  <el-skeleton v-if="!button" />

  <el-tag v-if="!button" />

  <el-timeline v-if="!button" />

  <el-tree v-if="!button" />

  <el-avatar v-if="!button" />

  <el-segmented size="large" v-if="!button" />

  <el-dropdown v-if="!button">

    <span class="el-dropdown-link">

      Dropdown List

      <el-icon class="el-icon--right">

        <arrow-down />

      </el-icon>

    </span>

    <template #dropdown>

      <el-dropdown-menu>

        <el-dropdown-item>Action 1</el-dropdown-item>

        <el-dropdown-item>Action 2</el-dropdown-item>

        <el-dropdown-item>Action 3</el-dropdown-item>

        <el-dropdown-item disabled>Action 4</el-dropdown-item>

        <el-dropdown-item divided>Action 5</el-dropdown-item>

      </el-dropdown-menu>

    </template>

  </el-dropdown>

  <el-menu class="el-menu-demo" mode="horizontal" v-if="!button">

    <el-menu-item index="1">Processing Center</el-menu-item>

    <el-sub-menu index="2">

      <template #title>Workspace</template>

      <el-menu-item index="2-1">item one</el-menu-item>

      <el-menu-item index="2-2">item two</el-menu-item>

      <el-menu-item index="2-3">item three</el-menu-item>

      <el-sub-menu index="2-4">

        <template #title>item four</template>

        <el-menu-item index="2-4-1">item one</el-menu-item>

        <el-menu-item index="2-4-2">item two</el-menu-item>

        <el-menu-item index="2-4-3">item three</el-menu-item>

      </el-sub-menu>

    </el-sub-menu>

    <el-menu-item index="3" disabled>Info</el-menu-item>

    <el-menu-item index="4">Orders</el-menu-item>

  </el-menu>



  <el-steps style="max-width: 600px" active="0" finish-status="success" v-if="!button">

    <el-step title="Step 1" />

    <el-step title="Step 2" />

    <el-step title="Step 3" />

  </el-steps>



  <el-tabs class="demo-tabs" v-if="!button">

    <el-tab-pane label="User" name="first">User</el-tab-pane>

    <el-tab-pane label="Config" name="second">Config</el-tab-pane>

    <el-tab-pane label="Role" name="third">Role</el-tab-pane>

    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>

  </el-tabs>



  <el-alert title="Success alert" type="success" v-if="!button" />

  <el-drawer title="I am the title" v-if="!button">

    <span>Hi, there!</span>

  </el-drawer>



  <div v-loading="model" v-if="!button"></div>



  <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" icon-color="#626AEF"

    title="Are you sure to delete this?" v-if="!button">

    <template #reference>

      <el-button>Delete</el-button>

    </template>

  </el-popconfirm>



  <el-popover class="box-item" title="Title" content="Top Center prompts info" placement="top" v-if="!button">

    <template #reference>

      <div>top</div>

    </template>

  </el-popover>



  <el-tooltip class="box-item" effect="dark" content="Top Left prompts info" placement="top-start" v-if="!button">

    <div>top-start</div>

  </el-tooltip>

</template>

<script setup>

import { ref } from "vue";

import { ElMessage, ElMessageBox, ElNotification } from "element-plus";



const model = ref(false);

const destroyDialogModelValue = ref(false);

const button = ref(false);



function fn0() {

  model.value = true;

  destroyDialogModelValue.value = true;

  ElMessage("This is a message.");

  ElMessageBox.alert("This is a message", "Title");

  ElNotification({

    title: "Title",

    message: "This is a reminder",

  });

}

function fn1() {

  console.log("closed");

  destroyDialogModelValue.value = false;

  button.value = true;

}

function reset() {

  model.value = false

}

</script>



<style>

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

</style>

如上代码，进入页面后，点击click，然后关闭所有的弹窗。然后再次点击reset按钮，然后再次点击click，关闭所有弹窗。如此可以多操作几次。

就发现了开头的组件，都存在内存泄漏问题。

未能解决

有问题，当然首先看看别人有没有出现过。各种搜索就不说了，大掘金也搜过，在Element-plus的github仓里的Issues中找过，发现的办法基本无用。

以下是自己思考的几条路子：

结尾

还是在这里，求助大佬，看以上思路是否有错，然后跪求orz解决办法。

自己后续如果解决对应一些问题，会即时和大家分享。

Vue实现一个“液态玻璃”效果登录卡片

效果介绍

液态玻璃（Liquid Glass）是一种极具现代感的UI视觉风格，常见于高端网站和操作系统界面。它通过多层叠加、模糊、光泽、滤镜等技术，模拟出玻璃的通透、折射和高光质感。苹果的这次系统设计更新，带火了这一设计效果，本教程将带你一步步实现一个带有3D灵动倾斜交互的液态玻璃登录卡片。

实际效果：

技术原理解析

1. 多层叠加

液态玻璃效果的核心是多层视觉叠加：

• 模糊层（blur）：让背景内容变得虚化，产生玻璃的通透感。


• 色调层（tint）：为玻璃加上一层淡淡的色彩，提升质感。


• 高光层（shine）：模拟玻璃边缘的高光和内阴影，增强立体感。


• SVG滤镜：通过 SVG 的 feTurbulence 和 feDisplacementMap，让玻璃表面产生微妙的扭曲和流动感。

2. 3D灵动倾斜

通过监听鼠标在卡片上的移动，动态计算并设置 transform: perspective(...) rotateX(...) rotateY(...)，让卡片随鼠标灵动倾斜，增强交互体验。

3. 背景与环境

背景可以是渐变色，也可以是图片。玻璃卡片通过 backdrop-filter 与背景内容产生交互，形成真实的玻璃质感。

实现步骤详解

1. 结构搭建

<template>

  <div class="login-container animated-background">

    <!-- SVG滤镜库 -->

    <svg style="display: none">...</svg>

    <!-- 登录卡片 -->

    <div

      class="glass-component login-card"

      ref="tiltCard"

      @mousemove="handleMouseMove"

      @mouseleave="handleMouseLeave"

    >

      <div class="glass-effect"></div>

      <div class="glass-tint"></div>

      <div class="glass-shine"></div>

      <div class="glass-content">

        <!-- 登录表单内容 -->

      </div>

    </div>

  </div>

</template>

2. SVG滤镜实现液态扭曲

<svg style="display: none">

  <filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox">

    <feTurbulence type="fractalNoise" baseFrequency="0.001 0.005" numOctaves="1" seed="17" result="turbulence" />

    <feComponentTransfer in="turbulence" result="mapped">

      <feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5" />

      <feFuncG type="gamma" amplitude="0" exponent="1" offset="0" />

      <feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5" />

    </feComponentTransfer>

    <feGaussianBlur in="turbulence" stdDeviation="3" result="softMap" />

    <feSpecularLighting in="softMap" surfaceScale="5" specularConstant="1" specularExponent="100" lighting-color="white" result="specLight">

      <fePointLight x="-200" y="-200" z="300" />

    </feSpecularLighting>

    <feComposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage" />

    <feDisplacementMap in="SourceGraphic" in2="softMap" scale="200" xChannelSelector="R" yChannelSelector="G" />

  </filter>

</svg>

• 这段 SVG 代码必须放在页面结构内，供 CSS filter 调用。

3. 背景设置

.animated-background {

  width: 100vw;

  height: 100vh;

  background-image: url('你的背景图片路径');

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  position: fixed;

  top: 0;

  left: 0;

  z-index: -1;

}

• 建议用高质量渐变或壁纸，能更好衬托玻璃质感。

4. 卡片多层玻璃结构

.login-card {

  width: 400px;

  border-radius: 24px;

  overflow: hidden;

  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10), 0 1.5px 6px 0 rgba(0,0,0,0.08);

  background: transparent;

  position: relative;

}

.glass-effect {

  position: absolute;

  inset: 0;

  z-index: 0;

  backdrop-filter: blur(5px);

  filter: url(#glass-distortion);

  isolation: isolate;

  border-radius: 24px;

}

.glass-tint {

  position: absolute;

  inset: 0;

  z-index: 1;

  background: rgba(0, 0, 0, 0.15);

  border-radius: 24px;

}

.glass-shine {

  position: absolute;

  inset: 0;

  z-index: 2;

  border: 1px solid rgba(255, 255, 255, 0.13);

  border-radius: 24px;

  box-shadow:

    inset 1px 1px 8px 0 rgba(255, 255, 255, 0.18),

    inset -1px -1px 8px 0 rgba(255, 255, 255, 0.08);

  pointer-events: none;

}

.glass-content {

  position: relative;

  z-index: 3;

  padding: 2rem;

  color: white;

}

• 每一层都要有一致的 border-radius，才能保证圆角处无割裂。

5. 3D灵动倾斜交互

methods: {

  handleMouseMove (e) {

    const card = this.$refs.tiltCard

    const rect = card.getBoundingClientRect()

    const x = e.clientX - rect.left

    const y = e.clientY - rect.top

    const centerX = rect.width / 2

    const centerY = rect.height / 2

    const maxTilt = 18

    const rotateY = ((x - centerX) / centerX) * maxTilt

    const rotateX = -((y - centerY) / centerY) * maxTilt

    card.style.transform = `perspective(600px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.03)`

  },

  handleMouseLeave () {

    const card = this.$refs.tiltCard

    card.style.transform = 'perspective(600px) rotateX(0deg) rotateY(0deg) scale(1)'

  }

}

• 鼠标移动时，卡片会根据指针位置灵动倾斜。


• 鼠标移出时，卡片平滑恢复。

6. 细节优化

• 阴影柔和：避免黑色边缘过重，提升高级感。


• 高光线条：用低透明度白色边框和内阴影，模拟玻璃高光。


• 所有层的圆角一致：防止割裂。


• 表单输入框：用半透明背景和模糊，保持整体风格统一。

7.完整代码

<template>

  <div class="login-container animated-background">

    <!-- SVG滤镜库 -->

    <svg style="display: none">

      <filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox">

        <feTurbulence type="fractalNoise" baseFrequency="0.001 0.005" numOctaves="1" seed="17" result="turbulence" />

        <feComponentTransfer in="turbulence" result="mapped">

          <feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5" />

          <feFuncG type="gamma" amplitude="0" exponent="1" offset="0" />

          <feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5" />

        </feComponentTransfer>

        <feGaussianBlur in="turbulence" stdDeviation="3" result="softMap" />

        <feSpecularLighting in="softMap" surfaceScale="5" specularConstant="1" specularExponent="100" lighting-color="white" result="specLight">

          <fePointLight x="-200" y="-200" z="300" />

        </feSpecularLighting>

        <feComposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage" />

        <feDisplacementMap in="SourceGraphic" in2="softMap" scale="200" xChannelSelector="R" yChannelSelector="G" />

      </filter>

    </svg>



    <!-- 登录卡片 -->

    <div

      class="glass-component login-card"

      ref="tiltCard"

      @mousemove="handleMouseMove"

      @mouseleave="handleMouseLeave"

    >

      <div class="glass-effect"></div>

      <div class="glass-tint"></div>

      <div class="glass-shine"></div>

      <div class="glass-content">

        <h2 class="login-title">欢迎登录</h2>

        <form class="login-form">

          <div class="form-group">

            <input type="text" placeholder="用户名" class="glass-input">

          </div>

          <div class="form-group">

            <input type="password" placeholder="密码" class="glass-input">

          </div>

          <button type="submit" class="glass-button">登录</button>

        </form>

      </div>

    </div>

  </div>

</template>



<script>

export default {

  name: 'LiquidGlass',

  data () {

    return {

      // 可以添加需要的数据

    }

  },

  methods: {

    handleMouseMove (e) {

      const card = this.$refs.tiltCard

      const rect = card.getBoundingClientRect()

      const x = e.clientX - rect.left

      const y = e.clientY - rect.top

      const centerX = rect.width / 2

      const centerY = rect.height / 2

      // 最大旋转角度

      const maxTilt = 18

      const rotateY = ((x - centerX) / centerX) * maxTilt

      const rotateX = -((y - centerY) / centerY) * maxTilt

      card.style.transform = `perspective(600px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.03)`

    },

    handleMouseLeave () {

      const card = this.$refs.tiltCard

      card.style.transform = 'perspective(600px) rotateX(0deg) rotateY(0deg) scale(1)'

    }

  }

}

</script>



<style lang="scss" scoped>

.login-container {

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  overflow: hidden;

}



.animated-background {

  width: 100%;

  height: 100%;

  background-image: url('../../assets/macwallpaper.jpg');

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

}



.login-card {

  width: 400px;

  position: relative;

  border-radius: 24px;

  overflow: hidden;

  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10), 0 1.5px 6px 0 rgba(0,0,0,0.08);

  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.6);

  cursor: pointer;

  background: transparent;

}



.glass-effect {

  position: absolute;

  inset: 0;

  z-index: 0;

  backdrop-filter: blur(5px);

  filter: url(#glass-distortion);

  isolation: isolate;

  border-radius: 24px;

}



.glass-tint {

  position: absolute;

  inset: 0;

  z-index: 1;

  background: rgba(0, 0, 0, 0.15);

  border-radius: 24px;

}



.glass-shine {

  position: absolute;

  inset: 0;

  z-index: 2;

  border: 1px solid rgba(255, 255, 255, 0.13);

  border-radius: 24px;

  box-shadow:

    inset 1px 1px 8px 0 rgba(255, 255, 255, 0.18),

    inset -1px -1px 8px 0 rgba(255, 255, 255, 0.08);

  pointer-events: none;

}



.glass-content {

  position: relative;

  z-index: 3;

  padding: 2rem;

  color: white;

}



.login-title {

  text-align: center;

  color: #fff;

  margin-bottom: 2rem;

  font-size: 2rem;

  font-weight: 600;

  text-shadow: 0 1px 3px rgba(0,0,0,0.2);

}



.form-group {

  margin-bottom: 1.5rem;

}



.glass-input {

  width: 90%;

  padding: 12px 20px;

  border: none;

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.1);

  color: #fff;

  font-size: 1rem;

  backdrop-filter: blur(5px);

  transition: all 0.3s ease;



  &::placeholder {

    color: rgba(255, 255, 255, 0.7);

  }



  &:focus {

    outline: none;

    background: rgba(255, 255, 255, 0.2);

    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);

  }

}



.glass-button {

  width: 100%;

  padding: 12px;

  border: none;

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.2);

  color: #fff;

  font-size: 1rem;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.3s ease;

  backdrop-filter: blur(5px);

  position: relative;

  overflow: hidden;



  &:hover {

    background: rgba(255, 255, 255, 0.3);

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);

  }



  &:active {

    transform: translateY(0);

  }

}



// 添加点击波纹效果

.click-gradient {

  position: absolute;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(180,180,255,0.2) 40%, rgba(100,100,255,0.1) 70%, rgba(50,50,255,0) 100%);

  transform: translate(-50%, -50%) scale(0);

  opacity: 0;

  pointer-events: none;

  z-index: 4;

}



.glass-component.clicked .click-gradient {

  animation: gradient-ripple 0.6s ease-out;

}



@keyframes gradient-ripple {

  0% {

    transform: translate(-50%, -50%) scale(0);

    opacity: 1;

  }

  100% {

    transform: translate(-50%, -50%) scale(3);

    opacity: 0;

  }

}



.glass-component {

  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: transform;

}

</style>

常见问题与优化建议

技术要点总结

• SVG滤镜：让玻璃表面有微妙的流动和扭曲感。


• backdrop-filter: blur：实现背景虚化。


• 多层叠加：色调、高光、阴影共同营造真实玻璃质感。


• 3D transform：提升交互体验。


• 细节打磨：阴影、边框、圆角、色彩都要精细调整。

结语

液态玻璃效果是现代前端视觉的代表之一。只要理解其原理，分层实现、细致调优，任何人都能做出媲美 macOS、Win11 的高端玻璃UI。希望本教程能帮助你掌握这项技术，做出属于自己的酷炫界面！

前言

你说，为什么❓尤雨溪搞响应式，他为什么要换掉Object.defineProperty呢❓

proxy什么来头❓

有一次👀看他直播，说去面试人家问他原型链，他不会，GG了面试黄了，你说他是不是无中生有暗度陈仓凭空想象凭空捏造new Proxy来换掉Object.defineProperty的呢？

还真不是，尤雨溪的响应式，我们暂且叫成插一脚吧👇，请听我细细道来👂

在前端开发中，响应式系统是现代框架的核心特性。无论是 Vue 还是 React，它们都需要实现一个基本功能：当数据变化时，自动更新相关的视图。用通俗的话说，就是要在数据被读取或修改时"插一脚"，去执行一些额外的操作（比如界面刷新、计算属性重新计算等）。

// 读取属性时

obj.a; // 需要知道这个属性被读取了



// 修改属性时

obj.a = 3; // 需要知道这个属性被修改了

但原生 JavaScript 对象不会告诉我们这些操作的发生。那么，尤雨溪是如何实现这种"插一脚"的能力的呢？

正文

Vue 2 的"插一脚"方案 - Object.defineProperty

基本实现原理

Vue 2 使用的是 ES5 的 Object.defineProperty API。这个 API 允许我们定义或修改对象的属性，并为其添加 getter 和 setter。

const obj = { a: 1 };



let v = obj.a;

Object.defineProperty(obj, 'a', {

  get() {

    console.log('读取 a'); // 插一脚：知道属性被读取了

    return v;

  },

  set(val) {

    console.log('更新 a'); // 插一脚：知道属性被修改了

    v = val;

  }

});



obj.a;     // 输出"读取 a"

obj.a = 3; // 输出"更新 a"

完整对象监听

为了让整个对象可响应，Vue 2 需要遍历对象的所有属性：

function observe(obj) {

  for (const k in obj) {

    let v = obj[k];

    Object.defineProperty(obj, k, {

      get() {

        console.log('读取', k);

        return v;

      },

      set(val) {

        console.log('更新', k);

        v = val;

      }

    });

  }

}

处理嵌套对象

对于嵌套对象，还需要递归地进行观察：

function _isObject(v) {

  return typeof v === 'object' && v !== null;

}



function observe(obj) {

  for (const k in obj) {

    let v = obj[k];

    if (_isObject(v)) {

      observe(v); // 递归处理嵌套对象

    }

    Object.defineProperty(obj, k, {

      get() {

        console.log('读取', k);

        return v;

      },

      set(val) {

        console.log('更新', k);

        v = val;

      }

    });

  }

}

Vue 2 方案的两大缺陷

缺陷一：效率问题

在这种模式下，他就必须要去遍历这个对象里边的每一个属性...这是第一个缺陷：必须遍历对象的所有属性，对于大型对象或深层嵌套对象，这会带来性能开销。

缺陷二：新增属性问题

无法检测到对象属性的添加或删除：

obj.d = 2; // 这个操作不会被监听到

因为一开始遍历的时候没有这个属性，后续添加的属性不会被自动观察。

Vue 3 的"插一脚"方案 - Proxy

基本实现原理

Vue 3 使用 ES6 的 Proxy 来重构响应式系统。Proxy 可以拦截整个对象的操作，而不是单个属性。

const obj = { a: 1 };



const proxy = new Proxy(obj, {

  get(target, k) {

    console.log('读取', k); // 插一脚

    return target[k];

  },

  set(target, k, val) {

    if (target[k] === val) return true;

    console.log('更新', k); // 插一脚

    target[k] = val;

    return true;

  }

});



proxy.a;     // 输出"读取 a"

proxy.a = 3; // 输出"更新 a"

proxy.d;     // 输出"读取 d" - 连不存在的属性也能监听到！

完整实现

function _isObject(v) {

  return typeof v === 'object' && v !== null;

}



function reactive(obj) {

  const proxy = new Proxy(obj, {

    get(target, k) {

      console.log('读取', k);

      const v = target[k];

      if (_isObject(v)) {

        return reactive(v); // 惰性递归

      }

      return v;

    },

    set(target, k, val) {

      if (target[k] === val) return true;

      console.log('更新', k);

      target[k] = val;

      return true;

    }

  });

  return proxy;

}

Proxy 的优势

"proxy 它解决了什么问题？两个问题。

第一个问题不需要深度遍历了，因为它不再监听属性了，而是监听的什么？整个对象。

同时也由于它监听了整个对象，就解决了第二个问题：能监听这个对象的所有操作，包括你去读写一些不存在的属性，都能监听到。"

原理对比与源码解析

原理对比

源码实现差异

Vue 2 实现：

• 在 src/core/observer 目录下


• 初始化时递归遍历整个对象


• 需要特殊处理数组方法

Vue 3 实现：

• 独立的 @vue/reactivity 包


• 使用 Proxy 实现基础响应式


• 惰性处理嵌套对象


• 更简洁的 API 设计

为什么 Proxy 是更好的选择？

总结

需显式操作（defineProperty）-> 声明式编程（Proxy）

局部监听（属性级别）-> 全局拦截（对象级别）。

从 Object.defineProperty 到 Proxy 的转变，不仅是 API 的升级，更是前端框架设计理念的进步。Vue 3 的响应式系统通过 Proxy 实现了更高效、更全面的数据监听。

作为一名后端开发工程师，当你面对复杂的业务流程时，是否常感到逻辑混乱、边界不清？学会状态机设计，让你的代码优雅如诗！

引言：为什么需要状态机？

在后台系统开发中，我们经常需要处理对象的状态流转问题：订单从"待支付"到"已支付"再到"已发货"，工单系统从"打开"到"处理中"再到"解决"，这些场景都涉及状态管理。

如果不使用状态机设计，我们可能会写出这样的面条式代码：

func HandleOrderEvent(order *Order, event Event) error {

    if order.Status == "待支付" {

        if event.Type == "支付成功" {

            order.Status = "已支付"

            // 执行支付成功逻辑...

        } else if event.Type == "取消订单" {

            order.Status = "已取消"

            // 执行取消逻辑...

        } else {

            return errors.New("非法事件")

        }

    } else if order.Status == "已支付" {

        if event.Type == "发货" {

            order.Status = "已发货"

            // 执行发货逻辑...

        }

        // 更多else if...

    }

    // 更多else if...

}

这种代码存在几个致命问题：

状态机正是解决这类问题的银弹！

状态机设计核心概念

状态机三要素

状态机的类型

graph LR

    A[待支付] -->|支付成功| B[已支付]

    B -->|发货| C[已发货]

    B -->|申请退款| D[退款中]

    A -->|取消订单| E[已取消]

    D -->|退款成功| E

    D -->|退款失败| B

Go实现状态机实战

基本结构定义

package main



import "fmt"



// 定义状态类型

type State string



// 定义事件类型

type Event string



// 状态转移函数类型

type TransitionHandler func() error



// 状态转移定义

type Transition struct {

    From   State

    Event  Event

    To     State

    Handle TransitionHandler

}



// 状态机定义

type StateMachine struct {

    Current     State

    transitions []Transition

}



// 注册状态转移规则

func (sm *StateMachine) AddTransition(from State, event Event, to State, handler TransitionHandler) {

    sm.transitions = append(sm.transitions, Transition{

        From:   from,

        Event:  event,

        To:     to,

        Handle: handler,

    })

}



// 处理事件

func (sm *StateMachine) Trigger(event Event) error {

    for _, trans := range sm.transitions {

        if trans.From == sm.Current && trans.Event == event {

            // 执行处理函数

            if err := trans.Handle(); err != nil {

                return err

            }

            // 更新状态

            sm.Current = trans.To

            return nil

        }

    }

    return fmt.Errorf("非法事件[%s]或当前状态[%s]不支持", event, sm.Current)

}

订单状态机示例

// 订单状态定义

const (

    StatePending  State = "待支付"

    StatePaid     State = "已支付"

    StateShipped  State = "已发货"

    StateCanceled State = "已取消"

)



// 事件定义

const (

    EventPaySuccess  Event = "支付成功"

    EventCancel      Event = "取消订单"

    EventShip        Event = "发货"

)



func main() {

    // 创建状态机

    sm := &StateMachine{Current: StatePending}

    

    // 注册状态转移

    sm.AddTransition(StatePending, EventPaySuccess, StatePaid, func() error {

        fmt.Println("执行支付成功处理逻辑...")

        return nil // 实际业务中可能有错误处理

    })

    

    sm.AddTransition(StatePending, EventCancel, StateCanceled, func() error {

        fmt.Println("执行订单取消逻辑...")

        return nil

    })

    

    sm.AddTransition(StatePaid, EventShip, StateShipped, func() error {

        fmt.Println("执行发货逻辑...")

        return nil

    })

    

    sm.AddTransition(StatePaid, EventCancel, StateCanceled, func() error {

        fmt.Println("执行已支付状态的取消逻辑...")

        return nil

    })

    

    // 执行事件测试

    fmt.Println("当前状态:", sm.Current)

    _ = sm.Trigger(EventPaySuccess) // 支付成功

    fmt.Println("当前状态:", sm.Current)

    _ = sm.Trigger(EventShip) // 发货

    fmt.Println("当前状态:", sm.Current)

    

    // 测试非法转移

    err := sm.Trigger(EventCancel)

    fmt.Println("尝试取消:", err) // 非法操作

}

输出结果：

当前状态: 待支付

执行支付成功处理逻辑...

当前状态: 已支付

执行发货逻辑...

当前状态: 已发货

尝试取消: 非法事件[取消订单]或当前状态[已发货]不支持

扩展：表驱动状态机

上面的实现足够清晰，但存在性能问题——每次触发事件都需要遍历转移表。我们优化为更高效的版本：

type StateMachineV2 struct {

    Current       State

    transitionMap map[State]map[Event]*Transition

}



func (sm *StateMachineV2) AddTransition(from State, event Event, to State, handler TransitionHandler) {

    if sm.transitionMap == nil {

        sm.transitionMap = make(map[State]map[Event]*Transition)

    }

    if _, exists := sm.transitionMap[from]; !exists {

        sm.transitionMap[from] = make(map[Event]*Transition)

    }

    sm.transitionMap[from][event] = &Transition{

        From:   from,

        Event:  event,

        To:     to,

        Handle: handler,

    }

}



func (sm *StateMachineV2) Trigger(event Event) error {

    if events, exists := sm.transitionMap[sm.Current]; exists {

        if trans, exists := events[event]; exists {

            if err := trans.Handle(); err != nil {

                return err

            }

            sm.Current = trans.To

            return nil

        }

    }

    return fmt.Errorf("非法事件[%s]或当前状态[%s]不支持", event, sm.Current)

}

进阶技巧：状态机实践指南

状态转移图可视化

绘制状态转移图，与代码实现保持同步：

状态模式的优雅实现

使用Go的接口特性实现面向对象的状态模式：

type OrderState interface {

    Pay() error

    Cancel() error

    Ship() error

    // 其他操作方法...

}



type pendingState struct{}



func (s *pendingState) Pay() error {

    fmt.Println("执行支付成功处理逻辑...")

    return nil

}



func (s *pendingState) Cancel() error {

    fmt.Println("执行待支付状态取消逻辑...")

    return nil

}



func (s *pendingState) Ship() error {

    return errors.New("当前状态不能发货")

}



// 其他状态实现...



type Order struct {

    state OrderState

}



func (o *Order) ChangeState(state OrderState) {

    o.state = state

}



func (o *Order) Pay() error {

    return o.state.Pay()

}



// 其他方法...

状态机的持久化

如何在数据库中存储状态机？永远只存储状态，而不是存储状态机逻辑！

数据库表设计示例：

状态恢复代码实现：

type Order struct {

    ID     int

    Status State

}



func RecoverOrderStateMachine(order Order) *StateMachine {

    sm := CreateStateMachine() // 创建初始状态机

    sm.Current = order.Status  // 恢复状态

    return sm

}

真实案例：电商订单系统

复杂状态机设计

处理并发操作

var mutex sync.Mutex



func (sm *StateMachine) SafeTrigger(event Event) error {

    mutex.Lock()

    defer mutex.Unlock()

    return sm.Trigger(event)

}



// 使用channel同步

func (sm *StateMachine) AsyncTrigger(event Event) error {

    eventChan := make(chan error)

    go func() {

        mutex.Lock()

        defer mutex.Unlock()

        eventChan <- sm.Trigger(event)

    }()

    return <-eventChan

}

避免状态机设计的反模式

监控状态转移示例：

func (sm *StateMachine) Trigger(event Event) error {

    startTime := time.Now()

    defer func() {

        log.Printf("状态转移监控: %s->%s (%s) 耗时: %v", 

            oldState, sm.Current, event, time.Since(startTime))

    }()

    // 正常处理逻辑...

}

结语：状态机的无限可能

状态机不只是解决业务逻辑的工具，它更是一种思维方式。通过今天的学习，你应该掌握了：

当你在设计下一个后端系统时，先问自己三个问题：