衝突類型識別
| 衝突類型 | 現象 | 典型場景 |
|---|
| $ 符號佔用 | Uncaught TypeError: $(...).plugin is not a function | 引入 Prototype、MooTools 等也用 $ 的庫 |
| jQuery 版本不兼容 | 舊插件用 $.browser、$.live() 等已移除 API | jQuery 1.x 插件在 3.x 環境運行 |
| 插件同名方法覆蓋 | 後載入插件覆蓋 $.fn.xxx，先載入插件失效 | 多個下拉框、模態框、表單驗證插件共存 |
| 全局污染 | 插件污染 window、修改原型鏈導致異常 | 惡意/低質量插件 |
核心解決方案
1. jQuery.noConflict() 釋放 $ 控制權
// 佔用 $
2. 立即執行函數 (IIFE) 封裝 $ 別名
3. 插件加載順序與依賴管理
1. jQuery 核心庫 (唯一版本)
2. jQuery UI / jQuery Mobile (若用)
3. 第三方插件 (按依賴順序)
4. 業務代碼 (IIFE 封裝)
// 依賴 jQuery 但未載入
// 覆蓋 pluginA 的方法
4. 現代模塊化方案（Webpack/Rollup + ES Modules）
// main.js
import $ from 'jquery';
import 'jquery-plugin-a';
import 'jquery-plugin-b';
// 插件寫法 (UMD 兼容)
;(function(factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory); // AMD
} else if (typeof module === 'object' && module.exports) {
module.exports = factory(require('jquery')); // CommonJS
} else {
factory(jQuery); // 全局
}
})(function($) {
$.fn.myPlugin = function() { ... };
return $; // 鏈式調用
});
遺留項目快速修復清單
- ☐ 檢查頁面引入的 jQuery 版本數量（只能有一個）
- ☐ 控制台輸入
jQuery.fn.jquery 確認版本
- ☐ 逐個禁用插件定位衝突源（二分法）
- ☐ 為衝突插件包裝 IIFE：
(function($){ ... })(jQuery)
- ☐ 升級/替換不維護的舊插件（查找 GitHub stars、最近提交時間）
- ☐ 使用
jQuery Migrate 過渡舊 API：<script src="jquery-migrate-3.3.2.js"></script>
最佳實踐原則
原則 1：頁面全局只保留一個 jQuery 實例
原則 2：所有業務代碼、插件擴展必須用 IIFE 封裝
原則 3：新項目直接用 ES Modules + 构建工具，避免全局污染
原則 4：定期審計依賴，移除未使用/重複功能插件
原則 5：優先選擇原生 JS 實現簡單功能（如原生 fetch、IntersectionObserver）
調試技巧
// 控制台快速檢查插件註冊情況
console.log(Object.keys($.fn).filter(k => k.startsWith('my')));
// 檢查 $ 指向
console.log($ === jQuery); // true 正常
// 監聽全局 $ 被修改
Object.defineProperty(window, '$', {
set: function(val) {
console.trace('$ 被修改！'); // 打印調用棧
this._$ = val;
},
get: function() { return this._$; }
});
