秒懂 Headless：为什么现在的软件都要“去头”？

简单来说， "Headless"（无头） 在软件开发中指的是：只有逻辑（后端/内核），没有预设界面（前端/GUI） 的软件架构模式。

这里的"Head（头）"比喻的是用户界面（UI/GUI） ，"Body（身体）"比喻的是核心业务逻辑或引擎。

Headless = 砍掉自带的 UI，只给你提供 API 或核心逻辑，让你自己去画界面。

想象一下 "传统的软件" （比如 Word）：它像一家堂食餐厅。你有厨房（逻辑），也有固定的桌椅板凳和装修风格（UI）。你必须在它提供的环境里吃饭，无法改变装修。

而 "Headless 软件" ：它像一个中央厨房（外卖工厂）。它只负责做饭（逻辑），不提供桌椅（UI）。

传统的浏览器（如 Chrome）： 你打开它，能看到窗口、地址栏、渲染出来的网页，你能用鼠标点击。
无头浏览器（如 Puppeteer, Playwright）：
- 定义： 它是浏览器内核（Chrome/Webkit），但没有可视化的窗口。它在后台（命令行/服务器）运行。
- 怎么用？ 你写代码控制它："打开百度 -> 输入关键词 -> 截图"。
- 有什么用？
  1. 自动化测试： 模拟用户点击，快速跑通几千个测试用例，不需要真的弹出一千个窗口。
  2. 爬虫： 爬取那些需要 JS 渲染的复杂网页。
  3. 生成截图/PDF： 在服务器端把网页渲染成图片或 PDF 报告。

传统的编辑器（如 CKEditor 旧版, Quill）：
- 你引入它，它就自带一套"加粗、斜体、插入图片"的工具栏，自带一套 CSS 样式。
- 缺点： 如果设计师说"把工具栏按钮变成圆形的，而且要悬浮在文字上方"，你就要疯狂覆盖它的默认 CSS，非常痛苦。
无头编辑器（如 Tiptap, Plate, Slate.js）：
- 定义： 它只提供文字处理的核心逻辑 （比如：选中文本、按下 Ctrl+B 变粗体、撤销重做逻辑）。它不提供任何 UI（没有工具栏，没有按钮）。
- 怎么用？ 你需要自己写一个 <button>，自己写样式，然后调用它的 API editor.toggleBold()。
- 有什么用？ 你可以完全自由地定制编辑器的长相。比如 Notion、飞书文档那种高度定制的 UI，必须用无头编辑器开发。

除了浏览器和编辑器，现在的开发趋势中还有：

例子： Radix UI, Headless UI, React Aria。
解释： 以前我们用 Ant Design 或 Bootstrap，按钮长什么样是库定好的。Headless UI 库只提供交互逻辑 （比如下拉菜单怎么打开，键盘怎么选，无障碍怎么读），不提供任何 CSS。
好处： 完美配合 Tailwind CSS，长相由你完全控制。

例子： Strapi, Contentful。
解释： 以前用 WordPress，后台管理内容，前台页面也是 WordPress 生成的（耦合）。Headless CMS 只提供后台管理 和 API。
好处： 你的一份内容（API）可以同时发给网站、App、智能手表、甚至冰箱屏幕。

虽然 Headless 意味着开发者要写更多的代码（因为要自己画 UI），但它解决了现代开发最大的痛点：定制化。

一句话总结：Headless 就是把"业务逻辑"和"界面表现"彻底分家，让你拥有无限的 UI 定制权。