平台原生优先：最省代码的那一层

1为什么这一级省得最多

前三级是「少写」，第 4 级是「整个不用写」。一个手搓的日期选择器组件要包含触发按钮、弹出层、月份网格、键盘导航、无障碍属性、样式表、时区讨论……而浏览器从很多年前就有 <input type="date">。

这就是实测里 -94% 那种数字的来源：不是助手写得更精炼，而是它换掉了整个方案。第 7 章会完整拆一个例子。

2浏览器已经有的表单控件

下面每一条左边是「你以为要装的库」，右边是「平台其实自带」。注意这些原生控件还顺带带来了无障碍、移动端原生键盘和系统主题适配——库反而经常做不到。

3以前要 JS、现在 CSS 就够

顺带一提：你现在看的这个教程站就是按这套规则做的——折线箭头、渐变卡片、深浅主题全部是 CSS 变量，没有引入任何 UI 框架。

4运行时已经带了，别再 npm install

这一类特别值得看：npm 上周下载量几千万的包，做的事可能只有一行。左列这些包名很多人是条件反射装的。

原文对 debounce 的处理很有意思：它没有说「用原生 API」，因为原生确实没有 debounce。它的答案是承认这件事，然后给三行代码：

// ponytail: 3 lines beats a dependency
let t;
const debounce = (fn, ms) => (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); };

5服务端与数据库：同样的思路

原则不只在浏览器里成立。下面三张表是原文里 Node / Python / SQL 三节的精选。

6包装层的宿命

原文用四行讲完了整个论证，这四行值得抄下来贴在显示器边上：

Platform team spends years solving the problem.
Package author wraps it.
You install the wrapper.
The wrapper goes unmaintained.
You debug the wrapper.

翻译过来：平台团队花几年把问题解决掉，包作者包了一层，你装了这层包装，包装没人维护了，于是你在调试包装。跳过包装。平台是跟着你的 App 一起免费发的。

7怎么把这一级变成习惯

1. 写之前先问：浏览器 / 系统 / 数据库本身有没有？搜索词要带 MDN 或 native，而不是带包名
2. 找到了就先用原生版跑通，再判断够不够。通常够
3. 不够用时再装库，并且在回复里写清楚为什么原生不够（这正好符合 Ponytail 的「三行说明」契约）
4. 已经装了 Ponytail 的情况下，你其实不用自己记这些表——助手会被规则逼着先去查第 4 级。这也是它为什么能砍掉 94% 行数的真实原因