現象描述
引入多個 jQuery 插件後，頁面出現功能異常、樣式錯亂或控制台報錯，常被稱為「JS 衝突」。
核心原因
- 全局命名空間污染：多個庫佔用同一全局變量（如 $、jQuery）。
- 版本不兼容：不同插件依賴不同版本的 jQuery 或核心庫。
- 加載順序錯誤：依賴關係未滿足，如插件在核心庫之前加載。
- 事件處理器衝突：多個處理器綁定同一事件導致行為疊加或阻止默認行為。
排查步驟
- 打開瀏覽器開發者工具 Console，查看報錯堆疊。
- 使用 Network 面板確認腳本加載順序與狀態碼。
- 嘗試禁用部分插件定位問題範圍。
- 檢查是否重複引入 jQuery，使用
jQuery.noConflict(true) 釋放 $ 佔用。
最佳實踐
- 統一項目中 jQuery 版本，避免多版本共存。
- 採用模塊化打包工具（Webpack/Rollup）管理依賴。
- 為自定義代碼使用 IIFE 或 ES Module 封裝作用域。
- 插件初始化前檢查依賴是否存在：
if (typeof $.fn.pluginName === 'function')。
