先聊個(gè)很多初學(xué)者都會(huì)困惑的問(wèn)題手上這個(gè)項(xiàng)目到底用 jQuery 還是 Bootstrap這兩個(gè)名字經(jīng)常一起出現(xiàn)在各種需求文檔和招聘 JD 里導(dǎo)致很多人以為它們是二選一的競(jìng)爭(zhēng)對(duì)手甚至把它們當(dāng)成同一種東西。但真正動(dòng)手寫(xiě)過(guò)幾個(gè)項(xiàng)目之后你會(huì)發(fā)現(xiàn)這倆壓根不在同一個(gè)跑道上——一個(gè)是管“邏輯動(dòng)作”的 JavaScript 庫(kù)一個(gè)是管“外觀(guān)布局”的 CSS 框架。拿它們做對(duì)比就像問(wèn)“電鉆和裝修圖紙哪個(gè)更好”一樣答案依賴(lài)于你此刻要鉆墻還是看布局。這篇博文我不想念文檔就結(jié)合這幾年做過(guò)的實(shí)際項(xiàng)目把這兩個(gè)工具的核心差別、各自擅長(zhǎng)什么、什么場(chǎng)景必須組合使用、以及我踩過(guò)的那些坑一起倒出來(lái)。如果你想搞清楚為什么老項(xiàng)目里總有它們倆的身影或者正在糾結(jié)新項(xiàng)目哪種技術(shù)選型這篇應(yīng)該能幫你省不少時(shí)間。1. 先把定位掰開(kāi)一個(gè)管動(dòng)作一個(gè)管外表1.1 jQuery 到底是個(gè)什么東西jQuery 是一個(gè) JavaScript 庫(kù)核心賣(mài)點(diǎn)是“Write Less, Do More”。它把瀏覽器原生 API 里那些又長(zhǎng)又難記的方法比如document.getElementById、document.querySelectorAll、XMLHttpRequest統(tǒng)一封裝成簡(jiǎn)潔的鏈?zhǔn)秸{(diào)用。你只需要寫(xiě)$(#btn).on(click, function(){})就能完成事件綁定寫(xiě)$(.list).addClass(active)就能批量操作類(lèi)名寫(xiě)$.ajax({url: ...})就能發(fā)請(qǐng)求。它解決的痛點(diǎn)非常明確跨瀏覽器差異和冗長(zhǎng)的 DOM 操作?；叵胍幌略缙谇岸碎_(kāi)發(fā)IE 和 Chrome 對(duì)同一個(gè)事件的實(shí)現(xiàn)方式都不一樣寫(xiě)原生 JS 要兼容各種瀏覽器真的會(huì)寫(xiě)到懷疑人生。jQuery 把這一層差異抹平了這也是它在 2010 年前后能橫掃市場(chǎng)的根本原因。不過(guò)要記住jQuery 不管樣式。它不會(huì)幫你決定按鈕是藍(lán)色還是紅色不提供柵格布局也不管你的頁(yè)面在手機(jī)上怎么排列。它的注意力全放在“元素選中了之后怎么操作、事件怎么響應(yīng)、數(shù)據(jù)怎么請(qǐng)求”這些行為層面。1.2 Bootstrap 到底是個(gè)什么東西Bootstrap 是一個(gè) CSS 框架最初叫 Twitter Blueprint后來(lái)從 Twitter 內(nèi)部孵化出來(lái)開(kāi)源。它的核心賣(mài)點(diǎn)是幫你“快速搭出漂亮且響應(yīng)式的界面”。你不需要自己從零寫(xiě)媒體查詢(xún)不需要自己琢磨怎么分欄直接給 div 套上col-md-6這種類(lèi)名布局就出來(lái)了。按鈕、導(dǎo)航、卡片、模態(tài)框、表單樣式全是現(xiàn)成的。它解決的問(wèn)題是絕大多數(shù)業(yè)務(wù)系統(tǒng)的界面長(zhǎng)得都差不多沒(méi)有必要每次都把 CSS 重寫(xiě)一遍。你用 Bootstrap 的柵格系統(tǒng)五個(gè)頁(yè)面能寫(xiě)一個(gè)下午你用它的組件庫(kù)后臺(tái)管理的表格加表單頁(yè)面半個(gè)小時(shí)就能拼出來(lái)。尤其是活動(dòng)頁(yè)、后臺(tái)管理、企業(yè)官網(wǎng)這類(lèi)“內(nèi)容展示為主”的項(xiàng)目Bootstrap 的效率優(yōu)勢(shì)非?？鋸?。但它同樣有邊界——Bootstrap 不負(fù)責(zé)業(yè)務(wù)邏輯。它給你現(xiàn)成的模態(tài)框容器比如一個(gè)彈窗的 DOM 結(jié)構(gòu)它幫你把彈窗的樣式做得漂漂亮亮但彈窗里要填什么數(shù)據(jù)、點(diǎn)確認(rèn)鍵之后要做什么那是你自己的 JavaScript 的事。1.3 為什么“jQuery vs Bootstrap”這種問(wèn)題會(huì)頻繁出現(xiàn)我觀(guān)察到大家會(huì)把這倆拉到一起對(duì)比原因有三個(gè)。第一非常多入門(mén)教程是“jQuery Bootstrap”捆綁教學(xué)的。早期很多課程講“三件套”HTML 管結(jié)構(gòu)、CSS 管樣式、jQuery 管行為然后再往前一步就引入 Bootstrap 管理整體風(fēng)格。很多人的知識(shí)體系里它們天然存在感一樣強(qiáng)。第二老版本的 Bootstrap主要指 3 和 4的 JavaScript 插件部分明確依賴(lài) jQuery。你要用 Bootstrap 自帶的輪播圖、模態(tài)框、下拉菜單就必須額外引 jQuery。這就造成了一種錯(cuò)覺(jué)Bootstrap 和 jQuery 是一體的甚至有人認(rèn)為 Bootstrap 是 jQuery 的一個(gè)“皮膚插件”。第三求職招聘里的 JD 寫(xiě)法加劇了混淆。很多崗位寫(xiě)“熟悉 jQuery、Bootstrap”把兩個(gè)名詞并列好像它們是同一層級(jí)的技術(shù)棧。新人一看既然要求并列出現(xiàn)那應(yīng)該是差不多的東西于是產(chǎn)生了對(duì)比需求。真相是這兩個(gè)東西既不是替代關(guān)系也不是并列關(guān)系它們是不同維度的工具。把維度分清楚后面所有的選擇決策都會(huì)順理成章。2. 核心能力拆解邏輯和樣式的邊界到底在哪2.1 jQuery 的看家本領(lǐng)繼續(xù)深挖一下 jQuery 能做的幾件事。DOM 操作是它的第一塊招牌。這句話(huà)怎么理解呢你可以把 HTML 頁(yè)面上所有標(biāo)簽看成一棵樹(shù)jQuery 就是給你一把量身定做的剪刀你可以精準(zhǔn)地剪掉某個(gè)葉子、替換某根樹(shù)枝、在某個(gè)節(jié)點(diǎn)下面追加新節(jié)點(diǎn)。原生 JS 想實(shí)現(xiàn)“選中頁(yè)面上所有 class 為 item 的元素并給它們加上一個(gè)邊框”你得先querySelectorAll遍歷再forEach加樣式j(luò)Query 一句$(.item).css(border, 1px solid red)就完事而且返回的還是 jQuery 對(duì)象可以繼續(xù)鏈?zhǔn)秸{(diào)用。事件處理是第二塊招牌。on、off、trigger這套事件 API封裝了事件綁定、解綁、手動(dòng)觸發(fā)還統(tǒng)一解決了老版本 IE 的attachEvent兼容問(wèn)題。我記得早年間做 Web 端交互最煩的就是鍵盤(pán)事件在各瀏覽器里的 keyCode 差異jQuery 統(tǒng)一成event.keyCode的相對(duì)規(guī)范省了一大堆 polyfill。AJAX 是第三塊招牌。$.ajax封裝了原生的 XMLHttpRequest提供簡(jiǎn)潔的success、error回調(diào)。更簡(jiǎn)化版的$.get、$.post在當(dāng)年幫我少寫(xiě)了幾百行模板代碼。后來(lái) fetch 出現(xiàn)以后 jQuery 的 AJAX 優(yōu)勢(shì)沒(méi)那么耀眼了但在老項(xiàng)目里依然是主力方案。動(dòng)畫(huà)是第四塊招牌。fadeIn、slideUp、animate這些方法用兩三行代碼就能做出平滑的過(guò)渡效果。雖然現(xiàn)在 CSS3 的transition和animation性能更好但 jQuery 動(dòng)畫(huà)在兼容性方面的表現(xiàn)仍然很有存在感特別是在必須支持老版本瀏覽器的項(xiàng)目里。2.2 Bootstrap 的看家本領(lǐng)Bootstrap 最核心的資產(chǎn)是柵格系統(tǒng)。這個(gè)概念聽(tīng)起來(lái)抽象實(shí)際用起來(lái)非常直觀(guān)把一行橫向劃分為 12 列你通過(guò)col-xs-4、col-sm-6、col-md-12來(lái)控制元素在不同屏幕寬度下各占幾列。頁(yè)面自動(dòng)適配手機(jī)、平板、電腦不用自己寫(xiě)媒體查詢(xún)。我第一次用柵格替換掉自己的浮動(dòng)布局時(shí)最大的感受就是“原來(lái)適配移動(dòng)端可以這么輕松”。組件庫(kù)是第二塊招牌。導(dǎo)航欄、按鈕組、下拉菜單、警告框、模態(tài)框、輪播圖、分頁(yè)、進(jìn)度條、表單控件全是寫(xiě)在文檔里可以直接復(fù)制粘貼的結(jié)構(gòu)和類(lèi)名。做后臺(tái)系統(tǒng)的時(shí)候你不需要從零設(shè)計(jì)“用戶(hù)管理”頁(yè)面的布局直接用表格組件加按鈕組件五分鐘就能有一個(gè)像模像樣的框架。工具類(lèi)是第三塊招牌。text-center、mt-3、d-flex這些原子化的工具類(lèi)讓你在 HTML 里直接控制間距、對(duì)齊、顯示方式不用為了“讓這個(gè)按鈕往右挪 10 像素”專(zhuān)門(mén)去寫(xiě)一段 CSS。后來(lái)流行的 Tailwind CSS其實(shí)跟這套思路一脈相承。值得注意的是Bootstrap 5 開(kāi)始徹底移除了對(duì) jQuery 的依賴(lài)。它的交互組件用原生 JavaScript 重寫(xiě)了引入方式也從“CSS jQuery Bootstrap JS”變成了“CSS Bootstrap JS順帶附贈(zèng)一個(gè)捆綁的 Bundle”。這是它發(fā)展歷程上的一個(gè)重大變化也直接導(dǎo)致了很多老教程失效。2.3 功能重疊區(qū)什么場(chǎng)景下它們看起來(lái)“在打架”雖然維度不同但確實(shí)存在一些功能重疊地帶最典型的就是模態(tài)框和輪播圖。Bootstrap 自帶模態(tài)框而 jQuery 社區(qū)也有非常多模態(tài)框插件比如 layer、fancybox、sweetalert。如果你用 Bootstrap通常會(huì)直接用它自帶的 modal如果你不用 Bootstrap那選一個(gè) jQuery 的彈窗插件就很正常。這時(shí)候你可能會(huì)糾結(jié)到底用哪個(gè)畫(huà)的彈窗更好看實(shí)際經(jīng)驗(yàn)是如果項(xiàng)目已經(jīng)用了 Bootstrap就別再額外引 jQuery 彈窗插件了兩套彈窗的樣式難以統(tǒng)一視覺(jué)上會(huì)很突兀維護(hù)起來(lái)也痛苦。輪播圖也一樣。Bootstrap 自帶 carousel而 jQuery 插件的輪播圖一抓一大把。選擇標(biāo)準(zhǔn)其實(shí)很簡(jiǎn)單你的項(xiàng)目已經(jīng)用了哪個(gè)體系就跟著體系走別混搭。動(dòng)畫(huà)發(fā)熱區(qū)也值得注意。jQuery 有animateBootstrap 的很多組件是配合 CSS 過(guò)渡實(shí)現(xiàn)的。如果你在一個(gè)項(xiàng)目里同時(shí)用 jQuery 去animate一個(gè)元素的height又給這個(gè)元素加了 Bootstrap 的transition類(lèi)很容易出現(xiàn)動(dòng)畫(huà)打架、卡頓、閃跳。這種問(wèn)題特別消耗排查時(shí)間所以在動(dòng)手之前就要想清楚動(dòng)畫(huà)方案。3. 上手難度和生態(tài)現(xiàn)狀誰(shuí)對(duì)新人也那么友好3.1 從零起步j(luò)Query 和 Bootstrap 哪個(gè)更好學(xué)個(gè)人體感是jQuery 的上手曲線(xiàn)比 Bootstrap 緩一點(diǎn)但也只是一點(diǎn)。jQuery 的語(yǔ)法接近自然英語(yǔ)而且是鏈?zhǔn)秸{(diào)用寫(xiě)著寫(xiě)著就跟念句子似的。比如“點(diǎn)擊按鈕讓這個(gè)盒子滑上去再顯示一行文字”對(duì)應(yīng)代碼就是$(#btn).on(click, function(){ $(.box).slideUp().append(p完成/p) })。即使不懂源碼照著寫(xiě)也能猜出大概意思。新手的第一個(gè)坎是理解選擇器和$符號(hào)一旦跨過(guò)去后面就是復(fù)制粘貼改造。Bootstrap 的上手門(mén)檻幾乎為零前提是你已經(jīng)理解了 HTML 和 CSS 的基本規(guī)則。它本質(zhì)上就是“學(xué)會(huì)在正確的地方加正確的類(lèi)名”。你要做一個(gè)居中按鈕就給 button 加btn btn-primary mx-auto d-block每個(gè)類(lèi)名啥作用文檔里寫(xiě)得明明白白完全不需要理解內(nèi)部實(shí)現(xiàn)。但它的復(fù)雜之處在于“類(lèi)名組合太多”初學(xué)者容易為了找一個(gè)滿(mǎn)意的間距、配色在文檔里翻半天或者把一堆工具類(lèi)堆在標(biāo)簽上最后連自己都看不懂結(jié)構(gòu)。如果讓我給新手建議排序先花一天學(xué) jQuery 的基礎(chǔ)選擇器和事件綁定再花半天看 Bootstrap 柵格和組件然后直接拿一個(gè)靜態(tài)頁(yè)面開(kāi)始拼。被迫實(shí)戰(zhàn)是最快的沒(méi)必要按部就班讀完全部文檔。3.2 生態(tài)與插件豐富度老牌和熱門(mén)的各自?xún)?yōu)勢(shì)jQuery 的生態(tài)是老而彌堅(jiān)。它的插件倉(cāng)庫(kù)規(guī)模非常龐大你幾乎能搜到任何功能的插件富文本編輯器、日期選擇器、數(shù)據(jù)表格、樹(shù)形菜單、圖表庫(kù)。這些插件大多開(kāi)發(fā)于 2010 到 2017 年之間在當(dāng)時(shí)的項(xiàng)目里被驗(yàn)證得非常成熟。很多老舊系統(tǒng)用的數(shù)據(jù)表格和日期控件至今還在穩(wěn)定運(yùn)行這也成了大量老項(xiàng)目維護(hù)時(shí)離不開(kāi) jQuery 的原因。Bootstrap 的生態(tài)則呈現(xiàn)出一種“主題化”的特征。市面上有無(wú)數(shù)基于 Bootstrap 的免費(fèi)和商業(yè)主題模板做官網(wǎng)、做后臺(tái)、做落地頁(yè)直接下載一個(gè)模板改一改就能上線(xiàn)。它的生態(tài)更偏向“整體解決方案”站在一個(gè)項(xiàng)目的外層而不是像 jQuery 插件那樣可以精確補(bǔ)一個(gè)功能點(diǎn)。此外Bootstrap 的文檔質(zhì)量在全球前端框架里都算頂級(jí)示例代碼可以直接復(fù)制界面交互還有在線(xiàn)演示這對(duì)新手極其友好。3.3 招聘市場(chǎng)的真實(shí)需求從招聘角度來(lái)看這兩個(gè)關(guān)鍵詞的價(jià)值完全不同。jQuery 在招聘市場(chǎng)的作用更多是“存量維護(hù)能力”的象征。很多公司的老后臺(tái)、老官網(wǎng)、老站點(diǎn)都是 2015 年以前的技術(shù)棧jQuery 是當(dāng)時(shí)的事實(shí)標(biāo)準(zhǔn)。候選人如果完全沒(méi)碰過(guò) jQuery接手這類(lèi)項(xiàng)目就會(huì)比較吃力。所以很多崗位會(huì)把它列為加分項(xiàng)考的是你能否看懂老代碼、能否快速修復(fù)歷史遺留問(wèn)題。Bootstrap 在招聘市場(chǎng)則更像“界面快速產(chǎn)出能力”的象征。尤其是一些外包項(xiàng)目、企業(yè)站項(xiàng)目、后臺(tái)類(lèi)項(xiàng)目甲方工期緊Bootstrap 可以快速出界面。會(huì) Bootstrap 的人往往能在一兩天內(nèi)做出一個(gè)可以匯報(bào)的系統(tǒng)這種能力在很多中小公司里很吃香。如果從“新技術(shù)潮流”視角看這兩項(xiàng)都算不上前沿技術(shù)但它們的存量規(guī)模太大了短期內(nèi)還遠(yuǎn)不會(huì)被淘汰。我的判斷是新項(xiàng)目盡量用 React/Vue 等現(xiàn)代框架但老項(xiàng)目維護(hù)和崗位兼容性要求下面熟練掌握 jQuery 和 Bootstrap 依然是很實(shí)用的技能。4. 性能和包體積這筆賬該算就得算4.1 加載開(kāi)銷(xiāo)的量化對(duì)比談技術(shù)選型繞不開(kāi)加載性能。我以壓縮后的靜態(tài)資源為例給一個(gè)粗略的參考數(shù)字。jQuery 3.x 的壓縮版體積大約 87KB。Bootstrap 的 CSS 壓縮版大約 23KBBootstrap 的 JS 壓縮 Bundle 大約 45KB。如果你用 Bootstrap 4那么它還依賴(lài) jQuery所以一套典型的 Bootstrap 4 組合大約是 CSS 23KB JS 45KB jQuery 87KB加起來(lái)約 155KB。這 155KB 在現(xiàn)代網(wǎng)絡(luò)帶寬下其實(shí)不算夸張但在弱網(wǎng)環(huán)境或者移動(dòng)端流量敏感的場(chǎng)景下仍然能感覺(jué)到加載變慢。而且這里只算了靜態(tài)文件體積沒(méi)算瀏覽器解析和渲染的時(shí)間成本。具體怎么優(yōu)化比較通用的思路是用打包工具比如 Webpack、Vite做構(gòu)建把第三方庫(kù)單獨(dú)拆成 vendor 包設(shè)置defer加載腳本優(yōu)先保證首屏關(guān)鍵 CSS。如果只是用 Bootstrap 的柵格和工具類(lèi)還可以用按需引入的方式把不需要的組件樣式裁掉。4.2 對(duì)運(yùn)行時(shí)性能的影響運(yùn)行時(shí)的性能差異更多體現(xiàn)在“怎么操作 DOM”這件事上。jQuery 的操作方式是直接操作真實(shí) DOM。這在頁(yè)面規(guī)模小的場(chǎng)景下沒(méi)有任何問(wèn)題但如果頁(yè)面里有幾百上千個(gè)節(jié)點(diǎn)頻繁用 jQuery 去改 DOM會(huì)導(dǎo)致重排和重繪頁(yè)面就會(huì)卡頓。舉個(gè)極端例子一個(gè)長(zhǎng)列表用戶(hù)滾動(dòng)時(shí)你在scroll事件里用 jQuery 去修改某個(gè)元素的高度性能瓶頸非常明顯。Bootstrap 的運(yùn)行時(shí)開(kāi)銷(xiāo)主要是“大量 CSS 規(guī)則”和“組件初始化”。它的全局 CSS 選擇器會(huì)作用到頁(yè)面上所有匹配的元素樣式覆蓋時(shí)會(huì)遍歷匹配規(guī)則。好在現(xiàn)代瀏覽器的 CSS 引擎優(yōu)化得不錯(cuò)這一點(diǎn)帶來(lái)的影響在普通項(xiàng)目中幾乎感覺(jué)不到。結(jié)論就是如果你的頁(yè)面復(fù)雜度極高比如數(shù)據(jù)大屏、重型表格那么純 jQuery 操作真實(shí) DOM 的方式確實(shí)有些吃力。這也是后來(lái) React、Vue 這類(lèi)虛擬 DOM 框架興起的重要原因。如果只是普通的企業(yè)站、后臺(tái)管理、活動(dòng)頁(yè)jQuery 和 Bootstrap 的性能完全綽綽有余。4.3 關(guān)于 CDN 與本地化的選擇建議很多項(xiàng)目會(huì)直接從 CDN 引入 jQuery 和 Bootstrap。公共 CDN 做的比較成熟的是國(guó)內(nèi)外的幾家大廠(chǎng)它們?cè)谌蚨加泄?jié)點(diǎn)加載速度不錯(cuò)。但有一個(gè)隱患如果 CDN 域名不可訪(fǎng)問(wèn)頁(yè)面所有依賴(lài)庫(kù)都會(huì)掛掉樣式全部丟失交互全部失效。我的習(xí)慣是線(xiàn)上正式項(xiàng)目把依賴(lài)庫(kù)下載到本地并隨應(yīng)用打包或者至少放一份同域名下的靜態(tài)資源做兜底只有個(gè)人 Demo、本地測(cè)試、不敏感的小項(xiàng)目才直接用 CDN。另外所有script標(biāo)簽都應(yīng)該帶defer或者放在 body 尾部防止阻塞 DOM 解析這個(gè)細(xì)節(jié)很多新手會(huì)忽略。5. 實(shí)踐視角到底怎么選還是組合用5.1 什么場(chǎng)景下只用 jQuery 就夠了我做過(guò)一個(gè)相對(duì)輕量的營(yíng)銷(xiāo)落地頁(yè)整體沒(méi)有復(fù)雜的視覺(jué)框架要求頁(yè)面上有幾個(gè)按鈕需要切換顯示狀態(tài)有一個(gè)表單需要校驗(yàn)并提交還有一個(gè)折疊面板需要控制展開(kāi)收起。這種場(chǎng)景下我只引入了 jQueryCSS 全部手寫(xiě)。項(xiàng)目結(jié)構(gòu)非常簡(jiǎn)單沒(méi)有多余的依賴(lài)頁(yè)面加載很快后續(xù)改動(dòng)也直接在一個(gè) JS 文件里完成。結(jié)論很簡(jiǎn)單當(dāng)你只需要“交互動(dòng)作”頁(yè)面視覺(jué)樣式有專(zhuān)門(mén)的設(shè)計(jì)或沒(méi)有特殊要求而且沒(méi)有復(fù)雜組件輪播、模態(tài)框、日期選擇等需求時(shí)只用 jQuery 就足夠。在這種情況下強(qiáng)行引入 Bootstrap反而會(huì)增加維護(hù)負(fù)擔(dān)因?yàn)槟阋S護(hù)它那些全局 CSS 和組件樣式改起來(lái)特別費(fèi)勁。5.2 什么場(chǎng)景下只用 Bootstrap 就夠了還有一種相反的場(chǎng)景項(xiàng)目基本上全是靜態(tài)展示內(nèi)容比如企業(yè)官網(wǎng)、產(chǎn)品介紹頁(yè)、活動(dòng)公告頁(yè)。頁(yè)面需要響應(yīng)式布局、需要好看的按鈕和卡片、需要清晰的排版但完全沒(méi)有復(fù)雜的業(yè)務(wù)邏輯沒(méi)有動(dòng)態(tài)數(shù)據(jù)渲染。這種場(chǎng)景下我可以只用 Bootstrap 的 CSS 和少量自定義樣式一個(gè) JS 文件都不引。Bootstrap 的 CSS 和自帶的可選交互組件其實(shí)都支持這種方式。哪怕是輪播圖和模糊背景等效果也能用 Bootstrap 的純 CSS 加一點(diǎn)原生 JavaScript 來(lái)搞定。只要繞開(kāi)了數(shù)據(jù)驅(qū)動(dòng)和復(fù)雜狀態(tài)管理Bootstrap 完全可以單飛。5.3 為什么經(jīng)典組合是“jQuery Bootstrap 一起用”最經(jīng)典、也最常見(jiàn)的生產(chǎn)方式是把 jQuery 和 Bootstrap 組合使用。這在 Bootstrap 4 時(shí)代幾乎是標(biāo)配Bootstrap 的交互組件模態(tài)框、下拉菜單、輪播、折疊面板都依賴(lài) jQuery于是你不得不同時(shí)引入這兩個(gè)庫(kù)。這時(shí)候 jQuery 負(fù)責(zé)組件初始化和業(yè)務(wù)邏輯Bootstrap 負(fù)責(zé)布局樣式。我做過(guò)一個(gè)后臺(tái)管理項(xiàng)目技術(shù)棧就是 Bootstrap 4 jQuery。具體怎么分工的頁(yè)面底下的結(jié)構(gòu)用 Bootstrap 柵格拼一個(gè)側(cè)邊欄加內(nèi)容區(qū)側(cè)邊欄菜單收縮折疊用 Bootstrap 的collapse組件。頁(yè)面中間的表格數(shù)據(jù)我用 jQuery 發(fā)$.ajax去后端接口取數(shù)據(jù)然后手動(dòng)拼接 HTML 字符串插到表格里。編輯彈窗用 Bootstrap 的模態(tài)框把表單展示出來(lái)再用 jQuery 監(jiān)聽(tīng)提交事件。整個(gè)項(xiàng)目寫(xiě)起來(lái)非常順手沒(méi)有引入任何重型框架開(kāi)發(fā)周期壓得很短交付速度讓甲方挺滿(mǎn)意。在這個(gè)組合里一個(gè)管“外觀(guān)”一個(gè)管“動(dòng)作”配合得非常順。用一句話(huà)概括就是Bootstrap 決定頁(yè)面長(zhǎng)什么樣jQuery 決定頁(yè)面怎么響應(yīng)用戶(hù)操作。5.4 新項(xiàng)目里還要不要堅(jiān)持這套組合現(xiàn)在做新項(xiàng)目我個(gè)人的建議是優(yōu)先根據(jù)項(xiàng)目規(guī)模選型。如果是小型工具站、內(nèi)部系統(tǒng)、活動(dòng)落地頁(yè)且團(tuán)隊(duì)精通 jQuery那繼續(xù)用 jQuery Bootstrap 完全沒(méi)問(wèn)題效率和穩(wěn)定性都在線(xiàn)維護(hù)成本也可控。如果是中大型項(xiàng)目、前端團(tuán)隊(duì)有多人協(xié)作或者需求高度動(dòng)態(tài)化那我建議直接用現(xiàn)代框架比如 Vue 或 React配合第三方組件庫(kù)對(duì)應(yīng) Vue 的 Element Plus、對(duì)應(yīng) React 的 Ant Design。這時(shí)候還要不要繼續(xù)套 Bootstrap我覺(jué)得能不用就不用除非你只是抄它的柵格思路自己封裝一套輕量的 CSS 工具類(lèi)?，F(xiàn)代框架有自己成熟的狀態(tài)管理和組件化方案強(qiáng)行套一層 Bootstrap 反而會(huì)限制組件的靈活性引入全局樣式污染讓設(shè)計(jì)稿還原變得更復(fù)雜。這不是說(shuō)場(chǎng)景式編程的思路不再重要而是我們要分清jQuery 和 Bootstrap 解決的是“在沒(méi)有框架的情況下快速實(shí)現(xiàn)頁(yè)面”的問(wèn)題?，F(xiàn)在框架已經(jīng)把這個(gè)問(wèn)題的上層封裝得很好了所以技術(shù)選型的天平自然會(huì)傾斜到更現(xiàn)代化的一側(cè)。6. 實(shí)操踩坑實(shí)錄版本、順序和常見(jiàn)問(wèn)題速查6.1 版本沖突Bootstrap 5 不再依賴(lài) jQuery這是我在實(shí)際項(xiàng)目里遇到最多的問(wèn)題尤其是翻看老教程的時(shí)候。Bootstrap 4 的官方文檔里JavaScript 組件明確寫(xiě)著“需要 jQuery”很多博文也默認(rèn) jQuery 是必選項(xiàng)。但到了 Bootstrap 5官方直接把 jQuery 依賴(lài)刪掉了所有組件改用原生 JavaScript。如果你照著 Bootstrap 4 的教程寫(xiě)代碼還順手把 jQuery 引進(jìn)了 Bootstrap 5 項(xiàng)目大概率不會(huì)立刻報(bào)錯(cuò)但某些組件的事件綁定和初始化方式已經(jīng)發(fā)生了變化很容易出現(xiàn)點(diǎn)擊沒(méi)反應(yīng)、彈窗不出來(lái)的問(wèn)題。一個(gè)崩潰現(xiàn)場(chǎng)我記得印象很深某次接手項(xiàng)目代碼里復(fù)用了一個(gè) Bootstrap 4 的模態(tài)框初始化寫(xiě)法死活彈不出來(lái)。查了很久才發(fā)現(xiàn)項(xiàng)目用的是 Bootstrap 5它的 JavaScript 已經(jīng)原生化不需要也不支持舊版初始化方式了。排查了半天最后翻文檔對(duì)照版本解決了。所以動(dòng)手前第一件事先確認(rèn)你項(xiàng)目用的 Bootstrap 是哪個(gè)大版本。然后去對(duì)應(yīng)版本的官方文檔里找代碼示例不要混搭參考內(nèi)容。6.2 引入順序CSS 放哪、JS 放哪、DOM 就緒引入順序也是個(gè)高發(fā)坑位。jQuery 的腳本必須在你執(zhí)行$相關(guān)代碼之前加載完成這是常識(shí)。Bootstrap 的 CSS 一般建議放在head里確保頁(yè)面加載時(shí)就有正確樣式避免“裸奔”再閃爍。Bootstrap 的 JS Bundle包含 Popper則建議放在腳本區(qū)且如果依賴(lài) jQuery 就一定在 jQuery 之后引入否則初始化組件會(huì)找不到 jQuery直接報(bào)錯(cuò)。另一個(gè)經(jīng)常被忽略的問(wèn)題是 DOM 就緒。如果你把腳本放在head里又沒(méi)在$(document).ready(...)包裹代碼那你$(#myModal)去選中頁(yè)面上尚未解析的 DOM 元素時(shí)得到的是一個(gè)空集合后續(xù)操作全部靜默失敗。新手會(huì)特別崩潰代碼看起來(lái)沒(méi)毛病頁(yè)面卻毫無(wú)反應(yīng)。我的固定寫(xiě)法是所有腳本都放在/body前面需要依賴(lài) DOM 的邏輯再加一層即時(shí)的$(function(){ ... })包裹這樣無(wú)論腳本位置在哪里都不會(huì)出現(xiàn) DOM 尚未加載的問(wèn)題。6.3 常見(jiàn)問(wèn)題速查表問(wèn)題現(xiàn)象可能原因解決方案點(diǎn)擊 Bootstrap 按鈕沒(méi)反應(yīng)Bootstrap JS 未引入或 jQuery 版本不匹配檢查腳本引入順序和版本jQuery 代碼不生效腳本在 DOM 之前執(zhí)行或選擇器寫(xiě)錯(cuò)了用$(function(){...})包裹并檢查選擇器頁(yè)面樣式突然全亂Bootstrap 與自定義 CSS 沖突、類(lèi)名覆蓋檢查引入順序自定義樣式放到 Bootstrap 之后某些瀏覽器動(dòng)畫(huà)卡頓jQuery 動(dòng)畫(huà)與 CSS transition 混用統(tǒng)一動(dòng)畫(huà)實(shí)現(xiàn)方式盡量用 CSS 做動(dòng)效輪播圖自動(dòng)播放失效沒(méi)初始化或缺少必要屬性查看對(duì)應(yīng)版本初始化文檔表格插件和 Bootstrap 樣式?jīng)_突兩套框架混用集成前先隔離測(cè)試樣式6.4 我的幾個(gè)獨(dú)家避坑習(xí)慣最后分享幾個(gè)我在項(xiàng)目里長(zhǎng)期堅(jiān)持的小習(xí)慣不算什么高深技巧但確實(shí)幫我在關(guān)鍵時(shí)刻少踩了很多坑。第一能少引一個(gè)庫(kù)就少引一個(gè)。做頁(yè)面之前先把交互清單列出來(lái)如果連彈窗、折疊都可以用原生 CSS 和少量 JS 解決那就別為了“順手”去引 jQuery。依賴(lài)越少后續(xù)維護(hù)越輕松。第二盡量把 jQuery 代碼封裝成函數(shù)或獨(dú)立插件。老項(xiàng)目最大的問(wèn)題是全局 “$” 滿(mǎn)天飛一個(gè)文件幾千行改一個(gè)功能要在多個(gè)地方排查。我會(huì)把常用的彈層、表單校驗(yàn)、列表渲染寫(xiě)成獨(dú)立小函數(shù)組織在模塊化的文件里方便復(fù)用。第三版本鎖死。在 package.json 或者項(xiàng)目根目錄的依賴(lài)記錄里明確鎖死 jQuery 和 Bootstrap 的大版本號(hào)。很多線(xiàn)上事故都是依賴(lài)自動(dòng)升級(jí)引起的兼容性問(wèn)題鎖死后至少保證團(tuán)隊(duì)所有人拉下來(lái)的依賴(lài)一致不會(huì)有“在我電腦上是好的在你電腦上就壞了”的玄學(xué)問(wèn)題。第四不管用哪個(gè)都別忘記寫(xiě)注釋。雖然這句話(huà)聽(tīng)起來(lái)像廢話(huà)但在混合使用 jQuery 和 Bootstrap 的老項(xiàng)目里一個(gè)“這里為什么要這么初始化 ng”的注釋可能幫你或者你的同事省下半天排查時(shí)間。選擇器和初始化那幾行代碼自己回頭看都容易蒙更別說(shuō)沒(méi)參與過(guò)這塊需求的人。寫(xiě)在最后做了這么多年項(xiàng)目我的一個(gè)強(qiáng)烈體感是技術(shù)工具沒(méi)有絕對(duì)的好壞只有適不適合。jQuery 和 Bootstrap 這對(duì)搭檔各自解決了一個(gè)時(shí)代的前端痛點(diǎn)一個(gè)讓 JavaScript 寫(xiě)起來(lái)不那么痛苦一個(gè)讓 CSS 布局寫(xiě)起來(lái)不那么繁瑣。它們的組合成就了大量成熟穩(wěn)定的業(yè)務(wù)系統(tǒng)。而現(xiàn)在的前端框架生態(tài)越來(lái)越完善新項(xiàng)目選型時(shí)自然會(huì)往更現(xiàn)代的方向走。但如果你接手的是存量項(xiàng)目或者項(xiàng)目體量不大、團(tuán)隊(duì)習(xí)慣輕量方案jQuery 和 Bootstrap 依然是非?？煽康纳a(chǎn)力工具。最后再分享一個(gè)小經(jīng)驗(yàn)別被“全面對(duì)比”這種標(biāo)題唬住對(duì)比不是目的搞清楚“我這個(gè)項(xiàng)目要解決什么問(wèn)題、團(tuán)隊(duì)擅長(zhǎng)什么結(jié)構(gòu)、維護(hù)成本能到多少”才是真正的判斷依據(jù)。想清楚這三件事選型其實(shí)一點(diǎn)都不難。