JS 衝突排查：jQuery $ 與自定義構造函數 $ 衝突，重命名解決

頁面引入 jQuery 並定義自構造函數 var $ = function(id) {...}，導致 $ 被覆蓋，jQuery 功能失效。解決：重命名自定義函數。

衝突代碼

var $ = function (id) { return document.getElementById(id); }; // 覆蓋 jQuery $
// 後續 jQuery 代碼 $('.class') 報錯：$ is not a function

修正方案

// 方案 1：重命名
var $id = function (id) { return document.getElementById(id); };

// 方案 2：IIFE 隔離作用域
(function() {
    var $ = function(id) { return document.getElementById(id); };
    // 內部邏輯
})();

// 方案 3：jQuery 無衝突模式
var jQuery = $.noConflict(true);
// 之後用 jQuery(...) 代替 $(...)

排查技巧

1. Console 輸入 typeof $ 確認當前綁定
2. 按腳本加載順序檢查誰覆蓋了誰
3. 使用 ESLint 規則 no-shadow 預防

最佳實踐

• 項目統一使用 document.getElementById 或 querySelector，避免自造 $
• 模塊化構建（Webpack/Vite）天然隔離作用域
• 引入 jQuery 後立即 window.jQuery = jQuery 保留引用