在那篇文章里，咱們聊到了一件讓很多同學(xué)都深有感觸的事：前端學(xué)起來越來越“頭大”了。從最初的 Angular、到后來的 React、Vue、再到 Svelte、Solid...

前端框架一個(gè)接一個(gè)，生態(tài)工具也是層出不窮。每個(gè)都說自己比別人簡單，但是整個(gè)項(xiàng)目卻變得越來越大....

弄到現(xiàn)在，做個(gè)小功能，都得引入一大堆的庫才行，各種依賴導(dǎo)致出現(xiàn)各種巨大的 node_modules。不知道還有多少同學(xué)記得下面這張圖...

不過，物極必反，盛極必衰。當(dāng)復(fù)雜度超過了一定的界限之后，接下來大家就會(huì)開始調(diào)轉(zhuǎn)方向，來思考如何解決 “復(fù)雜” 的這個(gè)問題，就好像一個(gè)輪回一樣。

這不，最近有不少同學(xué)提到 htmx，這個(gè)只有 14KB 的小工具。不用 npm、不用構(gòu)建工具，甚至幾乎不用寫 JS，只要在 HTML 上加幾個(gè)屬性，就能實(shí)現(xiàn) Ajax、懶加載、甚至 WebSocket。

挺有意思的，對(duì)吧。

所以，今天這篇文章，咱們就來看看 htmx，順道琢磨下 從 jQuery 到 htmx，前端到底經(jīng)歷了怎樣的復(fù)雜度輪回？

1. jQuery 的極簡時(shí)代

如果你是 2010 年前后開始接觸前端開發(fā)的同學(xué)，應(yīng)該對(duì) jQuery 這個(gè)名字非常熟悉。

那時(shí)候的前端是什么樣子？

• 瀏覽器之間“互相不待見”：IE6 一家獨(dú)大，還要兼容 Firefox、Safari。
• 寫個(gè) Ajax 要 20 多行代碼，還得寫 if-else 來區(qū)分不同瀏覽器 API。
• 操作 DOM 像拆炸彈，一不小心就各種報(bào)錯(cuò)。

就在這種背景下，2006 年 John Resig 發(fā)布了 jQuery。

結(jié)果呢？簡直是 降維打擊：

• 選擇器簡化：

$('.btn')

就能替代冗長的 document.getElementsByClassName。

• Ajax 統(tǒng)一（那時(shí)候還沒有 axios）：

$.ajax({ url: '/api/data', success: fn })

跨瀏覽器差異？一行代碼全解決。

• 鏈?zhǔn)秸{(diào)用：

$('#box').addClass('active').fadeIn().slideDown()

一口氣把多個(gè)操作串起來。

再加上爆炸式的插件生態(tài)，什么輪播圖、模態(tài)框、富文本編輯器……幾乎你能想到的效果，都有人幫你寫好封裝?？截愐欢未a，就能立刻上線。

最夸張的時(shí)候，全世界 90% 的網(wǎng)站都在用 jQuery。微軟、Google 把它放進(jìn)官方 CDN，Visual Studio 直接內(nèi)置為默認(rèn)庫。哪怕是現(xiàn)在，依然有很多網(wǎng)站還在使用 jQuery。具體可以參考我之前寫的這篇文章 2025 了，jQuery 還有價(jià)值嗎？

在當(dāng)年，那句著名的口號(hào)：Write Less, Do More 完美地詮釋了 jQuery 所代表的“極簡時(shí)代”。

2. 各種框架開始崛起

但好景不長。

隨著 Web 應(yīng)用的規(guī)模越來越大，前端不再只是寫幾個(gè)動(dòng)效、搞搞 Ajax 請(qǐng)求，而是要承擔(dān)起 單頁面應(yīng)用（SPA） 的重任：路由、狀態(tài)同步、組件復(fù)用……一大堆問題涌了上來。

這時(shí)候，Angular、React、Vue 等框架陸續(xù)登場，前端正式進(jìn)入了“框架時(shí)代”。

但是，復(fù)雜度也隨之而來

• 構(gòu)建工具越來越重：從 Grunt、Gulp 到 Webpack，再到 Vite。光是配置文件，就能寫出 200 行。
• 狀態(tài)管理成了新坑：Redux、MobX、Vuex、Pinia、Zustand……一個(gè)比一個(gè)復(fù)雜。
• 生態(tài)洪水泛濫：寫個(gè)表單，要引入三四個(gè)庫；做個(gè) SSR，還得選擇 Next、Nuxt、Remix。
• TypeScript 綁架：簡單項(xiàng)目也要 interface、類型聲明一大堆。

有個(gè)段子說得特別形象：

2015 年用 jQuery 寫一個(gè)后臺(tái)管理系統(tǒng)，1000 行代碼搞定。2020 年用 React + TS + Redux，寫了 5000 行，還沒調(diào)通狀態(tài)更新。

再然后 “框架疲勞” 開始出現(xiàn)了 Angular -> React -> Vue、React class -> React Hooks、Vue Options -> Vue Compositions，還有一些新的競爭者 Solid、Svelte 等

框架迭代速度比項(xiàng)目周期還快，很多同學(xué)產(chǎn)生了強(qiáng)烈的 “學(xué)不動(dòng)了” 的焦慮感。

更尷尬的是，其實(shí) 很多的業(yè)務(wù)其實(shí)并不需要這么復(fù)雜的框架。

比如：一個(gè)內(nèi)部管理系統(tǒng)，幾張表單、幾個(gè)表格，結(jié)果卻被硬生生套上全家桶，node_modules 百 MB 起步，首屏還要加載好幾秒。。。

3. 物極必反 htmx

復(fù)雜到一定程度，行業(yè)自然會(huì)開始反思：我們是不是走得太遠(yuǎn)了？

就在大家被各種框架和工具折騰得頭大時(shí)，又有一個(gè)新的東西 htmx 開始被很多同學(xué)提到了。

htmx 到底是什么？

一句話總結(jié)：讓 HTML 重新?lián)碛谐芰Α?/p>

• 體積只有 14KB，引入 CDN 即可使用；
• 不需要 npm、不需要打包工具；
• 很多場景下甚至不用寫一行 JavaScript；
• 只要在標(biāo)簽里加幾個(gè) hx-* 屬性，就能完成異步請(qǐng)求、懶加載、甚至 WebSocket。

比如我們要做一個(gè)點(diǎn)贊按鈕：

<button hx-post="/like" hx-swap="outerHTML">點(diǎn)贊</button>

點(diǎn)擊后會(huì)自動(dòng)發(fā)送 POST 請(qǐng)求，后端返回新的 HTML 片段，htmx 會(huì)直接替換按鈕區(qū)域。

是不是有點(diǎn) jQuery 那味兒？

所以，有人調(diào)侃它是 “jQuery 的精神續(xù)作” ????

4. jQuery VS 框架 VS htmx

說到這，咱們不妨把 jQuery、現(xiàn)代框架、htmx 放在一起橫向?qū)Ρ纫幌拢纯此鼈兏髯缘亩ㄎ唬?/p>

最后總結(jié)一下

前端復(fù)雜度，本質(zhì)上就是在 簡單 ? 復(fù)雜 之間不斷循環(huán)。

jQuery 代表了“從復(fù)雜到簡單”，框架代表了“從簡單到復(fù)雜”。

而 htmx 現(xiàn)在還真不好說，也許 它意味著一種新的“輪回”，也許 它也只是曇花一現(xiàn)......