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

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

jQuery

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

雖然 jQuery 依然被廣泛使用，但它已經(jīng)不再是前端開(kāi)發(fā)中的必須技術(shù)。現(xiàn)代前端框架已經(jīng)內(nèi)置了許多 jQuery 的功能，并且具有更好的性能和更少的代碼。bl228資訊網(wǎng)——每日最新資訊28at.com

如果要開(kāi)發(fā)新的前端應(yīng)用，可以選擇當(dāng)下流行的前端框架，如 Vue、React、Nuxt.js、Next.js 等。bl228資訊網(wǎng)——每日最新資訊28at.com

React 類組件

最開(kāi)始，React 中的組件都是類組件，需要結(jié)合生命周期來(lái)編寫(xiě)，寫(xiě)起來(lái)很麻煩。直到 v16.8 版本引入了 Hooks，得以讓我們更方便的使用函數(shù)組件，函數(shù)組件的代碼也更加清晰易懂。bl228資訊網(wǎng)——每日最新資訊28at.com

圖片bl228資訊網(wǎng)——每日最新資訊28at.com

因此，理解類組件是如何工作的以及生命周期方法仍然是很好的。但如果正在編寫(xiě)新的 React 組件，建議使用帶有 React Hook 的函數(shù)組件。bl228資訊網(wǎng)——每日最新資訊28at.com

Bootstrap

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

如今，有很多更優(yōu)秀的替代方案可以選擇，比如：bl228資訊網(wǎng)——每日最新資訊28at.com

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

Python Django

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

AngularJS

AngularJS 由 Google 于 2010 年發(fā)布，當(dāng)時(shí)最著名的 JavaScript 庫(kù)是 jQuery。AngularJS（也稱為 Angular 1）不僅僅是一個(gè)庫(kù)，它是一個(gè)將 MVVM 概念帶入前端開(kāi)發(fā)世界的完整框架。bl228資訊網(wǎng)——每日最新資訊28at.com

2016 年，我們今天所熟知的 Angular 發(fā)布了。注意，不要把 AngularJS 和 Angular 混淆了。AngularJS 從版本 2 開(kāi)始就被 Angular 取代了，目前已經(jīng)不再被 Google 官方支持和維護(hù)。bl228資訊網(wǎng)——每日最新資訊28at.com

bl228資訊網(wǎng)——每日最新資訊28at.com

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

對(duì)于新的項(xiàng)目，可以選擇使用 Angular 來(lái)開(kāi)發(fā)，但是更推薦使用更受歡迎的 Vue 和 React 來(lái)開(kāi)發(fā)，因?yàn)樵趪?guó)內(nèi)這兩個(gè)框架使用的更多，生態(tài)更加完善，社區(qū)比較活躍，這也意味著遇到問(wèn)題時(shí)更容易解決。bl228資訊網(wǎng)——每日最新資訊28at.com

Ajax

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

Grunt、Gulp

Grunt 和 Gulp 都是前端自動(dòng)化構(gòu)建工具，它們可以幫助開(kāi)發(fā)者自動(dòng)化地執(zhí)行文件編譯、壓縮、合并等任務(wù)：bl228資訊網(wǎng)——每日最新資訊28at.com

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

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

雪碧圖

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

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

IE兼容技術(shù)

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

如今，IE 瀏覽器，由現(xiàn)代瀏覽器 Edge 繼續(xù)提供服務(wù)，Edge 緊跟最近的技術(shù)，快速更新和維護(hù)。開(kāi)發(fā)者也不再需要學(xué)習(xí)那些令人頭疼的兼容 IE 的技術(shù)了，喜大普奔！bl228資訊網(wǎng)——每日最新資訊28at.com

圖片 bl228資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-14593-0.html當(dāng)年很流行，現(xiàn)在已經(jīng)淘汰的前端技術(shù)，請(qǐng)不要再繼續(xù)學(xué)了！

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： Fiber Golang：Golang中的強(qiáng)大Web框架

下一篇： DDD實(shí)戰(zhàn)：應(yīng)對(duì)并發(fā)挑戰(zhàn)，五個(gè)技巧讓你輕松應(yīng)對(duì)