當(dāng)年很流行，現(xiàn)在已經(jīng)淘汰的前端技術(shù)，請(qǐng)不要再繼續(xù)學(xué)了！

作者：CUGGZ 2023-10-22 14:18:20

2022 年 6 月 16 日，IE 瀏覽器正式退役，之后將由 Edge 瀏覽器接棒繼續(xù)提供服務(wù)。許多網(wǎng)站和程序要求兼容 IE，IE6 對(duì) W3C 標(biāo)準(zhǔn)支持不夠友好，這可能是很多前端開發(fā)的噩夢了，IE6 的普及導(dǎo)致之后的 20 年間，不斷有開發(fā)者因?yàn)檫m配需要適配 IE6 而焦頭爛額。

近幾年，前端技術(shù)真可謂是飛速發(fā)展，不斷有新的技術(shù)涌現(xiàn)，爆火的前端框架 Astro，前端運(yùn)行時(shí) Bun，構(gòu)建工具 Vite 等都給前端提供了強(qiáng)大動(dòng)力。當(dāng)然，也有很多前端技術(shù)隨著技術(shù)的發(fā)展不再需要使用，有了更好的替代方案。本文就來盤點(diǎn)一下那些不再流行的前端技術(shù)，以及對(duì)應(yīng)的現(xiàn)代化替代方案。

本文提到的技術(shù)不代表不能再使用了，其仍存在一些適用場景，并且很多遺留老項(xiàng)目可能是使用這些技術(shù)實(shí)現(xiàn)的，需要進(jìn)行維護(hù)。只是在新項(xiàng)目技術(shù)選型時(shí)，應(yīng)盡可能考慮使用更為現(xiàn)代化的前端技術(shù)。

jQuery

jQuery 仍然是一個(gè)很流行的 JavaScript 庫，其生態(tài)系統(tǒng)中有超百萬個(gè)插件。但這是一個(gè)技術(shù)上的歷史遺留問題，并不是真的很流行，只是很多老網(wǎng)站仍然使用。根據(jù) BuiltWith 的數(shù)據(jù)，排名前 100 萬的網(wǎng)站中有 78% 仍以某種方式使用 jQuery，很大一部分原因是 WordPress 使用了 jQuery，而很多網(wǎng)站都是使用 WordPress 創(chuàng)建的。

雖然 jQuery 依然被廣泛使用，但它已經(jīng)不再是前端開發(fā)中的必須技術(shù)。現(xiàn)代前端框架已經(jīng)內(nèi)置了許多 jQuery 的功能，并且具有更好的性能和更少的代碼。

如果要開發(fā)新的前端應(yīng)用，可以選擇當(dāng)下流行的前端框架，如 Vue、React、Nuxt.js、Next.js 等。

React 類組件

最開始，React 中的組件都是類組件，需要結(jié)合生命周期來編寫，寫起來很麻煩。直到 v16.8 版本引入了 Hooks，得以讓我們更方便的使用函數(shù)組件，函數(shù)組件的代碼也更加清晰易懂。

圖片

因此，理解類組件是如何工作的以及生命周期方法仍然是很好的。但如果正在編寫新的 React 組件，建議使用帶有 React Hook 的函數(shù)組件。

Bootstrap

Bootstrap 是一個(gè)流行的 CSS 框架，它提供了預(yù)定義的CSS樣式、網(wǎng)格系統(tǒng)、JavaScript插件以及許多可重用的組件，如導(dǎo)航欄、按鈕、表單等。在七八年前，很多網(wǎng)站都使用 Bootstrap 來編寫，當(dāng)時(shí)他們聲稱自己是“世界上最先進(jìn)的響應(yīng)式前端框架”。但是，現(xiàn)在來看，Bootstrap 的樣式并不是很美觀，還存在包體積大，難以自定義，實(shí)現(xiàn)落后，開發(fā)體驗(yàn)不好等問題。

如今，有很多更優(yōu)秀的替代方案可以選擇，比如：

UI 組件庫：Ant Design、Element UI、Arco Design；
CSS-in-JS：Styl-Components、Emotion；
功能類優(yōu)先框架：Tailwind CSS、UnoCSS。

Python Django

Django 是 Python 語言的一種 Web 開發(fā)框架，曾被廣泛用于創(chuàng)建動(dòng)態(tài)網(wǎng)站，但由于現(xiàn)代前端技術(shù)如 React、Angular 和 Vue 的興起，Django 已經(jīng)不再是前端開發(fā)中的必須技術(shù)。Django 相對(duì)于現(xiàn)代前端框架來說，生態(tài)系統(tǒng)不完善，開發(fā)難度更大，并且不符合現(xiàn)代開發(fā)的前后端分離的理念。可以選用現(xiàn)在更為流行的前端框架，比如 React、Vue等。

AngularJS

AngularJS 由 Google 于 2010 年發(fā)布，當(dāng)時(shí)最著名的 JavaScript 庫是 jQuery。AngularJS（也稱為 Angular 1）不僅僅是一個(gè)庫，它是一個(gè)將 MVVM 概念帶入前端開發(fā)世界的完整框架。

2016 年，我們今天所熟知的 Angular 發(fā)布了。注意，不要把 AngularJS 和 Angular 混淆了。AngularJS 從版本 2 開始就被 Angular 取代了，目前已經(jīng)不再被 Google 官方支持和維護(hù)。

Angular 是一個(gè)用 TypeScript 編寫的現(xiàn)代化前端框架，是對(duì) AngularJS 的改進(jìn)和升級(jí)。它采用了組件化編程范式、模塊化體系結(jié)構(gòu)，并提供了更好的性能、可擴(kuò)展性和可測試性。Angular 又被稱為 "Angular 2+" 或 "Angular Next"。

對(duì)于新的項(xiàng)目，可以選擇使用 Angular 來開發(fā)，但是更推薦使用更受歡迎的 Vue 和 React 來開發(fā)，因?yàn)樵趪鴥?nèi)這兩個(gè)框架使用的更多，生態(tài)更加完善，社區(qū)比較活躍，這也意味著遇到問題時(shí)更容易解決。

Ajax

Ajax 在前端開發(fā)中曾經(jīng)被廣泛使用，但現(xiàn)在已經(jīng)成為基本技術(shù)，不再是獨(dú)立的技術(shù)。Ajax 只有在前端面試中可能會(huì)被問到，很少會(huì)在實(shí)際的項(xiàng)目中需要編寫 Ajax。Ajax 的功能簡單，使用起來有很多局限性，推薦使用功能更全面的第三方數(shù)據(jù)請(qǐng)求庫來處理數(shù)據(jù)請(qǐng)求，比如 Axios，它們的功能更加全面，使用起來也更方便，或者更現(xiàn)代化的前端請(qǐng)求 API：fetch。

Grunt、Gulp

Grunt 和 Gulp 都是前端自動(dòng)化構(gòu)建工具，它們可以幫助開發(fā)者自動(dòng)化地執(zhí)行文件編譯、壓縮、合并等任務(wù)：

Grunt 是一個(gè)基于配置的前端自動(dòng)化工具，開發(fā)者需要通過編寫詳細(xì)的配置文件（Gruntfile.js）來描述任務(wù)的執(zhí)行過程。Grunt 的生態(tài)系統(tǒng)中有大量的插件，覆蓋了幾乎所有前端開發(fā)中可能用到的任務(wù)，這讓開發(fā)者可以快速找到適合自己的插件并加以利用。
Gulp 是基于流式處理的前端自動(dòng)化構(gòu)建工具，它的核心理念是使用流來處理文件。在任務(wù)執(zhí)行過程中，文件以流的形式在任務(wù)之間傳遞，這種方式使得 Gulp 的構(gòu)建過程更加高效，并且能夠減少磁盤的讀寫操作。

雖然這兩個(gè)工具都很強(qiáng)大，目前還有一些使用場景。但是隨著前端的快速發(fā)展，出現(xiàn)了很多更為現(xiàn)代化工具，比如 Webpack、Vite 等，這些工具使用更簡單，效率更高，推薦使用這些現(xiàn)代化的構(gòu)建工具。

雪碧圖

CSS雪碧圖是一種將多個(gè)小圖標(biāo)或圖片合并成一張大圖的技術(shù)。通過將多個(gè)圖標(biāo)或圖片合并成一張大圖，然后使用CSS的背景定位來控制顯示不同部分的圖像，從而減少了頁面加載的請(qǐng)求次數(shù)，提高網(wǎng)頁性能。

但是隨著前端技術(shù)的快速發(fā)展，出現(xiàn)了更多實(shí)用的技術(shù)，比如 SVG、iconfont，這些技術(shù)提供了更多靈活性和便利性，很多情況下可以取代雪碧圖。HTTP 2 的出現(xiàn)使得一次可以請(qǐng)求多個(gè)文件，雪碧圖存在的意義就不大了。并且，由于雪碧圖使用復(fù)雜，不易維護(hù)，一張圖崩了整個(gè)網(wǎng)頁的圖標(biāo)就都崩了，圖標(biāo)位置確定后就不好再修改等問題，不再需要雪碧圖這種形式。