大家好😁。

上个月 Code Review，我拦下了一个新人的代码。

他写了一个转账功能，前端做了极其严密的校验：

• 金额必须是数字。


• 金额必须大于 0。


• 余额不足时，提交按钮是 disabled 的。


• 甚至还写了复杂的正则表达式，防止输入负号。

他自信满满地跟我说：老大，放心吧，我前端卡得死死的，用户绝对传不了非法数据。

我笑了笑🤣，没看他的后端代码，直接打开终端，敲了一行命令。

0.5 秒后，他的数据库里多了一笔“-10000”的转账记录，余额瞬间暴涨！

他看着屏幕，目瞪口呆：这……你是怎么做到的？我按钮明明置灰了啊！

今天，我就来揭秘这个所有后端（和全栈）工程师必须铭记的第一铁律：

前端验证，在黑客眼里，只是个小case🤔。

我是如何羞辱前端验证的

假设我们有一个购物网站，前端有一个简单的购买表单。

前端逻辑（看似完美）：

// Front-end code

function submitOrder(price, quantity) {

  // 1. 校验价格不能被篡改

  if (price !== 999) {

    alert("价格异常！");

    return;

  }

  // 2. 校验数量必须为正数

  if (quantity <= 0) {

    alert("数量必须大于0！");

    return;

  }

  

  // 发送请求

  api.post('/buy', { price, quantity });

}

你看，用户在浏览器里确实没法作恶。他改不了价格，也填不了负数。

但是黑客，从来不用浏览器点你的按钮。

第一步：打开DevTools Network 面板，正常点一次购买按钮。捕获到了这个请求。

第二步：请求上右键 -> 复制 -> cURL 格式复制。

这一步，我已经拿到了你发送请求的所有密钥：URL、Headers、Cookies、以及那个看似合法的 Data。

第三步：打开终端（Terminal），粘贴刚才复制的命令。但是，我并没有直接回车。

我修改了 --data-raw 里的参数：

• 把 "price": 999 改成了 "price": 0.01


• 或者把 "quantity": 1 改成了 "quantity": -100

# 经过魔改后的命令

curl 'http://localhost:3000/user/buy' \

  -H 'Cookie: session_id=...' \

  -H 'Content-Type: application/json' \

  --data-raw '{"price": 0.01, "quantity": 10}' \

  --compressed

回车！

服务器返回：{ "status": "success", "msg": ok！" }

恭喜你，你的前端验证毫发无损，但你的数据库已经被我击穿了。 我用 1 分钱买了 10 个商品，或者通过负数数量，反向刷了库存。

为什么前端验证, 防不了小人🤔

很多新人最大的误区，就是认为用户只能通过我的 UI 来访问我的服务器。

错！大错特错！

Web 的本质是 HTTP 协议。

HTTP 协议是无状态的、公开的。任何能够发送 HTTP 请求的客户端，都是你的用户。

• Chrome 是客户端。


• cURL 是客户端。


• Postman 是客户端。


• Python 的 requests 脚本也是客户端。


• node 的 http 脚本也是客户端

前端代码运行在用户的电脑上。

这意味着，用户拥有对前端代码的绝对控制权。

• 他可以禁用 JS。


• 他可以在 Console 里重写你的校验函数。


• 他可以拦截请求（用 Charles/Fiddler）并修改数据。


• 他甚至可以完全抛弃浏览器，直接用脚本轰炸你的 API。

所以，前端验证的唯一作用，是提升用户体验 （比如提示用户格式不对😂），而不是提供安全性😖。

后端该如何防御？（不要裸奔）

既然前端不可信，后端（或 BFF 层）就必须假设所有发过来的数据都是有毒的。

1. 永远不要相信 Payload 里的关键数据

前端只传 productId。后端拿到 ID 后，去数据库里查这个商品到底多少钱。永远以数据库为准。

2. 使用 Schema 校验库（Zod / Joi / class-validator）

不要在 Controller 里写一堆 if (req.body.age < 0)。

使用专业的 Schema 校验库，定义好数据的规则。

TypeScript代码👇：

// 使用 Zod 定义后端校验规则

const OrderSchema = z.object({

  productId: z.string(),

  // 强制要求 quantity 必须是正整数，拦截 -100 这种攻击

  quantity: z.number().int().positive(), 

  // 注意：这里根本不接收 price 字段，防止被注入

});



// 如果校验失败，直接抛出 400 错误，逻辑根本进不去

const data = OrderSchema.parse(req.body); 

3. 权限与状态校验

不要只看数据格式对不对，还要看人对不对。

• 这个用户有权限买这个商品吗？


• 这个订单现在的状态允许支付吗？（防止重复支付攻击🤔）

还有一种更高级的攻击：Replay Attack（重放攻击）

你以为校验了数据就安全了？

如果我拦截了你一次领优惠券的请求，虽然我改不了数据，但我可以用 cURL 连续运行 1000 次这个命令。

# 一个简单的循环，瞬间刷爆你的接口

for i in {1..1000}; do curl ... ; done

如果你的后端没有做幂等性（Idempotency）校验或频率限制（Rate Limiting） ，那我瞬间就能领走 1000 张优惠券。

防御手段👇：

• Redis 计数器：限制每个 IP/用户 每秒只能请求几次。


• 唯一 Request ID：对于关键操作，要求前端生成一个 UUID，后端处理完后记录下来。如果同一个 UUID 再次请求，直接拒绝。

对于前端安全，所有的输入都是可疑的🤔

作为全栈或后端开发者，当你写 API 时，请忘掉你那个漂亮的前端界面。

你的脑海里应该只有一幅画面：

屏幕对面，不是一个点鼠标的用户，而是一个正在敲 cURL 命令的黑客。

只有这样，你的代码才算真正安全了😒。

长久以来，"用 Vue 3 写真正的原生 App" 一直是块短板。

uni-app 虽然"一套代码多端运行"，但性能瓶颈、厂商锁仓、原生能力羸弱的问题常被开发者诟病。

整个 Vue 生态始终缺少一个能与 React Native 并肩的"真·原生"跨平台方案

直到 NativeScript-Vue 3 的横空出世，并被 尤雨溪 亲自点赞。

为什么是时候说 goodbye 了？

"我们只是想要一个 Vue 语法 + 真原生渲染 + 社区插件开箱即用 的解决方案。"

—— 这，正是 NativeScript-Vue 给出的答案。

尤雨溪推特背书

2025-10-08，Evan You 转发 NativeScript 官方推文：

"Try Vite + NativeScript-Vue today — HMR, native APIs, live reload."

配图是一段 <script setup> + TypeScript 的实战 Demo，意味着：

• 真正的 Vue 3 语法（Composition API）


• Vite 秒级热重载


• 直接调用 iOS / Android 原生 API

获创始人的公开推荐，无疑给社区打了一剂强心针。

NativeScript-Vue 是什么？

一句话：Vue 的自定义渲染器 + NativeScript 原生引擎

• 运行时 没有 WebView，JS 在 V8 / JavaScriptCore 中执行


• <template> 标签 → 原生 UILabel / android.widget.TextView


• 支持 NPM、CocoaPods、Maven/Gradle 全部原生依赖


• 与 React Native 同级别的性能，却拥有 Vue 完整开发体验

5 分钟极速上手

1. 环境配置（一次过）

# Node ≥ 18

npm i -g nativescript

ns doctor                # 按提示安装 JDK / Android Studio / Xcode

# 全部绿灯即可

2. 创建项目

ns create myApp \

  --template @nativescript-vue/template-blank-vue3@latest

cd myApp

模板已集成 Vite + Vue3 + TS + ESLint

3. 运行 & 调试

# 真机 / 模拟器随你选

ns run ios

ns run android

保存文件 → 毫秒级 HMR，console.log 直接输出到终端。

4. 目录速览

myApp/

├─ app/

│  ├─ components/          // 单文件 .vue

│  ├─ app.ts               // createApp()

│  └─ stores/              // Pinia 状态库

├─ App_Resources/

└─ vite.config.ts          // 已配置 nativescript-vue-vite-plugin

5. 打包上线

ns build android --release   # 生成 .aab / .apk

ns build ios --release       # 生成 .ipa

签名、渠道、自动版本号——标准原生流程，CI 友好。

Vue 3 生态插件兼容性一览

检测小技巧：

npm i xxx

grep -r "document\|window\|HTMLElement" node_modules/xxx || echo "大概率安全"

调试神器：Vue DevTools 支持

NativeScript-Vue 3 已提供 官方 DevTools 插件

• 组件树、Props、Events、Pinia 状态 实时查看


• 沿用桌面端调试习惯，无需额外学习成本

👉 配置指南：https://nativescript-vue.org/docs/essentials/vue-devtools

插件生态 & 原生能力

• 700+ NativeScript 官方插件
  
  ns plugin add @nativescript/camera | bluetooth | sqlite...


• iOS/Android SDK 直接引入
  
  CocoaPods / Maven 一行配置即可：

 // 调用原生 CoreBluetooth

 import { CBCentralManager } from '@nativescript/core'

• 自定义 View & 动画
  
  注册即可在 <template> 使用，与 React Native 造组件体验一致。

结语：这一次，Vue 开发者不再低人一等

React Native 有 Facebook 撑腰，Flutter 有 Google 背书，

现在 Vue 3 也有了自己的 真·原生跨平台答案 —— NativeScript-Vue。

它让 Vue 语法第一次 完整、无损、高性能 地跑在 iOS & Android 上，

并获得 尤雨溪 公开点赞与 Vite 官方生态加持。

弃用 uni-app，拥抱 NativeScript-Vue，

让 性能、原生能力、工程化 三者兼得，

用你最爱的 .vue 文件，写最硬核的移动应用！

🔖 一键直达资源

• 官网 & 文档：https://nativescript-vue.org


• 插件兼容列表：https://nativescript-vue.org/docs/essentials/vue-plugins


• DevTools 配置：https://nativescript-vue.org/docs/essentials/vue-devtools


• 环境安装指南：https://docs.nativescript.org/setup/

在前端开发中，网页截图是个常用功能。从前，html2canvas 是大家的常客，但随着网页越来越复杂，它的性能问题也逐渐暴露，速度慢、占资源，用户体验不尽如人意。

好在，现在有了 SnapDOM，一款性能超棒、还原度超高的截图新秀，能完美替代 html2canvas，让截图不再是麻烦事。

什么是 SnapDOM

SnapDOM 就是一个专门用来给网页元素截图的工具。

它能把 HTML 元素快速又准确地存成各种图片格式，像 SVG、PNG、JPG、WebP 等等，还支持导出为 Canvas 元素。

它最厉害的地方在于，能把网页上的各种复杂元素，比如 CSS 样式、伪元素、Shadow DOM、内嵌字体、背景图片，甚至是动态效果的当前状态，都原原本本地截下来，跟直接看网页没啥两样。

SnapDOM 优势

快得飞起

测试数据显示，在不同场景下，SnapDOM 都把 html2canvas 和 dom-to-image 这俩老前辈远远甩在身后。

尤其在超大元素（4000×2000）截图时，速度是 html2canvas 的 93.31 倍，比 dom-to-image 快了 133.12 倍。这速度，简直就像坐火箭。

还原度超高

SnapDOM 截图出来的效果，跟在网页上看到的一模一样。

各种复杂的 CSS 样式、伪元素、Shadow DOM、内嵌字体、背景图片，还有动态效果的当前状态，都能精准还原。

无论是简单的元素，还是复杂的网页布局，它都能轻松拿捏。

格式任你选

不管你是想要矢量图 SVG，还是常用的 PNG、JPG，或者现代化的 WebP，又或者是需要进一步处理的 Canvas 元素，SnapDOM 都能满足你。

多种格式，任你挑选，适配各种需求。

三、怎么用 SnapDOM

安装

SnapDOM 的安装超简单，有好几种方式：

用 NPM 或 Yarn：在命令行里输

# npm

npm i @zumer/snapdom



# yarn

yarn add @zumer/snapdom

就能装好。

用 CDN 在 HTML 文件里加一行:

<script src="https://unpkg.com/@zumer/snapdom@latest/dist/snapdom.min.js"></script>

直接就能用。

要是项目里用的是 ES Module:

import { snapdom } from '@zumer/snapdom

基础用法示例

一键截图

const card = document.querySelector('.user-card');

const image = await snapdom.toPng(card);

document.body.appendChild(image);

这段代码就是找个元素，然后直接截成 PNG 图片，再把图片加到页面上。简单粗暴，一步到位。

高级配置

const element = document.querySelector('.chart-container');

const capture = await snapdom(element, {

    scale: 2,

    backgroundColor: '#fff',

    embedFonts: true,

    compress: true

});

const png = await capture.toPng();

const jpg = await capture.toJpg({ quality: 0.9 });

await capture.download({

    format: 'png',

    filename: 'chart-report-2024'

});

这儿可以对截图进行各种配置。比如 scale 能调整清晰度，backgroundColor 能设置背景色，embedFonts 可以内嵌字体，compress 能压缩优化。配置好后，还能把截图存成不同格式，或者直接下载到本地。

和其他库比咋样

和 html2canvas、dom-to-image 比起来，SnapDOM 的优势很明显：

五、用的时候注意点

用 SnapDOM 时，有几点得注意：

跨域资源

要是截图里有外部图片等跨域资源，得确保这些资源支持 CORS，不然截不出来。

iframe 限制

SnapDOM 不能截 iframe 内容，这是浏览器的安全限制，没办法。

Safari 浏览器兼容性

在 Safari 里用 WebP 格式时，会自动变成 PNG。

大型页面截图

截超大页面时，建议分块截，不然可能会内存溢出。

六、SnapDOM 能干啥及代码示例

社交分享

async function shareAchievement() {

    const card = document.querySelector('.achievement-card');

    const image = await snapdom.toPng(card, { scale: 2 });

    navigator.share({

        files: [new File([await snapdom.toBlob(card)], 'achievement.png')],

        title: '我获得了新成就！'

    });

}

报表导出

async function exportReport() {

    const reportSection = document.querySelector('.report-section');

    await preCache(reportSection);

    await snapdom.download(reportSection, {

        format: 'png',

        scale: 2,

        filename: `report-${new Date().toISOString().split('T')[0]}`

    });

}

海报导出

async function generatePoster(productData) {

    document.querySelector('.poster-title').textContent = productData.name;

    document.querySelector('.poster-price').textContent = `¥${productData.price}`;

    document.querySelector('.poster-image').src = productData.image;

    await new Promise((resolve) => setTimeout(resolve, 100));

    const poster = document.querySelector('.poster-container');

    const blob = await snapdom.toBlob(poster, { scale: 3 });

    return blob;

}

写在最后

SnapDOM 就是这么一款简单、快速、准确，还零依赖的网页截图神器。

无论是社交分享、报表导出、设计保存，还是营销推广，它都能轻松搞定。

而且它是免费开源的，背后还有活跃的社区支持。要是你还在为网页截图的事儿发愁，赶紧试试 SnapDOM 吧。

要是你在用 SnapDOM 的过程中有啥疑问，或者碰上啥问题，可以去下面这些地方找答案：

• 项目地址 ：github.com/zumerlab/sn…


• 在线演示 ：zumerlab.github.io/snapdom/


• 详细文档 ：github.com/zumerlab/sn…

GET /users/123       获取 ID 为 123 的用户

POST /users         创建新用户

PUT /users/123       更新用户 123

DELETE /users/123   删除用户 123

GET /orders

Header: Authorization: Bearer xxx

{

 "id": 123,

 "name": "小阿巴",

 "email": "aba@codefather.cn"

}

POST /orders/123/payments

你直接听懵了：阿巴阿巴，这么多约束，我必须全遵守吗？

鱼皮：可以不用，RESTful 只是一种 API 的 建议风格。在实际工作中，很少有 API 能完美符合所有约束，大家可以灵活调整，甚至什么接口都用 POST + 动词 一把梭。只要团队达成一致、用得舒服就行。

就像刚才那个支付订单的例子，POST /orders/123/payments 虽然符合 RESTful 规范，但有同学会觉得 POST /orders/123/pay 更直观易懂，也没问题。

不过现阶段，我建议你先养成遵循 RESTful 的好习惯，等积累了经验，再根据实际情况灵活调整。

怎么快速实现 RESTful API？

你：呜呜，但我只是个小阿巴，背不下来这些写法，我怕自己写着写着就不规范了，怎么办啊？

鱼皮：别担心，有很多方法可以帮你快速实现和检查 RESTful API。

1、使用开发框架

几乎所有主流开发框架都支持 RESTful API 的开发，它们能帮你自动处理很多细节，比如：

• Java 的 Spring Boot：通过 @GetMapping("/users")、@PostMapping("/users") 等注解，你只需要写一行代码就能定义符合 RESTful 风格的路由。框架会自动把对象转成 JSON、设置正确的 HTTP 状态码，你都不用操心。
• Python 的 Django REST Framework：你只需要定义一个数据模型（比如 User 类），框架就能自动生成 GET /users、POST /users、PUT /users/123、DELETE /users/123 这一整套 RESTful 接口，大幅减少代码量。
• Go 的 Gin ：专门为 RESTful API 设计，语法非常简洁。比如 router.GET("/users/:id", getUser) 就能绑定一个 GET 请求，自动从 URL 中提取 ID 参数，还能通过路由分组把 /api/v1/users 和 /api/v2/users 轻松分开管理。

这些框架虽然不强制你遵循 RESTful，但用它们的特性，开发起来既轻松又规范，帮你省掉大量重复代码。

2、使用 IDE 插件

比如 IDEA 的 RESTful Toolkit 插件，可以快速查看和测试接口。

还有 VSCode 的 REST Client 插件，可以直接在编辑器里测试接口。

3、利用 AI 生成

RESTful 有明确的设计规范，而 AI 最擅长处理这种有章可循的东西！

比如直接让 Cursor 帮你用 Spring Boot 写一个用户管理的 RESTful API：

你只需要阿巴阿巴几下，它就能生成规范的代码。

4、生成接口文档

写完接口后，还可以用 Swagger 这类工具自动生成漂亮的接口文档，直接甩给前端，对方一看就懂，还能在线测试接口，省去大量沟通成本。

你笑得像个孩子：这么一看，RESTful API 不仅让接口规范统一，还能提高开发效率，降低团队沟通成本，前后端都舒服！爽爽爽！

鱼皮点点头：没错，这也是为什么 RESTful 能成为业界主流的原因。

你：学会了学会了，我这就去重构所有接口，让前端阿花刮目相看！

结尾

一周后，你把所有接口重构成了 RESTful 风格。

前端阿花打开新的接口文档，眼睛亮了：小阿巴，你居然开窍了？！

你得意地笑了：那是，我可是学过 RESTful 的男人~ 阿花，晚上要不要一起？

阿花朝你吐了口唾沫：呸，你只不过学了一种 API 风格就得意洋洋。阿坤哥哥不仅精通 RESTful，还能手撕 GraphQL 和 gRPC 呢，你行么？

你难受得不行：啥啥啥，这都是啥啊…… 鱼皮 gie gie 快来救我！

12 月 4 号，JavaScript 迎来 30 岁生日。

一门 10 天赶出来的语言，现在跑在 98.9% 的网站上，有 1650 万开发者在用它。从浏览器脚本到服务端运行时，从桌面应用到移动端，甚至嵌入式设备都有它的身影。TIOBE 2024 年度编程语言排行榜上，JavaScript 排第 6。

但 30 周年这天，社区没怎么庆祝。大家更关心的是另一件事：JavaScript 这个名字，到底能不能从 Oracle 手里抢回来。

10 天写出来的语言

1995 年 5 月，Netscape 的工程师 Brendan Eich 接到一个任务：给浏览器加一门脚本语言。

时间表很紧——Navigator 2.0 Beta 版要发布了，必须赶上。

Eich 花了 10 天（据他回忆是 5 月 6 日到 15 日），搞出了第一个原型。这不是夸张，是真的 10 天。

他后来自己说：

当你看我 10 天写的东西，它像一颗种子。是一种有力的妥协，但仍然是一个非常强大的内核，后来长成了一门更大的语言。

这门语言最开始叫 Mocha，后来改叫 LiveScript，最后因为市场原因蹭了 Java 的热度，改名 JavaScript。

1995 年 12 月 4 日，Netscape 和 Sun 联合发布公告，宣布 JavaScript 正式诞生。28 家公司为这门新语言背书，包括 America Online、Apple、AT&T、Borland、HP、Oracle、Macromedia、Intuit、Toshiba 等科技巨头。

有意思的是，Oracle 当时是 JavaScript 的支持者之一，新闻稿的媒体联系人里还有 Mark Benioff（后来创办了 Salesforce）。没想到 30 年后，Oracle 成了社区想要摆脱的"商标持有者"。

Sun 联合创始人 Bill Joy 说：

JavaScript 是 Java 平台的完美补充，天生就是为互联网和全球化设计的。

America Online 技术总裁 Mike Connors：

JavaScript 带来了跨平台的快速多媒体应用开发能力。

HP 的 Jan Silverman：

JavaScript 代表了专门为互联网设计的下一代软件。

Netscape 和 Sun 还计划把 JavaScript 提交给 W3C 和 IETF 作为开放标准。后来 JavaScript 确实标准化了，但官方名字叫 ECMAScript——因为商标问题。

1996 年 3 月发布 1.0 版本后，JavaScript 的野心远不止当初设想的"胶水语言"。

从玩具到基础设施

当年 JavaScript 的定位是"胶水语言"，让不会编程的人也能在网页上加点交互。

没人想到它会变成今天这样。

几个关键节点：

2009 年 - Node.js 诞生

Ryan Dahl 把 V8 引擎搬到服务端，JavaScript 不再只是浏览器里的玩具。前后端同构成为可能。

2015 年 - ES6 发布

let/const 替代 var，箭头函数，Promise，Class 语法... JavaScript 终于像个正经语言了。

2012 年 - TypeScript 发布

微软给 JavaScript 加了类型系统。2017 年只有 12% 的 JavaScript 开发者用 TypeScript，到 2024 年这个数字涨到了 35%。现在大型项目几乎都是 TypeScript。

框架时代

React、Vue、Angular 轮番登场。整个前端生态围绕 JavaScript 建立起来。现在有人的整个职业生涯都建立在某个特定的 JS 框架上。

嵌入式领域

JavaScript 甚至跑到了微控制器上。Espruino 项目让你可以在 24.95 美元的小板子上写 JavaScript，功耗低到 0.06mA，还能跑蓝牙。有个智能手表 Bangle.js 2，一块电池能用 4 周，上面跑的就是 JavaScript。

名字的问题

JavaScript 这个名字，商标属于 Oracle。

Oracle 2009 年收购 Sun 的时候一起拿到的。但 Oracle 自己根本不做 JavaScript 相关的产品，商标就这么放着。

问题来了：因为商标在 Oracle 手里，社区做事很尴尬。

• 不能叫 JavaScript Conference，只能叫 JSConf


• 官方规范叫 ECMAScript，不叫 JavaScript


• 写书、办会议、做项目，用 JavaScript 这个词都有法律风险

Brendan Eich 2006 年写过："ECMAScript 一直是个没人想要的商业名称，听起来像皮肤病。"

讽刺的是，Oracle 甚至不是 OpenJS Foundation 的成员，跟 Node.js 的开发也没有任何关系。

Node.js 和 Deno 的创始人 Ryan Dahl 看不下去了。2024 年 9 月他发起了 "Free the Mark" 运动，发布了一封公开信，28,600 多名开发者签名支持。

签名的人里有几个重量级的：

• Brendan Eich - JavaScript 创造者本人


• Ryan Dahl - Node.js 创造者


• Michael Ficarra、Shu-yu Guo - JavaScript 规范编辑


• Rich Harris - Svelte 作者


• Isaac Z. Schlueter - npm 创始人


• James M Snell - Node.js TSC 成员


• Jordan Harband - JavaScript 规范荣誉编辑


• Matt Pocock - Total TypeScript 课程作者


• Wes Bos、Scott Tolinski - Syntax.fm 播客主持人

11 月正式向美国专利商标局提交申请，要求撤销 Oracle 的商标。

理由有三：

公开信里说得很直白：

Oracle 从来没有认真推出过叫 JavaScript 的产品。GraalVM 的产品页面甚至都没提"JavaScript"这个词，得翻文档才能找到它支持 JavaScript。

公开信还指出，Oracle 2019 年续期商标时提交的"使用证据"是 nodejs.org 的截图和 Oracle JET 库。Node.js 根本不是 Oracle 的产品，JET 只是 Oracle Cloud 服务的一个 JavaScript 库，跟市面上成千上万的 JS 库没什么区别。

按美国法律，商标 3 年不用就算放弃。Oracle 既没用这个商标，又眼睁睁看着它变成通用名词，两条都占了。

2025 年 2 月，Oracle 申请驳回诉讼中的欺诈指控。6 月，商标审判和上诉委员会驳回了欺诈指控，但撤销申请继续审理。8 月，Oracle 首次正式回应，否认 JavaScript 是通用名词。

官司预计要打到 2026 年。

Deno 团队正在众筹 20 万美元的法律费用，用于发现阶段的调查取证，包括做公众调查来证明普通人不会把 JavaScript 和 Oracle 联系在一起。

30 年后的 JavaScript

现在的 JavaScript 和 1995 年的已经是两门语言了。

当年的 var 被 let/const 取代。当年的原型继承有了 Class 语法糖。当年的回调地狱有了 Promise 和 async/await。

ES2025 刚发布，又加了一堆新特性。

工具链也完全不同了：

• 打包器从 webpack 到 Vite，Vite 8 刚用上 Rolldown，速度又快了一大截


• 运行时从只有浏览器，到 Node.js、Deno、Bun 三足鼎立


• TypeScript 成了事实上的标准


• 1650 万开发者，比很多国家的人口都多

Brendan Eich 当年 10 天写的种子，长成了一片森林。

顺手推几个项目

既然聊到 JavaScript 生态，推一下我做的几个开源项目：

chat_edit - 一个双模式 AI 应用，聊天 + 富文本编辑。Vue 3.5 + TypeScript + Vite 8 技术栈，可以自己配 API key 部署。

code-review-skill - Claude Code 的代码审查技能，覆盖 React、Vue、TypeScript 等主流技术栈，按需加载不浪费 token。

5-whys-skill - 根因分析技能，排查问题的时候用"5 个为什么"方法论。

first-principles-skill - 第一性原理思考技能，适合架构设计和技术方案选型。帮你拆解问题本质。

感兴趣可以去 GitHub 看看。

相关链接

• Ars Technica: In 1995, a Netscape employee wrote a hack in 10 days


• 1995 年原始新闻稿（存档）


• JavaScript 商标争议公开信


• JavaScript 商标争议官网


• Espruino - 嵌入式 JavaScript


• JavaScript Turns 30 - TechSpot


• 30 Years of JavaScript: The Complete Evolution Guide


• Deno v. Oracle


• Brendan Eich on Creating JavaScript in 10 Days

各位朋友好，我是优弧。今天想用一种轻松的方式，记录一个小小的里程碑：我来到新部门，已经满100天了。

如果把职场比作一段旅程，这100天像是从一条熟悉的主路，转入了一条全新的小径。风景不同，路况也迥异。过去，我更多是在既定方向里把事情做深做透；如今，则像是在一片新的地基上，一砖一瓦地搭建起"规则、方法与节奏"。

我现在所在的团队，从事的是数据标注与评测相关工作。很多人一听"标注"，第一反应是"是不是就是打标签？"——我最初也是这么想的。但真正深入之后才发现：它更像是把人类的判断，转化为一套清晰、一致、可复用的"语言"。这些语言会凝结成数据，数据会塑造模型，模型再反过来影响产品体验。它不张扬，却至关重要。

这100天，我主要做了三件事

第一件：把模糊变清晰。

新方向里，最常见的困难不是"做不出来"，而是"大家以为理解一致，其实各有各的理解"。所以我花了大量时间做"对齐"——把需求写清楚，把边界讲明白，把容易产生歧义的地方用具体案例固定下来。

这件事看似不起眼，却能让后来的人少走许多弯路。

第二件：把事情做得更稳。

在这里，"做完"不是终点，"能稳定交付"才是。

我参与梳理流程、完善检查机制，也会和一线同事一起复盘：哪里最容易出错？是规则没讲清楚，还是样例不够充分，还是工具设计让人产生误解？

我们在努力把"靠经验"变成"靠机制"，把"凭感觉"变成"有共识"。

第三件：把经验沉淀下来。

我越来越相信一个朴素的道理：团队的效率，很大程度上取决于能否把经验写下来、传下去、复用起来。

所以这段时间，我持续在做文档化、样例库整理、常见问题汇总，让新人上手更快，老同事协作更顺。

这100天，我最大的收获

说实话，新方向并不轻松。它不像冲刺型项目那样"立竿见影"，更多是"润物无声"。但也正因如此，它让我学会了另一种能力：耐心地把一件事做成体系。

我也更深刻地体会到——所谓成长，不一定是站到更高的位置，有时候是换一个角度看世界：从追求结果，到构建方法；从解决一个问题，到消除一类问题。

几点真实的小感悟

• 很多分歧不是谁对谁错，只是大家站在不同位置，看同一件事。


• 把规则写清楚，比想象中更难；写清楚之后，比想象中更有价值。


• 让事情"稳定"，往往比让事情"快速"更考验功力。

写在最后

100天当然不算长，但足以让我确认：我已经在一个新的方向上重新出发了。离开不是告别，更像是把自己推入一个更陌生的场景，再学一次"如何把事情做好"。

最后，用一句我很喜欢的话收尾（我一直拿它提醒自己）：

"这个世界上没有什么生活方式是完全正确的，神山圣湖并不是终点。接受平凡的自我，但不放弃理想和信仰，热爱生活。我们都在路上，也许路的尽头是什么，从来都不重要。"

感谢这一路遇到的每一个人。也希望下一个100天，我能继续保持好奇、保持笃定，把这条路走得更深、更稳。

顺便打个小广告

既然聊到了数据标注，也借这个机会说一声：我们的标注平台即将上线，现在开始招募标注员啦！

如果你是计算机相关专业背景，对代码有热情，想用专业能力做点有价值的事（顺便赚点外快），欢迎了解一下：

我们在找这样的你：

• 研发工程师，能独立理解并修改开源或企业级代码，熟悉单测与验证流程


• 3年以上开发经验，熟悉 Git、单元测试、模块化架构，能阅读、理解、调试中大型项目


• 掌握主流开发语言（Python / Java / JS / TS / Rust / C / C++）


• 具备问题抽象、代码重构与性能优化经验，能从开发者视角构造高质量问题与解决方案

工作方式：

• 线上灵活办公，时间自由安排


• 每周投入 20小时以上 即可

薪酬待遇：

• 时薪 50～100元，具体以项目最终定价为准

当然，如果你是本科及以上学历、有计算机相关背景的同学，也非常欢迎报名——我们同样期待新鲜血液的加入！

感兴趣的朋友可以私信我，或者留言咨询。期待与你在标注的世界里相遇。

前言

初八就回城搬砖了，有位老哥跟我吐槽了他过年期间参与同学会的事，整理如下，看读者们是否也有相似的境遇。

缘起

高中毕业至今已有十五年了，虽然有班级群但鲜有人发言，一有人冒泡就会立马潜水围观。年前有位同学发了条消息：高中毕业15年了，趁过年时间，咱们大伙聚一聚？

我还是一如既往地只围观不发言，组织的同学看大家都三缄其口，随后发了一个红包并刷了几个表情。果然还是万恶的金钱有新引力，领了红包的同学也刷了不少谢谢老板的表情，于是乎大家都逐渐放开了，最终发起了接龙。

看到已接龙的几位同学在高中时还是和自己打过一些交道，再加上时间选的是大年初五，我刚好有空闲的时间，总归还是想怀旧，于是也接了龙。

牢笼

我们相约在县城的烧烤一条街某店会面，那离我们高中母校不远，以前偶尔经过但苦于囊中羞涩没有大快朵颐过。

到了烧烤店时发现人声鼎沸，猜拳、大笑声此起彼伏，我循着服务员的指示进入了包间。放眼望去已有四、五位同学在座位上，奇怪的是此时包间却是很安静，大家都在低头把玩着手机。

当我推门的那一刻，同学们都抬头放眼望来，迅速进行了一下眼神交流，微笑地打了招呼就落座。与左右座的同学寒暄了几句，进行一些不痛不痒的你问我答，而后就沉默，气氛落针可闻，那时我是多希望有服务员进来问：帅哥，要点单了吗？

还好最后一位同学也急匆匆赶到了，后续交流基本上明白了在场同学的工作性质。

张同学：组织者，在A小镇上开了超市、圆通、中通提货点，座驾卡迪拉克

李同学：一线城市小创业者，公司不到10人，座驾特斯拉

吴同学：县城第一中学老师、班主任，座驾大众

毛同学：县委办某科室职员、公务员，座驾比亚迪

王同学：某小镇纪委书记，座驾别克

潘同学：县住房和城乡建设局职员，事业编，座驾哈佛

我：二线城市码农一枚，座驾雅迪

一开始大家都在忆往昔，诉说过去的一些快乐的事、糗事、甚至秘辛，感觉自己的青葱时光就在眼前重现。
酒过三巡，气氛逐渐热烈，称呼也开始越拔越高，某书记、某局、某老板，主任、某老总的商业互吹。

期间大家的话题逐渐往县城的实事、新闻、八卦上靠，某某人被双了，某某同事动用了某层的关系调到了市里，某漂亮的女强人离婚了。

不巧的是张同学还需要拜会另一位老板，提前离席，李同学公司有事需要处理，离开一会。

只剩我和其他四位体制内的同学，他们在聊体制内的事，我不熟悉插不进话题，我聊公司的话题估计他们不懂、也不感兴趣。

更绝的是，毛同学接到了一个电话，而后提着酒杯拉着其他同学一起去隔壁的包间敬酒去了，只剩我一个人在包间里。

过了几分钟他们都提着空酒杯回来了，悄悄询问了吴同学才知道隔壁是县委办公室主任。

回来后，他们继续畅聊着县城的大小事。

烧烤结束之后，有同学提议去唱K，虽然我晚上没安排，但想到已经没多少可聊的就婉拒了。

释怀

沿着县城的母亲河散步，看着岸边新年的装饰，我陷入了沉思。

十多年前大家在同一间教室求学，甚至同一宿舍生活，十多年后大家的选择的生活方式千差万别，各自的境遇也大不相同。

再次相遇，共同的话题也只是学生时代，可是学生时代的事是陈旧的、不变的，而当下的事才是新鲜的、变化的。因此聚会里更多的是聊现在的事，如果不在一个圈子里，是聊不到一块的。

其实小城里，公务员是一个很好的选择，一是稳定，二是有面子（可能本身没多大权利，但是可以交易，可以传递）。小城里今天发生的事，明天就可能人尽皆知了，没有秘密可言。

有志于公务员岗位的朋友提早做准备，别等过了年纪就和体制内绝缘了。

其他人始终是过客，关注自己，取悦自己。

之所以会想写这个，首先是因为在知乎收到了这个推荐的问题，实际上不管是 AutoGLM 还是豆包 AI 手机，会在这个阶段被第三方厂商抵制并不奇怪，比如微信和淘宝一直以来都很抵制这种外部自动化操作，而非这次中兴的 AI 豆包手机出来才抵制，毕竟以前搞过微信自动化客服应该都知道，一不小心就会被封号。

另外也是刚好看到， B 站的 UP 主老戴深入分析了豆包手机的内部工作机制的视频，视频介绍了从 AI 助手如何读取屏幕、捕捉数据和模拟操作的真实流程，所以对于 AI 手机又有了个更深刻的认知，在这个基础上，更不难理解为什么 AI 手机这种自动化 Agent 会被第三方厂商抵制，推荐大家看原视频：b23.tv/pftlDX8 。

那么豆包的 AI 手机是怎么工作的呢？实际上和大家想的可能不一样，它并没有使用无障碍服务（Accessibility Service），而是使用了更底层的实现方案：

豆包手机利用底层的系统权限，直接从 GPU 缓冲区获取原始图像数据并注入输入事件，而非依赖截屏或无障碍服务，此外手机还在一个独立的虚拟屏幕中执行后台任务，并将图像低频发送至云端进行推理，云端则返回操作指令。

在视频里， UP 主通过深度拆解豆包手机，分析手机在系统层面的服务分工、数据抓取和模型推理路径，例如aikernel被 UP 主推断为手机端侧 AI 的核心进程，内存占用特性（Native堆高达160M）表明它可能是一个本地AI推理框架：

另外 aikernel 异常高的Binder数量，证明有大量外部进程通过 RPC 调用它，进一步印证了其系统级服务的角色 。

而 autoaction是豆包手机 AI 自动操作的关键，这个 APK 权限允许直接从 GPU 渲染的图形缓冲区读取数据，而不是通过上层截图：

而且目前看，豆包手机的 AI 能够捕获受保护的视频输出，这意味着它可以绕过银行 App 等应用的反截图/录屏限制 ，因为很多银行 App 很多是通过 DRM（数字版权管理） 或应用内安全设置来防止截屏和录屏：

另外，Agent 在操作手机过程也不是直接使用系统的 Accessibility Service ，而是通过调用系统隐藏API injectInputEvent 来控制手机， AI 通过 INJECT_EVENTS 权限直接注入输入事件来模拟屏幕点击，权限高于无障碍 API，并且是系统签名：

同时，豆包手机在执行自动操作时，会利用一个与物理屏幕分辨率相同的“无头”虚拟屏幕在后台运行，且拥有独立的焦点，不影响用户在前台的操作，这其实就是内存副屏的概念， 虚拟屏幕的画面由 GPU 合成后，对应的缓冲区信息会直接被autoaction消费，再次证实 AI 无需通过截图 API 即可获取屏幕内容 ：

最后，豆包手机在自动化操作时，会频繁地（每3到5秒）与 obriccloud.com （字节的服务） 服务器通信，发送约 250K的单帧图片进行推理。

云端在接收图片后，会返回约 1K 的数据，内容是告诉手机下一步要执行的 7 种指令之一，如打开应用、点击、输入、滑动等等，整个自动化 Agent 的推理和路径规划主要在云端完成，云端思考后将执行步骤指令发回本地执行，本地任务很轻：

那么，这整个过程你看下来有什么感觉？如果你是第三方厂商，你会不会同样抵制这种数据收集和处理的行为？特别是绕过现有大家对系统 API 的理解，这种操作途径是否能被友商们接受？

所以目前的这种操作，被微信和淘宝抵制很正常，不管是隐私的边界，还有安全操作的规范，用户对于自己某个产品内容被收集的信息程度，这些都还处于蛮荒状态，数据安全和隐私的边界范围还不可控，并且 Agent 的托管行为，也明显侵犯到了友商们的利益链条。

就像是 UP 主说的，AI Agent 的出现将动摇移动互联网的底层商业逻辑——注意力经济，使“注意力”这一硬通货的重要性降低 ，实际上换作另一个概念就是碎片化时间：

以前你的碎片化时间都是被各种 App 消费了，比如广告和沉浸引导，但是 Agent 的出现，它明显将这部分时间给托管了，那么数据和时间都被 Agent 服务收集，对于友商们来说，不就是成了单纯的功能性服务商了吗？

另外，说实话像 AutoGLM 这种功能目前的支持，最大受益者不是用户而是灰产，不管是用诈骗还是黄牛，他们都是这种自动化下的第一受益者，所以规范和监管，特别是安全和隐私条款是必须，比如就像 UP 主说的：

豆包手机的 AI 在自动化操作过程中，哪些数据会被发送到云端服务器？

很多人对于 agent 和自动化能力的范畴并不理解，它们可以获取隐私的边界是什么，安全操作的规范是什么，这些都是需要支持和统一边界。

比如 Android 16 实际上官方是有规划 Appfunction Api 的，它的目的是让应用只公布自己开放给 AI 的能力，这样也许边界感更强。

当然，从历史的角度看，Agent 手机势不可挡，就像谷歌自己未来新的 Android PC 系统 Aluminium OS 也是会结合 Gemini Agent 等特点，这是历史进程的必然，但是这个过程中，如何统一规范和监管这是很重要的过程，毕竟 AI 的效应和能力，可比之前更加强，就像 UP 主说的，新的 AI 寡头可能会形成更中心化、更强势的权力，且马太效应更明显 。

那么，你觉得未来谁家的 Agent 设备会成为新时达的寡头？或者不是手机而是眼镜？

视频链接

b23.tv/pftlDX8

大家好😁。

上个月，我们公司的内部敏感文档（PRD）截图，竟然出现在了竞品的群里。

老板大发雷霆，要求技术部彻查：到底是谁泄露出去的？😠

但问题是，文档是纯文本的，截图上也没有任何显式的水印（那种写着员工名字的大黑字，太丑了，产品经理也不让加）。

怎么查？

这时候，我默默地打开了我的VS Code，给老板演示了一个技巧：

老板，其实泄露的那段文字里，藏着那个人的工号，只是你肉眼看不见。

今天，我就来揭秘这个技术——基于零宽字符（Zero Width Characters）的盲水印技术。学会这招，你也能给你的页面加上隐形追踪器。

先科普一下，什么叫零宽字符？

在Unicode字符集中，有一类神奇的字符。它们存在，但不占用任何宽度，也不显示任何像素。

简单说，它们是隐形的。

最常见的几个：

• \u200b (Zero Width Space)：零宽空格


• \u200c (Zero Width Non-Joiner)：零宽非连字符


• \u200d (Zero Width Joiner)：零宽连字符

我们可以在Chrome控制台里试一下：

console.log('A' + '\u200b' + 'B');

// 输出: "AB"

// 看起来和普通的 "AB" 一模一样

但是，如果我们检查它的长度：

console.log(('A' + '\u200b' + 'B').length);

// 输出: 3

看到没？😁

它的原理是什么？

原理非常简单，就是利用这些隐形字符，把用户的信息（比如工号User_9527），编码进一段正常的文本里。

步骤如下：

是不是很神奇？🤣

只需要30行代码实现抓内鬼工具

不废话，直接上代码。你可以直接复制到控制台运行。

加密函数 (Inject Watermark)

// 零宽字符字典

const zeroWidthMap = {

  '0': '\u200b', // Zero Width Space

  '1': '\u200c', // Zero Width Non-Joiner

};



function textToBinary(text) {

  return text.split('').map(char => 

    char.charCodeAt(0).toString(2).padStart(8, '0') // 转成8位二进制

  ).join('');

}



function encodeWatermark(text, secret) {

  const binary = textToBinary(secret);

  const hiddenStr = binary.split('').map(b => zeroWidthMap[b]).join('');

  

  // 将隐形字符，插入到文本的第一个字符后面

  // 你也可以随机分散插入，更难被发现

  return text.slice(0, 1) + hiddenStr + text.slice(1);

}



// === 测试 ===

const originalText = "公司机密文档，严禁外传！";

const userWorkId = "User_9527";



const watermarkText = encodeWatermark(originalText, userWorkId);



console.log("原文:", originalText);

console.log("带水印:", watermarkText);

console.log("肉眼看得出区别吗？", originalText === watermarkText); // false

console.log("长度对比:", originalText.length, watermarkText.length); 

当你把 watermarkText 复制到微信、飞书或者任何地方，那串隐形字符都会跟着一起被复制过去。

解密函数的实现

现在，假设我们拿到了泄露出去的这段文字，怎么还原出是谁干的？

// 反向字典

const binaryMap = {

  '\u200b': '0',

  '\u200c': '1',

};



function decodeWatermark(text) {

  // 1. 提取所有零宽字符

  const hiddenChars = text.match(/[\u200b\u200c]/g);

  if (!hiddenChars) return '未发现水印';

  

  // 2. 转回二进制字符串

  const binaryStr = hiddenChars.map(c => binaryMap[c]).join('');

  

  // 3. 二进制转文本

  let result = '';

  for (let i = 0; i < binaryStr.length; i += 8) {

    const byte = binaryStr.slice(i, i + 8);

    result += String.fromCharCode(parseInt(byte, 2));

  }

  

  return result;

}



// === 测试抓内鬼 ===

const leakerId = decodeWatermark(watermarkText);

console.log("抓到内鬼工号:", leakerId); // 输出: User_9527

微信或者飞书 复制出来的文案 👇

这种水印能被清除吗？

当然可以，但前提是你知道它的存在。

对于不懂技术的普通员工，他们复制粘贴文字时，根本不会意识到自己已经暴露了🤔

如果遇到了懂技术的内鬼，他可能会：

虽然它不是万能的，但它是一种极低成本、极高隐蔽性的防御手段。

技术本身就没什么善恶。

我分享这个技术，不是为了让你去监控谁，而是希望大家多掌握一种防御性编程的一个思路。

在Web开发中，除了明面上的UI和交互，还有很多像零宽字符这样隐秘的角落，藏着一些技巧。

下次如果面试官问你：除了显式的水印，你还有什么办法保护页面内容？

你可以自信地抛出这个方案，绝对能震住全场😁。

从北京回武汉差不多六年了，感慨颇多， 谈谈真实感受。

1 IT 公司

我们先把 IT 公司做一个分类整理 ：

从表中来看，武汉的 IT 公司确实不算少 ，主要集中于光谷，但我需要强调一下：

1、在大厂的眼里，武汉的定位是第二研发中心，看中的是武汉海量的研发人力资源以及较低的薪资水平。

2、第二研发中心做的并非核心业务，而且第二研发中心的权限往往不够。所以第二研发中心往往也被称为外包中心，这也是武汉很多朋友都说武汉是外包之城的原因。

3、武汉的技术氛围很差，高水平的研发人员相对较少，无论是管理者还是研发人员和一线相比是有绝对差距的。

接下来，聊聊薪资。

武汉 IT 薪资和一线差距很大，我预估月薪应该是一线的 50% 到 60% 左右，年终奖一般都是 1 ~ 2 个月，少部分公司会有股票，社保/公积金相对较低。

假如你在互联网公司，达到了阿里 P7 左右，我建议暂时不回武汉，因为武汉的薪资、技术氛围真的可能让你失望，还不如在一线多攒钱，等资金充裕了，回武汉更加合适点（一线挣钱，武汉花，很美！）。

2 大武汉

我们经常会将武汉说成“大武汉”，官方数据显示，武汉的行政面积达 8569.15 平方公里，相当于0.52个北京、1.35个上海或 4.29 个深圳。

武汉被长江和众多湖泊自然分割，形成了"三镇鼎立"的独特格局——汉口、武昌、汉阳各自为政又浑然一体。

为了连接这片水域纵横的土地，仅长江上就架起了十余座大桥，每一座都是城市发展的见证者。

回武汉的第一年，每天驱车从金银湖到关山大道，真有一种跋山涉水翻山越岭的感觉。

大江大湖造就了大武汉的壮阔景观，从金银湖的潋滟波光到南湖的静谧秀美，从堤角的市井烟火到欢乐谷的现代活力，处处都是令人惊叹的滨水景观。

• 城市夜景

• 长江大桥

3 文化

武汉的城市文化非常多元 ，有的时候，你甚至想不明白，为什么这么多迥异的文化元素集中于同一个城市。

01 码头文化

武汉因水而兴，自古就是“九省通衢”的商贸重镇。

汉口的码头文化塑造了武汉人直爽、讲义气的性格，“不服周”“讲胃口”的方言里，藏着码头工人的豪迈与坚韧。清晨的吉庆街、户部巷，热干面的芝麻香混合着面窝的酥脆，老武汉的一天就在这样的烟火气中开始。

02 过早

武汉人“过早”（吃早餐）的仪式感全国闻名，热干面、豆皮、糊汤粉、牛肉粉……一个月可以不重样 。

03 科教中心

武汉坐拥武汉大学、华中科技大学等近百所高校，是中国三大科教中心之一。

樱花纷飞的武大、梧桐成荫的华科、文艺范十足的昙华林，让这座城市既有历史的厚重感，又有青春的朝气。

04 省博物馆

湖北省博物馆是中国最重要的国家级博物馆之一，推荐各位同学来武汉时一定要去看一看。

1、越王勾践剑 : 锋芒依旧的王者之剑

2、曾侯乙编钟：奏响穿越时空的旋律

3、曾侯乙尊盘：青铜铸造的巅峰之作

4 生活

在武汉生活其实很方便，拿医疗资源来讲，我在北京望京看牙经常挂不到号，在武汉不可能发生这种情况，因为我家附近有两家三甲医院，平常看病就医都很方便。

武汉的景点非常多，周末我经常开车带老婆、孩子去东湖、九峰山动物园、植物园等景点游玩。

因为离父母近，也有了更多时间陪陪父母，他们年纪大了，总会感到孤独，我在他们身边，他们也会感觉好一点。

总而言之，相比在北京，我更加有归属感，而且幸福感更强。

有点遗憾的是，在武汉工作，一直感觉很别扭 ：

• 讯飞的业务是 TOG 的项目，很多产品、项目质量堪忧，有的接近劣质的边缘，同时合肥管理人员所体现出的低素质，让我的价值观受到了极大的刺激。


• 武汉不应该仅仅作为人力资源之城，或者说是外包之城。

我曾经对老婆讲：“我有点后悔离开北京，在武汉，最高的 offer 可以拿到接近 53 w ，要是这六年还在北京，运气好的话，手里的现金可以多个 100 w 吧！”

老婆听了我的幻想，笑了笑，回道：“那可能依依都不可能出生呢”。

我想了想： “也是，现在其实挺幸福的”。

我正在开发 DocFlow，它是一个完整的 AI 全栈协同文档平台。该项目融合了多个技术栈，包括基于 Tiptap 的富文本编辑器、NestJs 后端服务、AI 集成功能和实时协作。在开发过程中，我积累了丰富的实战经验，涵盖了 Tiptap 的深度定制、性能优化和协作功能的实现等核心难点。

如果你对 AI 全栈开发、Tiptap 富文本编辑器定制或 DocFlow 项目的完整技术方案感兴趣，欢迎加我微信 yunmz777 进行私聊咨询，获取详细的技术分享和最佳实践。

据 大厂日报 称，美团履约团队近期正在推行"全栈化"转型。据悉，终端组的部分前端同学在 11 月末左右转到了后端组做全栈（前后端代码一起写），主要是 agent 相关项目。内部打听了一下，团子目前全栈开发还相对靠谱，上线把控比较严格。

这一消息在技术圈引起了广泛关注，也反映了 AI 时代下前端工程师向全栈转型的必然趋势。但更重要的是，我们需要深入思考：AI 到底给前端带来了什么冲击？为什么前端转全栈成为了必然选择？

最近，前端圈里不断有"前端已死"的话语流出。有人说 AI 工具会替代前端开发，有人说低代码平台会让前端失业，还有人说前端工程师的价值正在快速下降。这些声音虽然有些极端，但确实反映了 AI 时代前端面临的真实挑战。

一、AI 对前端的冲击：挑战与机遇并存

1. 代码生成能力的冲击

冲击点：

• 低复杂度页面生成：AI 工具（如 Claude Code、Cursor）已经能够快速生成常见的 UI 组件、页面布局


• 重复性工作被替代：表单、列表、详情页等标准化页面，AI 生成效率远超人工


• 学习门槛降低：新手借助 AI 也能快速产出基础代码，前端"入门红利"消失

影响：
传统前端开发中，大量时间花在"写页面"上。AI 的出现，让这部分工作变得极其高效，甚至可以说，只会写页面的前端工程师，价值正在快速下降。这也正是"前端已死"论调的主要依据之一。

2. 业务逻辑前移的冲击

冲击点：

• AI Agent 项目激增：如美团案例中的 agent 相关项目，需要前后端一体化开发


• 实时交互需求：AI 应用的流式响应、实时对话，要求前后端紧密配合


• 数据流转复杂化：AI 模型调用、数据处理、状态管理，都需要全栈视角

影响：
纯前端工程师在 AI 项目中往往只能负责 UI 层，无法深入业务逻辑。而 AI 项目的核心价值在于业务逻辑和数据处理，这恰恰是后端能力。

3. 技术栈边界的模糊

冲击点：

• 前后端一体化趋势：Next.js、Remix 等全栈框架兴起，前后端代码同仓库


• Serverless 架构：边缘函数、API 路由，前端开发者需要理解后端逻辑


• AI 服务集成：调用 AI API、处理流式数据、管理状态，都需要后端知识

影响：
前端和后端的边界正在消失。只会前端的前端工程师，在 AI 时代会发现自己"够不着"核心业务。

4. 职业发展的天花板

冲击点：

• 技术深度要求：AI 项目需要理解数据流、算法逻辑、系统架构


• 业务理解能力：全栈开发者能更好地理解业务全貌，做出技术决策


• 团队协作效率：全栈开发者减少前后端沟通成本，提升交付效率

影响：
在 AI 时代，只会前端的前端工程师，职业天花板明显。而全栈开发者能够：

• 独立负责完整功能模块


• 深入理解业务逻辑


• 在技术决策中发挥更大作用

二、为什么前端转全栈是必然选择？

1. AI 项目的本质需求

正如美团案例所示，AI 项目（特别是 Agent 项目）的特点：

• 前后端代码一起写：业务逻辑复杂，需要前后端协同


• 数据流处理：AI 模型的输入输出、流式响应处理


• 状态管理复杂：对话状态、上下文管理、错误处理

这些需求，纯前端工程师无法独立完成，必须掌握后端能力。

2. 技术发展的趋势

• 全栈框架普及：Next.js、Remix、SvelteKit 等，都在推动全栈开发


• 边缘计算兴起：Cloudflare Workers、Vercel Edge Functions，前端需要写后端逻辑


• 微前端 + 微服务：前后端一体化部署，降低系统复杂度

3. 市场需求的转变

• 招聘要求变化：越来越多的岗位要求"全栈能力"


• 项目交付效率：全栈开发者能独立交付功能，减少沟通成本


• 技术决策能力：全栈开发者能更好地评估技术方案

三、后端技术栈的选择：Node.js、Python、Go

对于前端转全栈，后端技术栈的选择至关重要。不同技术栈有不同优势，需要根据项目需求选择。

1. Node.js + Nest.js：前端转全栈的最佳起点

优势：

• 零语言切换：JavaScript/TypeScript 前后端通用


• 生态统一：npm 包前后端共享，工具链一致


• 学习成本低：利用现有技能，快速上手


• AI 集成友好：LangChain.js、OpenAI SDK 等完善支持

适用场景：

• Web 应用后端


• 实时应用（WebSocket、SSE）


• 微服务架构


• AI Agent 项目（如美团案例）

学习路径：

2. Python + FastAPI：AI 项目的首选

优势：

• AI 生态最完善：OpenAI、LangChain、LlamaIndex 等原生支持


• 数据科学能力：NumPy、Pandas 等数据处理库


• 快速开发：语法简洁，开发效率高


• 模型部署：TensorFlow、PyTorch 等模型框架

适用场景：

• AI/ML 项目


• 数据分析后端


• 科学计算服务


• Agent 项目（需要复杂 AI 逻辑）

学习路径：

3. Go：高性能场景的选择

优势：

• 性能优秀：编译型语言，执行效率高


• 并发能力强：Goroutine 并发模型


• 部署简单：单文件部署，资源占用少


• 云原生友好：Docker、Kubernetes 生态完善

适用场景：

• 高并发服务


• 微服务架构


• 云原生应用


• 性能敏感场景

学习路径：

4. 技术栈选择建议

对于前端转全栈的开发者：

建议：

• 第一阶段：选择 Node.js，快速转全栈


• 第二阶段：根据项目需求，学习 Python 或 Go


• 长期目标：掌握多种技术栈，根据场景选择

四、总结

AI 时代的到来，给前端带来了深刻冲击：

前端转全栈，是 AI 时代的必然选择。

对于技术栈选择：

• Node.js：前端转全栈的最佳起点，学习成本低


• Python：AI 项目的首选，生态完善


• Go：高性能场景的选择，云原生友好

正如美团的全栈化实践所示，全栈开发还相对靠谱，关键在于：

• 选择合适的技术栈


• 建立严格的开发流程


• 持续学习和实践

对于前端开发者来说，AI 时代既是挑战，也是机遇。转全栈，不仅能应对 AI 冲击，更能打开职业发展的新空间。那些"前端已死"的声音，其实是在提醒我们：只有不断进化，才能在这个时代立足。

大明哥是 2014 年一个人拖着一个行李箱，单身杀入深圳，然后在深圳一干就是 10 年。

10 年深漂，经历过 4 家公司，有 20+ 人的小公司，也有上万人的大厂。

体验过所有苦逼深漂都体验过的难。坐过能把人挤怀孕的 4 号线，住过一天见不到几个小时太阳的城中村，见过可以飞的蟑螂。欣赏过晚上 6 点的晚霞，但更多的是坐晚上 10 点的地铁看一群低头玩手机的同行。

10 年虽然苦、虽然累，但收获还是蛮颇丰的。从 14年的 5.5K 到离职时候的 xxK。但是因为种种原因，于 2023年 9 月份主动离职离开深圳。

回长沙一年，给我的感觉就是：除了钱少和天气外，样样都比深圳好。

生活

在回来之前，我首先跟我老婆明确说明了我要休息半年，这半年不允许跟我提任何有关工作的事情，因为在深圳工作了 10 年真的太累，从来没有连续休息超过半个月的假期。哪怕是离职后我也是无缝对接，这家公司周五走，下家公司周一入职。

回来后做的第一件事情就是登出微信、删除所有闹钟、手机设置全天候的免打扰，全心全意，一心一意地陪女儿和玩，在这期间我不想任何事情，也不参与任何社交，就认真玩，不过顺便考了个驾-照。

首先说消费。

有很多人说长沙是钱比深圳少，但消费不比深圳低。其实不然，我来长沙一年了，消费真的比深圳低不少。工作日我一天的消费基本上可以控制在 40 左右，但是在深圳我一天几乎都要 80 左右。对比

同时，最近几个月我开始带饭了，周一到超时买个百来块的菜，我一个人可以吃两个星期。

总体上，一个月消费长沙比深圳低 1000 左右（带饭后更低了）。

再就是日常的消费。如果你选择去长沙的商城里面吃，那与深圳其实差不多了多少，当然，奶茶方面会便宜一些。但是，如果你选择去吃长沙的本土菜，那就会便宜不少，我跟我朋友吃饭，人均 50 左右，不会超过 70，选择美团套餐会更加便宜，很多餐馆在支持美团的情况下，选择美团套餐，两个人可以控制在 30 ~ 40 之间。而深圳动不动就人均 100+。

当然，在消费这块，其实节约的钱与少的工资，那就是云泥之别，可忽略不计。

再说生活这方面。

在长沙这边我感觉整体上的幸福感比深圳要强蛮多，用一句话说就是：深圳都在忙着赚钱，而长沙都在忙着吃喝玩乐加洗脚。我说说跟我同龄的一些高中和大学同学，他们一毕业就来长沙或者来长沙比较早，所以买房就比较早，尤其是 16 年以前买的，他们的房贷普遍在 3000 左右，而他们夫妻两的工资税后可以到 20000，所以他们这群人周末经常约着一起耍。举两个例子来看看他们的松弛感：

• 晚上 10 点多喊我去吃烧烤，我以为就是去某个夜市撸串，谁知道是开车 40+公里，到某座山的山顶撸串 + 喝酒。这是周三，他们上班不上班我不知道，反正我是不上班。


• 凌晨 3 点多拉我出来撸串

跟他们这群人我算是发现了，大部分的聚会都是临时起意，很少提前约好，主打就是一个随心随意。包括我和同事一样，我们几乎每个月都会出来几次喝酒（我不喜欢喝酒，偶尔喝点啤酒）、撸串，而且每次都是快下班了，某个人提议今晚喝点？完后，各回各家。

上面是好的方面，再说不好的。

长沙最让我受不了的两点就是天气 + 交通。

天气我就不说了，冬天冻死你，夏天热死你。去年完整体验了长沙的整个冬天，是真他妈的冷，虽然我也是湖南人，但确实是把我冻怕了。御寒？不可能的，全靠硬抗。当然，也有神器：火桶子，那是真舒服，我可以在里面躺一整天。

交通，一塌糊涂，尤其是我每天必经的西二环，简直惨不忍睹，尤其是汽车西站那里，一天 24 小时都在堵，尤其是周一和周五，高德地图上面是红的发黑。所以，除非特殊情况，我周一、周五是不开车的，情愿骑 5 公里小电驴去坐地铁。

然后是一大堆违停，硬生生把三车道变成两车道，什么变道不打灯，实线变道，双黄线调头见怪不怪了，还有一大群的小电驴来回穿梭，对我这个新手简直就是恐怖如斯（所以，我开车两个月喜提一血，4S点维修报价 9800+）。

美食我就不说了，简直就是吃货的天堂。

至于玩，我个人觉得长沙市内没有什么好玩的，我反而喜欢去长沙的乡里或者周边玩。所以，我实在是想不通，为什么五一、国庆黄金周长沙是这么火爆，到底火爆在哪里？？？

还有一点就是，在深圳我时不时就犯个鼻炎，回了长沙一年了我一次都没有，不知道什么原因。

工作

工资，长沙这边的钱是真的少，我现在的年收入连我深圳的三分之一都没有，都快到四分之一了。

当然，我既然选择回来了，就会接受这个低薪，而且在回来之前我就已经做好了心理建设，再加上我没有房贷和车贷，整体上来说，每个月略有结余。

所以，相比以前在深圳赚那么多钱但是无法和自己家人在一起，我更加愿意选择少赚点钱，当然，每个人的选择不同。我也见过很多，受不了长沙的低工资，然后继续回深圳搬砖的。

公司，长沙这边的互联网公司非常少，说是互联网荒漠都不为过。大部分都是传统性的公司，靠国企、外包而活着，就算有些公司说自己是互联网公司，但也不过是披着互联网的羊皮而已。而且在这里绝大多数公司都是野路子的干法，基建差，工作环境也不咋地，福利待遇与深圳的大厂更是没法比，比如社保公积金全按最低档交。年假，换一家公司就清零，我进入公司的时候，我一度以为我有 15 天，一问人事，试用期没有，转正后第一年按 5 天折算，看得我一脸懵逼。

加班，整体上来说，我感觉比深圳加班得要少，当然，大小周，单休的公司也不少，甚至有些公司连五险一金都不配齐，劳动法法外之地名副其实。

同时，这边非常看重学历，一些好的公司，非 985 、211 不要，直接把你门焊死，而这些公司整体上来说工资都很不错，40+ 起码是有的（比如某银行，我的履历完美契合，但就是学历问题而被拒），在长沙能拿这工资，简直就是一种享受，一年就是一套房的首付。

最后，你问我长沙工资这么低，你为什么还选择长沙呢？在工作和生活之间，我只不过选择了生活，仅此而已！！

前言

人类的悲喜并不相通，有人欢喜有人愁，更多的是看热闹。

就在上周，"苟住"群里的一个小伙伴也苟不住了。

在苟友们的"墙裂"要求下，他分享了他的经验，以他的视角看看他是怎么操作的。

1. 组织变动，意外晋升

两年前加入公司，依然是一线搬砖的码农。

干到一年的时候公司空降了一位号称有诸多大厂履历的大佬来带领研发，说是要给公司带来全新的变化，用技术创造价值。

大领导第一件事：抓人事，提效率。

在此背景下，公司不少有能力的研发另谋出处，也许我看起来人畜无害，居然被提拔当了小组长。

2. 领取任务，开启副本

当了半年的小组长，我的领导就叫他小领导吧，给我传达了大领导最新规划：团队需要保持冲劲，而实现的手段就是汰换。

用人话来说就是：

当季度KPI得E的人，让其填写绩效改进目标，若下一个季度再得到E，那么就得走人

我们绩效等级是ABCDE，A是传说中的等级，B是几个人有机会，大部分人是C和D，E是垫底。

而我们组就有两位小伙伴得到了E，分别是小A和小B。

小领导意思是让他们直接走得了，大不了再招人顶上，而我想着毕竟大家共事一场，现在大环境寒气满满，我也是过来人，还想再争取争取。

于是分析了他们的基本资料，他俩特点还比较鲜明。

小A资料：

1. 96年，单身无房贷


2. 技术栈较广，技术深度一般，比较粗心


3. 坚持己见，沟通少，有些时候会按照自己的想法来实现功能

小B资料：

1. 98年，热恋有房贷


2. 技术基础较薄弱，但胜在比较认真


3. 容易犯一些技术理解上的问题

了解了小A和小B的历史与现状后，我分别找他们沟通，主要是统一共识：

1. 你是否认可本次绩效评估结果？


2. 你是否认可绩效改进的点与风险点（未达成被裁）？


3. 你是否还愿意在这家公司苟？

最重要是第三点，开诚布公，若是都不想苟了，那就保持现状，不要浪费大家时间，我也不想做无用功。

对于他们，分别做了提升策略：

对于小A：

1. 每次开启需求前都要求其认真阅读文档，不清楚的地方一定要做记录并向相关人确认


2. 遇到比较复杂的需求，我也会一起参与其中梳理技术方案


3. 需求开发完成后，CR代码看是否与技术方案设计一致，若有出入需要记录下来，后续复盘为什么


4. 给足时间，保证充分自测

对于小B：

1. 每次需求多给点时间，多出的时间用来学习技术、熟悉技术


2. 要求其将每个需求拆分为尽可能小的点，涉及到哪些技术要想清楚、弄明白


3. 鼓励他不懂就要问，我也随时给他解答疑难问题，并说出一些原理让他感兴趣的话可以继续深究


4. 分配给他一些技术调研类的任务，提升技术兴趣点与成就感

3. 结束？还是是另一个开始？

半年后...

好消息是：小A、小B的考核结果是D，达成了绩效改进的目标。

坏消息是：据说新的一轮考核算法会变化，宗旨是确保团队血液新鲜（每年至少得置换10%的人）。

随缘吧，我尽力了，也许下一个是我呢？

一、前言

这不是一个单纯的技术教学专栏，而是一个 “技术人商业实践手记” 。记录一个全栈开发者如何用“每天2小时”的投入，系统性地从0到1打造一个能产生持续价值（无论是金钱、影响力还是个人成长）的“个人公司”。

二、为什么投入难有回报？

相信许多技术人都有过类似经历：

• 激情开始：某个阶段干劲满满，规划通过技术项目增加收入


• 目标宏大：开发开源系统、搭建博客、编写组件库，期待财务自由


• 现实骨感：投入大量时间后，发现自己仍在原地踏步

我的亲身教训

我尝试过几乎所有主流博客方案：

• WordPress → Hexo → VuePress/VitePress → Halo

但结果都是：上线时分享给朋友，然后... 再无下文。这完全背离了建站的初衷：打造个人影响力，为专业机会铺路。
所谓的“知识整理”和“自我提升”，很多时候只是自我安慰的借口。

三、为什么创建这个专栏？

一个清醒的认知

真正有效的盈利方法很少有人会无偿分享。

看看最近的AI创业热潮：

• 如果AI创业真的那么赚钱，为什么有人选择教学而不是扩大规模？


• 答案很现实：教学比实际创业更有利可图

坦诚的价值交换

您可能会问：你和他们有什么不同？

我坦然承认：这个专栏有我个人的目标。但区别在于：

• 我追求价值互换，而非单向收割


• 您获得的是我真实的实战经验


• 我获得的是关注度和影响力积累


• 未来可能开启付费模式，但规则透明

这是一种基于相互尊重的成长模式。

核心价值主张

简单来说：您吸取我的经验教训，我通过您的关注获得成长机会。公平，透明。

接下来的内容，我将具体分享如何用“每天2小时”打造真正有价值的个人产品...

最近刷到一条有关午睡的吐槽帖子，可能之前有小伙伴也看到过，事情大致是这样的：

有阿里同学在职场社区发帖吐槽，公司严查午休，13:34 公司纪委直接敲门，提醒别休息了，然后还一遍又一遍的巡逻……

说实话，第一眼刷到这个帖子的时候，脑子里的画面感的确有点强......就帖子来看，其实 1:30 这个时间本身没有看出太大毛病，很多公司比这还早呢，关键是氛围的突然变化的确让人会感到非常不适应，估计这也是帖主的主要槽点。

这里所谓的公司纪委我猜是类似行政或者 HRG 之类的巡查人员？中午午休时间一到，就开始挨个房间开灯、敲门，有的甚至还敲隔板，进行巡逻式提醒。另外话说回来，阿里那么大，可能不同部门或者不同 bu 在这件事情的要求上可能也太不一样吧，了解的同学可以说说，这个咱就不好过多评论了。

那说回午休这件事本身，我倒是见过几个公司的午休文化。

记得之前在某通信设备商工作时，那里的午休文化是刻在骨子里的。到了中午，是真的鼓励大家带床午休。

12 点多吃完饭，整层楼的灯基本都会关掉，大家纷纷拿出自己的小折叠床，开始午睡休息。午休时间到点了再集体把灯打开，那种集体休整的仪式感，会让下午的工作效率更高。

再比如像互联网大厂里的腾讯，每天中午也是可以午休的，茶水间的咖啡机上甚至会贴着“尽量不要在午休期间使用”的牌子，十分人性化。另外，我记得他们之前校招入职礼盒里是不是好像还发过毯子还是披肩来着？这正好可以用于午休，都不用自己买了。

这种对员工休息的尊重和保护，说实话，真的是会让人感觉到温暖的。

关于午休这个事情，我个人觉得对于程序员来说还是非常有必要的。

毕竟，面对高强度的工作，没有好的休息，靠强撑着眼皮盯着屏幕，产出的未必是价值，更多的是低效的“摸鱼”和潜在的健康风险。

就拿我自己来说，搬砖工作日我基本都是要午睡的。

原因很简单，因为我晚上一般睡得都比较晚，而早上基本 7 点就起来了，第二天中午如果不睡一会，那完了，整个下午基本都废掉了，不管是开会还是写东西，整个人都会非常地不在状态。

同理在我的小团队内部也是，我们也是很鼓励大家午睡的。

所以我们团队同学基本人手一个午休折叠床+毯子，而且如果工位这里躺不开，大家也可以去会议室那里午睡休息。

我们一般是大家中午去吃饭的时候最后走的同学办公室关灯，然后下午 1 点 40 由 HR 那边同学统一开灯，大家对于这个习惯早已约定俗成、相沿成习。

但是有一点，也是和文章开头的帖子有很大不同的是，我们的同学在开灯时，不会像文章开头帖子那样还强行给你敲门整出一波动静，我们即便灯开了，大家也还是可以稍微再躺一下，缓个几分钟再慢慢起来都没啥问题。

试想一下，要是像文首帖子说的那样，突然有人来咔咔给你一顿敲门，或者说甚至还敲隔板，那不得给人吓一机灵？

面对文章开头的吐槽贴，虽然别人的事情我们也管不了，但是看问题也不能只看表面。

透过这个吐槽帖，反映的是职场的一些微妙变化，这背后，其实折射出的或许是一种“越来越收紧”的职场环境。

那如果你正好处于这种正在收紧的工作环境之中，作为普通个体，你会怎么做呢？

这里我也想稍微多聊两句。

**首先，千万不要因为环境的变化而让自己陷入情绪不满与内耗。**很早之前的文章里我就写过，要理性地看待工作关系。

职场本质是价值交换的契约关系，这没有问题，那付诸技术和专业的同时，也要保持清醒的边界意识：既不愤世嫉俗，也不天真幼稚。

其次，要学会“物理防御”，在规则允许的缝隙内尽量对自己好一点吧。

千万不要因为环境变紧了，就主动放弃自己的需求。毕竟，身体是自己的，健康是自己的，只是方式我觉得可以更灵活变通一些。

就拿这个帖子里「午睡收紧」这件事情来说，如果公司不让关灯，那咱就搞一个好一点的眼罩和降噪耳机行不行？

如果公司不让躺睡，那咱是不是可以买个质量好一点的颈枕，即便靠在椅子、或者趴在桌子上眯一会是不是也能舒服一点？

如果中午休息时间不够，我们是不是可以充分利用碎片化时间来缓一缓，比如利用下午茶或者拿快递的时间去楼下透透气，或者在工位上做几个简单的拉伸动作。

如此之类，等等等等，大家也可以自己多想想办法。

记住，无论职场环境如何变迁，身体是自己的，健康也是自己的，先把自己身体照顾好，再去谈理想谈工作，大家觉得呢？

好了，那以上就是今天的内容分享了，希望能对大家有所启发，我们下篇见。

注：本文在GitHub开源仓库「编程之路」 github.com/rd2coding/R… 中已经收录，里面有我整理的6大编程方向(岗位)的自学路线+知识点大梳理、面试考点、我的简历、几本硬核pdf笔记，以及程序员生活和感悟，欢迎star。

背景介绍

• 最近组内要做0-1的新ai产品, 招我进来就是负责这个ai产品,启动的时候这个季度就剩下两个月了,天天开会对齐进度,一个月就已经把基础版本给做完了,想要接入到现有的业务上面,时间方面就特别紧张,技术选型怎么说呢, leader用ai写了一个版本 我们在现有的代码进行二次开发这样, 全栈next.js 要学习的东西太多了 又没有前端基础,没有ai coding很难完成任务(十几分钟干完我一天的工作 claude4.5效果还不错 进度推的特别快), 自从trae下架了claude,后面就一直cursor claude 4.5了。
  
  
  
  
  • nextjs+ts+tailwindcss+shadcn ui现在是mvp套餐，startup在梭哈，时间就是生产力哪需要那么多差异化样式直接一把，有的💰才开始做细节，你会发现慢慢也💩化了。
  
  
  • Nextjs 是全栈框架 可以很快把一个MVP从零到一完整跑起来。 你要是抬杠说什么高并发负载均衡啥的，你的用户数量真多到需要考虑性能的时候，你已经不需要自己考虑了(小红书看到的一段话 挺符合场景的)
  
  
  • next.js 写后端 确实比较轻量 只能做一些curd的操作 socket之类的不太合适 其他api 还是随便开发 给我的感受就是前端能够直接操作db，前后端仓库可以不分离，业务逻辑还是一定要分离的 看看开源的next.js 项目的架构设计结构是怎么样的 学习/模仿/改造。
  
  
  • 语言只是工具，适合最重要，技术没有银弹
  
  
  
  


• nextjs.org/ github.com/vercel/next…
  

项目的时间线

项目从启动到这周 大概是5周的时间

• 10/28-10/31 Week 1
  
  
  
  • 项目初始化/需求讨论/设计文档/
  
  
  • 后端next.js, typescript技术熟悉 项目运行/调试
  
  
  • 基础框架搭建 设计表结构ddl, 集成mysql, 编写crud接口阶段
  
  
  
  


• 11/03-11/07 Week 2
  
  
  
  • 产品PRD 提供
  
  
  • xxxx等表设计
  
  
  
  


• 11/10-11/14 Week 3
  
  
  
  • xxxxx 基本功能完结
  
  
  • @xxxx 讲解项目结构/规范
  
  
  
  


• 11/17-11/21 Week 4
  
  
  
  • 首页样式/逻辑 优化
  
  
  • 集成统一登录调研
  
  
  • 部署完成
  
  
  
  


• 11/24-11/28 Week 5
  
  
  
  • 服务推理使用Authorization鉴权 对内接口使用Cookies (access_token) 鉴权 开发
  
  
  • xxxx 表设计表设计 逻辑开发
  
  
  • xxx设计 设计开发
  
  
  • 联调xxxx
  
  
  
  

5周时间 功能基本完成了 剩下的就是部署到线上 进行场景实践了

前端技术栈

• Next.js 14：选择 App Router 架构，支持服务端渲染和 API Routes


• TypeScript 5.4：强类型语言提升代码质量和可维护性


• React 18：利用并发特性和 Suspense 提升用户体验


• Zustand：轻量级状态管理，替代 Redux 降低复杂度


• Ant Design + Radix UI：组件库组合，平衡美观性和可访问性

React + TypeScript react.dev/

• 优势：类型安全：TypeScript 提供编译时类型检查，减少运行时错误 ✅ 组件化开发：高度可复用的组件设计 ✅ 生态成熟：丰富的第三方库和工具链 ✅ 开发体验：优秀的 IDE 支持和调试工具


• 劣势： ❌ 学习曲线：TypeScript 对新手有一定门槛 ❌ 编译时间：大型项目编译可能较慢 ❌ 配置复杂：类型定义需要额外维护

UI 组件方案 Ant Design + Radix UI 混合方案

• 优势： ✅ 快速开发：Ant Design 提供完整的企业级组件 ✅ 无障碍性：Radix UI 提供符合 WAI-ARIA 标准的组件 ✅ 定制灵活：Radix UI 无样式组件便于自定义 ✅ 中文支持：Ant Design 对中文界面友好


• 劣势： ❌ 包体积大：两个 UI 库增加了打包体积 ❌ 样式冲突：需要注意两个库的样式隔离❌ 维护成本：需要同时维护两套组件系统

Tailwind CSS

• 优势： ✅ 开发效率高：原子化类名，快速构建 UI ✅ 体积优化：生产环境自动清除未使用的样式 ✅ 一致性：设计系统内置，确保视觉一致 ✅ 响应式：便捷的响应式设计工具


• 劣势： ❌ 类名冗长：HTML 可能变得难以阅读 ❌ 学习成本：需要记忆大量类名 ❌ 非语义化：类名不直观反映元素意义

ant design x

ahooks

后端技术栈

• Prisma 6.18：现代化 ORM，类型安全且支持 Migration


• MySQL：成熟的关系型数据库，满足复杂查询需求


• Redis (ioredis) ：高性能缓存，支持多种数据结构


• Winston：企业级日志系统，支持日志轮转和结构化输出


• Zod：运行时类型验证，保障 API 数据安全

Next.js API Routes

• 优势： ✅ 统一代码库：前后端在同一项目中 ✅ 类型共享：TypeScript 类型可在前后端复用 ✅ 开发效率：无需配置跨域、代理等 ✅ 部署简单：单一应用部署


• 劣势： ❌ 扩展性限制：无法独立扩展后端服务 ❌ 性能瓶颈：Node.js 单线程可能成为瓶颈 ❌ 微服务困难：不适合复杂的微服务架构

Prisma ORM

• 优势： ✅ 类型安全：自动生成 TypeScript 类型 ✅ 迁移管理：声明式 schema，易于版本控制 ✅ 查询性能：生成优化的 SQL 查询 ✅ 关系处理：直观的关系查询 API ✅ 多数据库支持：支持 MySQL、PostgreSQL、SQLite 等


• 劣势： ❌ 复杂查询：某些复杂 SQL 可能需要原始查询 ❌ 生成代码体积：生成的 client 文件较大 ❌ 版本升级：大版本升级可能需要迁移

踩坑记录

主要是记录一些开发过程中踩坑 和设计问题

• node js 项目 jean部署


• 自定义配置/dockerfile配置 没有类似项目参考 健康检查问题 加上环境变量配置多环境 一步一步


• next.js 中 用middleware进行接口拦截鉴权 里面有prisma path import 直接出现了Edge Runtime 异常 自定义auth 解决


• npm build 项目 踩坑


• 静态渲染流程 动态api 警告 强制动态渲染


• 其他组件 document 不支持build问题


• 保存多场景模式+构建版本管理第一版考虑的太少了，发现有问题 后面又重构了一版本


• xxx日志目前还没有接入 要不就是日志文件 要不就是console.log 目前看日志的方式是去容器化运行日志看了 后续集群部署就比较麻烦了


• ant design 版本降低到6.0以下 ant-design x 用不了2.0.0 的一些对话组件

Next.js实践的项目记录

苏州 trae friends线下黑客松 📒

• 去Trae pro-Solo模式 苏州线下hackathon一趟, 基本都是一些独立开发者，一人一公司，三个小时做出一个产品用Trae-solo coder模式，不得不说trae内部集成的vercel部署很丝滑 react项目一键deploy访问 完全不用关系域名服务器, solo模式其实就是混合多种model使用进行输出 想要的效果还是得不断的调试 thiking太长，对于前后端分离项目 也能够同时关联进行思考规划。


• 1点多到4点 coding时间 从0-1生成项目 使用trae pro solo模式 就3个小时 做不了什么大的东西 那就做个日语50音的网站呗 现场酒店的网基本用不了 我数据也很卡 用的旁边干中学老师的热点 用next.js tailwindcss ant design deepseek搭建的网页 够用了 最后vercel部署 trae自带集成 挺方便的 solo模式还是太慢了 接受不了 网站地址是 traekanastudio1ssw.vercel.app/ 功能就是假名+ai生成例句和单词 我都没有路演 最后拿优秀奖可能是我部署了吧 大部分人没部署 优秀奖就是卫衣了 蹭了一天的饭加零食 爽吃


• http://www.xiaohongshu.com/explore/692… 小红书当时发的帖子 可以领奖品

Typescript的AI方向 langchain/langgraph支持ts

• 最近在看的ts的ai框架 发现langchain 是支持ts的, langchain-chat 主要是使用langchain+langgraph 对ts进行实践 traechat-apps4y6.vercel.app/


• 部署还踩坑了 MCP 在 Vercel 上不生效是因为 Vercel 是 serverless 环境，不支持运行持久的子进程。让我帮你解决这个问题：


• 主要是对最近项目组内要用的到mcp/function call 进行实践操作 使用modelscope 上面开源的mcp进行尝试 使用vercel进行部署。


• 最近看到小红书上面的3d 粒子 圣诞树有点火呀，自己也尝试下 效果很差 自己弄的提示词 可以去看看帖子上的提示词去试试 他们都是gemini pro 3玩的 我也去弄个gemini pro 3 账号去玩玩。


• 还有一个3d粒子 跟着音乐动的的效果 下面的提示词可以试试

帮我构建一个极简科幻风格的 3D 音乐可视化网页。

视觉上参考 SpaceX 的冷峻美学，全黑背景，去装饰化。核心是一个由数千个悬浮粒子组成的‘生命体’，它必须能与声音建立物理连接：低音要像心脏搏动一样冲击屏幕，高音要像电流一样瞬间穿过点阵。

重点实现一种‘ACID 流体’视觉引擎：让粒子表面的颜色不再是静态的，而是像两种粘稠的荧光液体一样，在失重环境下互相吞噬、搅拌、流动，且流速由音乐能量驱动。

• docs.langchain.com/oss/javascr…


• http://www.modelscope.ai/home


• vercel.com


• http://www.modelscope.ai/mcp

ai方向 总结

• a2a解决的是agent之间如何配合工作的问题 agent card定义名片 名称 版本 能力 语言 格式 task委托书 通信方式http 用户 客户端是主控 接受用户需求 制定具体任务 向服务器发出需求 任务分发 接受响应 服务器是各类部署好的agent 遵循一套结构化模式


• mcp 解决的llm自主调用功能和工具问题


• mcp 是解决 function call 协议的碎片化问题，多 agent 主要是为了做上下文隔离


• 比如说手机有一个system agent 然后各个app有一个agent，用户语音输入买咖啡，然后system agent调用瑞幸agent 这样就是非侵入式 让app暴露系统a2a接口，感觉比mcp要更合理一点，不是单纯让app暴露tools，系统agent只需要做路由


• 而且有一点我觉得挺有意思的，就是自己的agent花的token是自己的钱，如果自己的agent找别人的agent，让它执行任务啥的，花的不就是别人的钱……


• Dify：更像宜家的模块化家具，提供可视化工作流、预置模板，甚至支持“拖拽式”编排AI能力。比如，你想做一
  个智能客服，只需在界面里连接对话模型、知识库和反馈按钮，无需写一行代码

python 和ts 在ai上面的比较

• Python 依然是 AI 训练和科研的王者，PyTorch、TensorFlow、scikit-learn 这些生态太厚实了，训练大模型你离不开它。


• TS 在底层 AI 能力上还没那么能打，GPU 加速、模型优化这些，暂时还得靠 Python 打底。


• Python 搞理论和模型，TypeScript卷体验和交付

个人学习记录

主要还是前端和ai方面的知识点学习的比较多吧

• Typescript 语法基础+进阶 / Next.js 开发指南/React 开发指南


• ahooks 组件 使用 ahooks.js.org/zh-CN/hooks…


• ant design x 使用 ant-design-x.antgroup.com/components/…


• prisma orm框架 +mysql github.com/prisma/pris…


• dotenv 读取配置文件 github.com/dotenvx/dot…


• fastmcp 项目构建使用 原理


• Agent2Agent google协议内部详情
  
  
  
  • github.com/MarkTechSta…
  
  
  • github.com/a2aproject/…
  
  
  • a2a-protocol.org/latest/topi…
  
  
  
  


• swagger.io/specificati… OpenAPI 规范 一个 OpenAPI 描述（OAD）可以由一个 JSON 或 YAML 文档组成


• github.com/yossi-lee/s… 根据Swagger3规范，一键将Web服务转换为MCP


• http://www.jsonrpc.org/specificati… JSON-RPC 是一种无状态、轻量级的远程过程调用（RPC）协议


• github.com/agno-agi/ag… 多智能体框架


• roadmap.sh/ai-engineer ai工程师的roadmap 很全


• github.com/ChromeDevTo… *可以集成到cursorz中 *AI 能够直接控制和调试真实的 Chrome 浏览器


• http://www.nano-banana.ai/ Nano Banana Pro (V2) 文生图 图生图


• aistudio.google.com/prompts/new… gemini ai studio

Vibe Coding

• 先叠甲, 我没有前端的开发经验，第一次写前端项目，项目里面90%的前端代码都是ai 生成的，能够让你一个不会前端的同学也快速完成mvp版本/需求任务。我虽然很推ai coding 很喜欢用, 即时反馈带来的成就感, 但是对于生成的代码是不是屎山 大概率可能是了, 因为前期 AI速度快，制造屎山的速度更快。无论架构设计多优秀，也难避免屎山代码的宿命: 需求一直在变，你的架构设计是针对老的需求，随着新的需求增加，老的架构慢慢的就无法满足了，需要重构。


• 一起开发的前端同事都说ai生成那些样式互相影响了,样式有tailwindcss 有自定义的css 每个模块又有不同 大概率出问题 有冲突，就是💩山。


• 最大的开发障碍就是内心的偏见 不愿意放弃现在所擅长的东西 带着这份偏见不愿意去学习

对于ai coding 的话 用过trae-pro/cursor/qoder/copilot/codex等等 最终还是cursor claude 4.5用的最舒服

• 基本一周一个cursor pro账号 买号都花了快1k了。

You have used up your included usage and are on pay-as-you-go which is charged based on model API rates. You have spent $0.00 in on-demand usage this month.

• 最后就是需要学好英语 前端的技术文档都是英文的 虽然有中文的翻译版本, 但没有自己直接去看官方的强 难免有差异， 我现在都是用插件进行web翻译去看的 很累。


• 现在时间是凌晨 11/30/02:36 喝了两瓶酒。这个周末我要重温甜甜的恋爱 给我也来一颗药丸 给时间是时间 让过去过去, 年底想去日本跨年了

2025 年 10 月 15 日，苹果公司正式发布全新 M5 芯片。作为继 M4 之后的又一代 Apple Silicon 处理器，M5 采用第三代 3nm 制程工艺，在 AI 运算、图形性能与能效方面实现全面突破，标志着苹果在“端侧 AI”赛道上的又一次重大跨越。

目前，M5 已率先搭载于 14 英寸 MacBook Pro、新一代 iPad Pro 与 Apple Vision Pro，并同步开启预订。

一、核心亮点：GPU 首次集成神经加速单元

M5 最引人注目的革新，在于其 GPU 架构的彻底重构：

• 全新 10 核 GPU，每个核心均内置独立 Neural Accelerator（神经加速单元）


• GPU 的 AI 计算峰值性能较 M4 提升超 4 倍


• 相比初代 M1，AI 性能提升 超过 6 倍

苹果硬件技术高级副总裁 Johny Srouji 表示：“M5 标志着 Apple 芯片在 AI 性能上的又一次重大跨越。”

这一设计打破了传统 CPU/GPU/Neural Engine 三者分离的 AI 计算模式，使 GPU 本身具备原生 AI 推理能力，特别适合图像生成、视频处理、空间计算等高负载场景。

二、三大核心模块全面升级

1. CPU：更高能效，更强多线程

• 10 核 CPU 架构：6 个高能效核心 + 4 个高性能核心


• 多线程性能较 M4 提升最高达 15%


• 搭载“全球最快 CPU 核心”，兼顾性能与续航

2. 神经引擎（Neural Engine）：协同加速 AI 任务

• 16 核神经引擎，专为机器学习优化


• 与 GPU/CPU 中的神经加速单元协同工作


• 在 Apple Vision Pro 上可极速生成“空间化照片”或个性化 Persona


• 为 Apple Intelligence 提供高效本地运行支持，如 Image Playground 响应更迅捷

官方介绍，M5 芯片的设计是围绕AI展开的，采用新一代 GPU 架构，每个计算单元均针对 AI 进行优化。10 核 GPU 中各个核心内置有专用神经加速器，峰值 GPU 计算性能达到 M4 的 4 倍有余，AI 峰值性能更达到 M1 的 6 倍以上。

3. 统一内存架构：带宽与容量双突破

• 内存带宽高达 153 GB/s，比 M4 提升近 30%


• 支持最高 32GB 统一内存


• 整个 SoC 共享同一内存池，大幅提升多任务与大模型本地运行能力

实测场景：用户可同时运行 Adobe Photoshop + Final Cut Pro + 后台上传大文件，系统依然流畅。

三、软件生态深度协同：Metal 4 + Core ML 赋能开发者

M5 的硬件革新离不开软件栈的配合。苹果通过以下框架释放 M5 的全部潜能：

开发者可通过 Metal 4 构建专属 AI 加速方案，例如在本地运行 Draw Things（扩散模型绘图） 或 webAI 上的大语言模型。

四、实际应用场景：端侧 AI 落地加速

M5 的强大 AI 能力已在多个场景中体现：

• Apple Vision Pro：实时生成 3D 空间照片、个性化虚拟形象


• iPad Pro：本地运行 Stable Diffusion 类模型，秒级出图


• MacBook Pro：AI 编程助手、视频智能剪辑、语音实时转写等任务无需联网


• Apple Intelligence：所有 AI 功能均在设备端完成，保障隐私与低延迟

五、能效与环保：性能提升，功耗更低

尽管性能大幅跃升，M5 仍延续苹果芯片高能效传统：

• 采用先进 3nm 工艺，晶体管密度更高、漏电更少


• 在相同性能下功耗显著低于竞品


• 支持苹果 “Apple 2030”碳中和计划，从材料、制造到运输全链路减碳

这意味着新款 MacBook Pro、iPad Pro 和 Vision Pro 在获得更强性能的同时，续航更长、发热更低、环境足迹更小。

M5虽然又上面几个方面的提升，但是是否值得为M5献上自己的血汗钱，先看看用过的网友怎么说？

一个眼光长远的网友说到：

这里也期待下M6的到来！

当然如果你是一个AI重度开发者或者使用者，M5也是值得冲一把的。

下面就来看看者3款产品。

M5 MacBook Pro

外观和之前差别不大， 14 英寸 120Hz 3024*1964 的刘海屏，峰值亮度为 1600nits。

三个 Thunderbolt 4 端口、一个 HDMI 接口、一个 SD 卡槽、一个 3.5 耳机插孔。

最大的提升就是你可以拥有 4TB 的存储规格，但是价格和 512GB 相比差了 9000 块，相当于1TB的价格接近3000块大洋。

内存方面有16GB 和 24GB 以及 32GB，具体价格如下

对于普通的开发场景选择16GB就可以了，如果是做大数据，AI大模型开发可以选择32GB。

iPad Pro

屏幕采用双层 120Hz OLED ，11 英寸分辨率为 24201668，13 英寸分辨率为 27522064。

颜色一样提供深空黑色和银色两种可选

Vision Pro

新版的Vision Pro 除了从 M2+R1 组合升级到 M5+R1 之外，最显眼的变化就是升级了新的双针织头戴套。

续航也从原来的 2 小时扩展至 3 小时，最高刷新率也从 100Hz 增至 120Hz，有效减少了观看物理环境时的运动模糊。

不过价格最低高达9000,确实劝退了很多人。

总结：M5 是 Apple Intelligence 的“终极载体”

如果说 M1 是 Apple Silicon 的起点，M2/M3 是成熟，M4 是 AI 探索，那么 M5 就是 Apple Intelligence 的落地基石。

通过 GPU 内置神经加速单元 + 统一内存 + 软件深度协同，M5 不仅是一颗芯片，更是苹果构建“端侧 AI 生态系统”的核心引擎。

未来，随着更多 AI 应用向本地迁移，M5 将成为开发者与用户拥抱下一代人机交互的关键硬件平台。

端侧 AI 的时代，已经到来。

兄弟们，前天的瓜都吃了吗？🤣

说实话，作为一名还在写代码的打工仔，看到前天晚上快手那个热搜，我手里捧着的咖啡都不香了，后背一阵发凉。

12月22日晚上10点，正是流量最猛的时候，快手直播间突然失控。不是服务器崩了，而是内容崩了——大量视频像洪水一样灌进来。紧接着就是官方无奈的拔网线，全站直播强行关停。第二天开盘，股价直接跌了3个点。

这可不是普通的 Bug，这是P0 级中的 P0。

很多群里在传内鬼或者0day，但看了几位安全圈大佬（360、奇安信）的复盘，我发现这事儿比想象中更恐怖：这是一次教科书级别的黑产自动化降维打击。

今天不谈公关，咱们纯从技术角度复盘一下：假如这事儿发生在你负责的项目里，你的前端代码能抗住几秒？

当脚本比真人还多还快时？

这次事故最骚的地方在于，黑产根本不按套路出牌。

以前的攻击是 DDoS，打你的带宽，让你服务不可用。

这次是 Content DDoS（内容拒绝服务）。

1. 前端防线形同虚设

大家有没有想过，黑产是怎么把视频发出来的？

他们绝对不会坐在手机前，一个一个点开始直播。他们用的是群控、是脚本、是无头浏览器（Headless Browser）。

这意味着什么？

意味着你前端写的那些 if (user.isLogin)、那些漂亮的 UI 拦截、那些弹窗提示，在黑客眼里全是空气。他们直接逆向了你的 API，拿到了推流接口，然后几万个并发调用。

2. 审核系统被饱和式攻击

后端通常有人工+AI 审核。平时 QPS 是 1万，大家相安无事。

昨晚，黑产可能瞬间把 QPS 拉到了 100万。

云端 AI 审核队列直接爆了，人工审核员估计鼠标都点冒烟了也审不过来。一旦阈值被击穿，脏东西就流到了用户端。

那前端背锅了吗？

虽然核心漏洞肯定在后端鉴权和风控逻辑（大概率是接口签名泄露），但咱们前端作为 离黑客最近的一层皮，如果做得好，绝对能把攻击成本拉高 100 倍。

来，如果不幸遇到了这种自动化脚本攻击，咱们前端手里还有什么牌？🤔

别把 Sign 算法直接写在 JS 里！

很多兄弟写接口签名，直接在 request.js 里写个 md5(params + salt) 完事。

大哥，Chrome F12 一开，Sources 一搜，断点一打，你的盐（Salt）就裸奔了。

防范操作：直接上 WASM (WebAssembly)

把核心的加密、签名逻辑，用 C++ 或 Rust 写，编译成 .wasm 文件给前端调。

黑客想逆向 WASM？那成本可比读 JS 代码高太多了。这就是给他们设的第一道坎。

你的用户，可能根本不是人

黑产用的是脚本。脚本和真人的操作是有本质区别的。

不要只会在登录页搞个滑块，没用的，现在的图像识别早破了。

要在 关键操作（比如点击开始直播） 前，采集一波数据：

• 鼠标轨迹：真人的轨迹是曲线（贝塞尔曲线），脚本通常是直线。


• 点击间隔：脚本是毫秒级的固定间隔，人是有随机抖动的。

// 伪代码，简单的是不是人检测

function isHuman(events) {

    // 如果鼠标轨迹过于平滑或呈绝对直线 -> 机器人

    if (analyzeTrajectory(events) === 'perfect_linear') return false;

    // 如果点击时间间隔完全一致 -> 机器人

    if (checkTiming(events) === 'fixed_interval') return false;

    return true;

}

把这些行为数据打分，随着请求发给后端。分低的，直接拒绝推流。

既然防不住内鬼，那就给他打标

这次很多人怀疑是内部泄露了接口文档或密钥。说实话，这种事防不胜防。

但是，前端可以搞 盲水印。

在你的 Admin 管理后台、文档平台，加上肉眼看不见的 Canvas 水印（把员工 ID 编码进背景图的 RGB 微小差值里，具体大家自己去探索😖）。

一旦截图流出，马上就能解码出是哪个员工泄露的。威慑力 > 技术本身。

或者试试这个技巧 👉 如何用隐形字符给公司内部文档加盲水印?(抓内鬼神器🤣)

安全复盘

这次快手事件，其实就死在了一个逻辑上： 后端太信任通过了前端流程的请求。

我们写代码时常犯的错误：

• 前端校验过手机号格式了，后端不用校验了吧？


• 必须点了按钮才能触发这个请求，所以这个接口很安全。

大错特错！

2025 年了，兄弟们。在 Web 的世界里，不相信前端 才是保命法则。

任何从客户端发来的数据，都要默认它是有毒的。

之前我都发过类似的文章：为什么永远不要相信前端输入？绕过前端验证，只需一个 cURL 命令！

希望对你们有帮助👆

这次是快手，下次可能就是咱们的公司。

尤其是年底了，黑灰产也要冲业绩（虽然这个业绩有点缺德😖）。

建议大家上班时看看这几件事：

前端不只是画页面的，关键时刻，咱们也是安全防线的一部分。

别等到半夜被运维电话叫醒，那时候就真只能甚至想重写简历了🤣。

引言

记得我刚去北京工作的那段时间，由于工作原因开始吃外卖，加上缺乏运动，几个月胖了20斤。

当时心想这不行啊，我怕我拍婚纱照的时候扣不上西服的扣子，我决心减肥。

在我当时的认知里，只要对自己狠一点、饿一饿，就能瘦成理想状态。于是我晚上不吃饭，下班后去健身房跑5公里，1个月的时间瘦了15斤。我很自豪，身边的人说我明显精神多了。

可减肥这事远比我想的复杂，由于没有对应的增肌训练，我发现在做一些力量训练的时候，比之前没减肥前更吃力了。

我这才意识到，自己不仅减掉了脂肪，还减掉了不少肌肉。

我当时完全没有意识到这套方法的问题，也不知道如何科学评估身体组成变化——减肥是成功了，但减的不止是“脂肪”，还有“体能”。

上篇文章提到我对节食减肥的做法并不是特别认可，那科学的方法应该是怎么样的呢，我做了如下调研。

重新理解“减肥”这件事

想系统性地弄清楚减肥到底是怎么回事，我先从最直接的方式开始：看看别人都是怎么做的。

我先去搜了小红书、抖音等平台，内容五花八门，有节食的，有吃减肥药的，也有高强度训练比如HIIT的，还有各种花里胡哨的明星减肥法。

他们动不动就是瘦了十几斤，并且减肥前后的对比非常强烈，我都有种立刻按照他们的方式去试试的冲动。

大部分攻略中都会提到一个关键词“节食”，看来“少吃”几乎成了所有减肥成功者的共识。

我接着去谷歌搜索“节食 减肥”关键字，排名比较靠前的几篇文章是这几篇。

搜索引擎搜出来的一些内容，却讲了一些节食带来的一些不良影响，比如反弹、肌肉流失、代谢下降、饥饿激素紊乱...

这时候我很疑惑，社交媒体上“万人点赞”的有效手段，在官方媒体中的描述，完全不同。

我还需要更多的信息，为此我翻了很多关于节食减肥的书籍。

我在《我们为什么吃（太多）》这本书里看到了一个美国的实验。

美国有一档真人秀节目叫《超级肥胖王》。节目挑选了一些重度肥胖的人，所有参赛者通过高强度节食和锻炼项目，减掉好几十千克的重量。

但研究追踪发现，6年之后，他们平均都恢复了41千克的体重。而且相比六年前，他们的新陈代谢减少了700千卡以上，代谢率严重下降。

有过节食减肥经历的朋友可能都会有过反弹的经历，比如坚持一周较高强度的节食，两天可能就涨回来了。前一阵子一个朋友为了拍婚纱照瘦了很多，最近拍完回了一趟老家，再回北京一称胖了10斤，反弹特别多。

并且有另外一项研究者实验发现，极端节食后，我们体内负责刺激食欲的激素水平比节食前高出了24%，而且进食后获得的饱腹感也更低了。

也就是说你的大脑不知道你正在节食还是遇到了饥荒，所以它会努力的调节体重到之前的水平。

高强度节食是错误的。

正确选项

或许你想问，什么才是正确的减肥方式呢？

正确的做法因人而异，脱离身体状况谈减肥就是耍流氓。

最有参考价值的指标是BMI，我国肥胖的BMI标准为：成人BMI≥28 kg/m²即为肥胖，24.0≤BMI<28.0 kg/m²为超重，BMI<18.5 kg/m²为体重过低，18.5≤BMI<24.0 kg/m²为正常范围。

比如我目前30岁，BMI超过24一点，属于轻微超重。日常生活方式并不是很健康，在办公室对着电脑一坐就是一天。如果我想减肥，首先考虑多运动，如跑步、游泳。

但如果我的BMI达到28，那么就必须要严格控制饮食，叠加大量的有氧运动。

如果针对50岁以上的减肥，思路完全不一致。这个年纪最重要的目标是身体健康，盲目节食会引发额外问题：肌肉流失、骨质疏松、免疫力下降。

这时候更需要的是调整饮食结构，保证身体必要的营养摄入。如果选择运动，要以安全为第一原则，选择徒手深蹲、瑜伽、快走、游泳这些风险性较小的运动。

但无论你什么年龄、什么身体情况，我翻了很多资料，我挑了几种适合各种身体情况的减重方式：

第一个是好好吃。饮食上不能依赖加工食品，比如薯片、面包、饼干，果汁由于含糖量很高，也要少喝。

吃好的同时还要学会感受自己的吃饱感，我们肯定都有过因为眼前的食物太过美味，哪怕肚子已经饱了，我们还是强行让自己多吃两口。

最好的状态就是吃到不饿时停止吃饭，你需要有意识的觉察到自己饱腹感的状态。我亲身实践下来吃饭的时候别刷手机、看视频，对于身体的敏感度就会高很多，更容易感觉到饱腹感。

第二个是多睡。有研究表明缺乏睡眠会导致食欲激素升高，实验中每天睡4.5小时和每天睡8.5小时两组人群，缺觉的人每天会多摄入300千卡的能量。

我很早之前就听过一个词叫“过劳肥”。之前在互联网工作时就见过不少人，你眼看着他入职的时候还很瘦，半年或者一年后就发福了，主要就是经常熬夜或者睡眠不足还会导致内分泌紊乱和代谢异常。

最近一段时间娃晚上熬到11点睡，早上不到七点就起床，直接导致我睡眠不足。最直观的感受就是自己对于情绪控制能力下降了，更容易感受到压力感，因此会希望通过多吃、吃甜食才缓解自己的状态。

第三个就是锻炼。这里就是最简单的能量守恒原则了，只要你运动就会消耗热量，那你说我工作很忙，没时间跑步、跳绳、游泳，还有一个最简单的办法。

那就是坚持每天走一万步，研究表明每天走一万步，就能把肥胖症的风险降低31%，而且这是维护代谢健康最简单的办法了，而且走一万步的好处还有特别多，就不一一说了。

如果一开始一万步太多，那就从每天5000步开始，逐渐增加，每一步都算数。

这三种方法看起来见效慢，却正是打破节食陷阱的长期解法。这也就引出了接下来我想说的，如果节食减肥会反弹人，也有一定的副作用，为什么很多人依然把节食当成减肥的首选呢？

系统性的问题在哪

首先追求确定性和掌控感。节食是一种快速见效的方式，今天饿了一天肚子，明天早上上秤就发现轻了两斤，这种快速反馈和高确定性，会让你更有掌控感。

我在节食+跑步的那段时间，真的是做到了每周都能掉秤，这种反馈就给了我很强的信心。其实工作之后，生活中这样高确定的性的事情已经越来越少了。

节食带来的确定性反馈，就像生活中为数不多还能掌控的事情，让人心甘情愿的付出代价。但我们却很少意识到，看似“自律”的背后，其实正一点点破坏着我们的身体基础。

其次是大部分时候，我们不需要了解身边事物的科学知识。

绝大部分人对营养、代谢的理解非常有限。毕竟我们并不需要详细控制体重的科学方式，体重也能保持的不错。偶尔大吃大喝一段时间，发现自己胖了，稍微控制一下体重也就降回来了。

但一旦你下定决心减肥，简单的理解就远远不够了，你就容易做出错误的判断，比如节食。短期更容易见效，确定性更高，但长远来看只能算下策。

你得有那种看到体检结果突然异常，就赶紧上网查询权威的医学解释一般的态度才行，根据自己的情况用科学的方式控制体重。

而不是只想到节食。

这是东东拿铁的第89篇原创文章，感谢阅读，全文完，喜欢请三连。