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