痛点这方面，造轮子累人，还不标准？

你是否曾为 className 的字符串拼接头疼？是否曾引入整个 jQuery 或 Lodash 只为用个 trimcloneDeep 或 closest？早期前端开发充斥着“不兼容、写样板代码、引入重型库只为用小功能”的痛苦。浏览器原生 API 的演进史，就是一部“社区库填坑、标准后续跟上”的历史。了解这些 API 的“前世今生”，能帮你少造轮子，更自信地拥抱原生开发。

. querySelector / querySelectorAll：告别繁琐的 DOM 查找

过去的痛点这方面，API 碎片化。复杂选择器需手写遍历逻辑

早期只能用 getElementByIdgetElementsByClassNamegetElementsByTagName。想选 “类名为 .buy-now 的第 n 个按钮”？得先取集合再手写循环过滤，代码冗长且易错。

说到库先行者，Dojo dojo.query → jQuery $

Dojo 首创 CSS 选择器引擎思想。**jQuery** 把 $ 变成整整一代开发者的“肌肉记忆”，证明 “CSS Selector as Query API” 是最符合直觉的设计。

从标准落地来看，

// 一行代码搞定复杂选择
const button = document.querySelector;其实，const allButtons = document.querySelectorAll;allButtons.forEach);

. 声明式 UI ：把 JS 写进 HTML 属性里

说到过去的痛点。样板代码泛滥，显隐逻辑到处复制粘贴

每个 Modal/Tooltip 都要写事件监听、切换 class、处理焦点陷阱…，

// 每个弹窗都要重复这套逻辑
button.addEventListener => modal.classList.add);

说到库先行者。Bootstrap Data API

Bootstrap 洞察到这种重复模式，推出 声明式写法。插件读取属性自动绑定行为。**零 JS 代码**就可以交互，极大降低了门槛。

再看标准落地，Popover API & Command API

浏览器原生吸收了“声明式交互”理念：无需 JS、自动处理焦点/ESC关闭/层级管理。

Open


Hello
Close

Open Dialog

Close

. classList：告别字符串拼接噩梦

说到过去的痛点，操作 className 是字符串处理地狱

添加需判重、删除需正则/分割过滤、切换需读取再判断…，一不小心就把别的类名搞坏。话说回来，

// 原始时代反面教材
el.className += ' is-active';// 风险：重复添加、类名粘连
el.className = el.className.replace.trim;// 脆弱 

说到库先行者。**jQuery** /.removeClass/.toggleClass/.hasClass )** jQuery 用链式调用封装了所有脏活累活，**确立了 “Token List” 操作模型**。**

标准落地的观点是，**DOMTokenList ** ** 浏览器原生实现并**超越 jQuery****：

const btn = document.querySelector;btn.classList.add;// 支持多参数
btn.classList.remove;btn.classList.toggle;btn.classList.contains;// true/false
btn.classList.replace;// jQuery 没有此方法

. 数组/字符串/对象工具方法大全：Lodash/Underscore/MooTools 的“平移”

⚠️ 过去的痛点基础能力缺失，每个项目必装工具库

想数组去重？  不存在。想 trim/padStart/includes ?全靠 Lodash/Underscore/MooTools/Prototype.js 填坑。怎么说呢，包体积膨胀、Tree-shaking 不彻底、依赖地狱。

📚 库先行者*Underscore → Lodash 、MooTools 、Prototype.js *

这些库在生产环境跑了十几年，验证了高频 API 的命名、参数顺序、边界行为。

✅ 标准落地*ECMAScript 原生方法逐个“填坑” *



= 
= =td==repeat=|=padStart/padEnd===>= /=>= />=

= =td rowspan ="4">=对象=/st rong>==keys/values.entries===>/t d>=/t r>=
<=t r=>=/=/
<=tbody=>=

. structuredClone: 深拷贝终于不用“黑科技”了

⚠️ 过去的痛点: 深拷贝是面试必考、业务频发但方案全有缺陷：


JSON.parse)丢失函数、DateRegExpMap/Setundefined；循环引用报错。


Lodash _.cloneDeep体积大需维护依赖。


📚 库先行者: Lodash _.cloneDeep 长期垄断深拷贝方案。

✅ 标准落地: *structuredClone *

原生支持循环引用、DateMap/SetBlobFileImageData... 几乎所有结构化数据。

const original={ name:'Jad'。createdAt:n ew Date,tags:n ew Map,nested:{items: }};怎么说呢，const copy=s tructuredClone;copy.nested.items.push;console.log，// 未改变!console.log，// true
console.log;// true


. Promise: 混乱异步时代的终结者

⚠️ 过去的痛点: Callback Hell、错误处理分散并发控制极难写。

早期满屏 fs.readFile => fs.readFile)代码横向发展try-catch 捕获不到异步错误。其实，

📚 库先行者百花齐放：


Dojo Deferred

jQuery Deferred 

Q。Bluebird 

Promises/A+ 规范统一了契约。


✅ 标准落地: *原生 Promise + async/await *

成为语言级默认异步模型，配合 fetch 环境完美闭环。

async function loadUser{
const res=await fetch;if throw new Error;return res.json;}
const user=await loadUser;console.log，


. ES Modules : 模块化之争尘埃落定

⚠️ 过去的痛点: JS 天生无模块程序，全局变量污染依赖管理靠约定。


Node.js 强推 CommonJS - 同步运行时加载。

浏览器端 RequireJS 推 AMD `) - 异步语法繁琐。

建立工具打包时还得做格式转换、Tree-shaking 难度大。


📚 库先行者:Node.js 、RequireJS/Dojo.

社区实践倒逼出静态分析友好的静态模块结构需求。

✅ 标准落地: ES Modules

浏览器与 Node.js 统一静态结构利于 Tree-shaking顶层 awaitImport Maps 落地。

. Temporal : 把烂透了 的 Date 对象扔进垃圾桶

⚠️ 过去的痛点Date 是 JS 最被诟虑设计之一:**



月份从 `开始 **

时区处理极弱、解析行为跨浏览器不一致

*可变性导致 Bug *` 改变原对象)

**无纯日期时间概念


年没人敢动它**，社区只能靠 Moment.js/Day.js/Luxon 包装。

📚 库先行者:Moment.js *、Luxon *date-fns *。它们证明 *"Immutable + Explicit Timezone + Plain Objects" 是正确方向。

✅ *Temporal Proposal *:
彻底替换 Date，不可变纳秒精度显式时区PlainDateTime/ZonedDateTime 区分清晰**。

const birthday=Temporal.P lainDate.from;const reminder=birt hday.subtract;console.log);// -
console.log);// - 未改变，


. Element.closest: DOM向上查找终于不用 while循环

⚠️ *过去 的痛:事件委托 时查找最近祖先元素手写循环又丑又慢:
javascript
let el = event.target;while) el = el.parentElement;// 忘记判空直接报错

📚 库先 行:**jQu ery .clo sest — 极简API设计典范。

✅ Element.closest 原生上位:
内部 C++实现高效、返回 null 不报错完美契合事件委托模式。

document.addEventListener('click',e=>{
const btn=e.target.closest;if return，console.log;})，


💡 写在最终 ： 被吸收不是“输”。是“功成身退”

不是所有特性都源于库，但 “社区探索 → 验证常用方法 → 网站吸收” 是最健康演进方法。

这些库在千万项目中经受考验、收集反馈迭代最终沉淀为网站能力。不过，网站吸收它们不是它们“输”了而是它们成功到“不再必要”。

谨以此怀念当年手写 Polyfill、配置 Shim、为了兼容 IE 引入主要包体积却只用 % 功能 的日子——那些代码已成历史尘埃，而我们站在巨人肩膀上写下更简洁健壮 的原生代码。


分类
代表性原生 API 



 数组 
map/filter/reduce/forEach  

find/findIndex/some/every  

includes  | flat/flatMap  | toSorted/toReversed/etc 

字符串
= trim/trimStart/trimEnd= /td>= /tr>=
=includes/startsWith/endsWith==>= /= /=>= /= /=>= />=