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