前端復(fù)雜度的“輪回”：從 jQuery 到 htmx
在那篇文章里，咱們聊到了一件讓很多同學(xué)都深有感觸的事：前端學(xué)起來越來越“頭大”了。從最初的 Angular、到后來的 React、Vue、再到 Svelte、Solid...
前端框架一個接一個，生態(tài)工具也是層出不窮。每個都說自己比別人簡單，但是整個項目卻變得越來越大....
弄到現(xiàn)在，做個小功能，都得引入一大堆的庫才行，各種依賴導(dǎo)致出現(xiàn)各種巨大的 node_modules。不知道還有多少同學(xué)記得下面這張圖...
不過，物極必反，盛極必衰。當(dāng)復(fù)雜度超過了一定的界限之后，接下來大家就會開始調(diào)轉(zhuǎn)方向，來思考如何解決 “復(fù)雜” 的這個問題，就好像一個輪回一樣。
這不，最近有不少同學(xué)提到 htmx，這個只有 14KB 的小工具。不用 npm、不用構(gòu)建工具，甚至幾乎不用寫 JS，只要在 HTML 上加幾個屬性，就能實現(xiàn) Ajax、懶加載、甚至 WebSocket。
挺有意思的，對吧。
所以，今天這篇文章，咱們就來看看 htmx，順道琢磨下 從 jQuery 到 htmx，前端到底經(jīng)歷了怎樣的復(fù)雜度輪回？
1. jQuery 的極簡時代
如果你是 2010 年前后開始接觸前端開發(fā)的同學(xué)，應(yīng)該對 jQuery 這個名字非常熟悉。
那時候的前端是什么樣子？
- 瀏覽器之間“互相不待見”：IE6 一家獨(dú)大，還要兼容 Firefox、Safari。
- 寫個 Ajax 要 20 多行代碼，還得寫 if-else 來區(qū)分不同瀏覽器 API。
- 操作 DOM 像拆炸彈，一不小心就各種報錯。
就在這種背景下，2006 年 John Resig 發(fā)布了 jQuery。
結(jié)果呢？簡直是 降維打擊：
- 選擇器簡化：
$('.btn')就能替代冗長的 document.getElementsByClassName。
- Ajax 統(tǒng)一（那時候還沒有 axios）：
$.ajax({ url: '/api/data', success: fn })跨瀏覽器差異？一行代碼全解決。
- 鏈?zhǔn)秸{(diào)用：
$('#box').addClass('active').fadeIn().slideDown()一口氣把多個操作串起來。
再加上爆炸式的插件生態(tài)，什么輪播圖、模態(tài)框、富文本編輯器……幾乎你能想到的效果，都有人幫你寫好封裝。拷貝一段代碼，就能立刻上線。
最夸張的時候，全世界 90% 的網(wǎng)站都在用 jQuery。微軟、Google 把它放進(jìn)官方 CDN，Visual Studio 直接內(nèi)置為默認(rèn)庫。哪怕是現(xiàn)在，依然有很多網(wǎng)站還在使用 jQuery。具體可以參考我之前寫的這篇文章 2025 了，jQuery 還有價值嗎？
在當(dāng)年，那句著名的口號：Write Less, Do More 完美地詮釋了 jQuery 所代表的“極簡時代”。
2. 各種框架開始崛起
但好景不長。
隨著 Web 應(yīng)用的規(guī)模越來越大，前端不再只是寫幾個動效、搞搞 Ajax 請求，而是要承擔(dān)起 單頁面應(yīng)用（SPA） 的重任：路由、狀態(tài)同步、組件復(fù)用……一大堆問題涌了上來。
這時候，Angular、React、Vue 等框架陸續(xù)登場，前端正式進(jìn)入了“框架時代”。
但是，復(fù)雜度也隨之而來
- 構(gòu)建工具越來越重：從 Grunt、Gulp 到 Webpack，再到 Vite。光是配置文件，就能寫出 200 行。
- 狀態(tài)管理成了新坑：Redux、MobX、Vuex、Pinia、Zustand……一個比一個復(fù)雜。
- 生態(tài)洪水泛濫：寫個表單，要引入三四個庫；做個 SSR，還得選擇 Next、Nuxt、Remix。
- TypeScript 綁架：簡單項目也要 interface、類型聲明一大堆。
有個段子說得特別形象：
2015 年用 jQuery 寫一個后臺管理系統(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 等
框架迭代速度比項目周期還快，很多同學(xué)產(chǎn)生了強(qiáng)烈的 “學(xué)不動了” 的焦慮感。
更尷尬的是，其實 很多的業(yè)務(wù)其實并不需要這么復(fù)雜的框架。
比如：一個內(nèi)部管理系統(tǒng)，幾張表單、幾個表格，結(jié)果卻被硬生生套上全家桶，node_modules 百 MB 起步，首屏還要加載好幾秒。。。
3. 物極必反 htmx
復(fù)雜到一定程度，行業(yè)自然會開始反思：我們是不是走得太遠(yuǎn)了？
就在大家被各種框架和工具折騰得頭大時，又有一個新的東西 htmx 開始被很多同學(xué)提到了。
htmx 到底是什么？
一句話總結(jié)：讓 HTML 重新?lián)碛谐芰Α?/p>
- 體積只有 14KB，引入 CDN 即可使用；
- 不需要 npm、不需要打包工具；
- 很多場景下甚至不用寫一行 JavaScript；
- 只要在標(biāo)簽里加幾個 hx-* 屬性，就能完成異步請求、懶加載、甚至 WebSocket。
比如我們要做一個點贊按鈕：
<button hx-post="/like" hx-swap="outerHTML">點贊</button>點擊后會自動發(fā)送 POST 請求，后端返回新的 HTML 片段，htmx 會直接替換按鈕區(qū)域。
是不是有點 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)......
