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

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

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

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

1. 核心概念图解

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

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

• 
  
• 你想把菜送到五星级酒店摆盘（Web 端高级定制 UI）？可以。
  
• 你想把菜送到路边摊（手机 App）？可以。
  
• 你想把菜送到自动售货机（小程序）？也可以。
  

2. 具体例子

A. 无头浏览器 (Headless Browser)

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

B. 无头编辑器 (Headless Editor)

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

3. 还有哪些常见的 Headless？

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

C. 无头组件库 (Headless UI)

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

D. 无头 CMS (Headless CMS)

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

总结：为什么现在流行 Headless？

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

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