jQuery 衝突解決：自訂 $ 函數名稱覆蓋 jQuery 導致錯誤

自訂函數命名為 $，直接覆蓋了 jQuery 的 $ 別名，導致後續 jQuery 代碼失效。

衝突代碼

function $() { ... } // ❌ 覆蓋 window.$ (jQuery)
$('#elem').hide(); // 報錯：$ is not a function

解決方案

1. 重命名自訂函數 (最簡單)：function myUtil() 或 function $$()。
2. 使用 jQuery.noConflict()：

   <script src="jquery.js"></script>
   <script>
     var $j = jQuery.noConflict(); // 釋放 $ 所有權
     $j('#elem').hide(); // 使用 $j
     // 自訂 $ 函數此後可用
     function $() { ... }
   </script>
   

3. 立即執行函數封裝 (IIFE)：

   (function($) {
       // 此處 $ 安全指向 jQuery
       $('#elem').hide();
   })(jQuery);
   
   // 外部自訂 $ 不受影響
   function $() { ... }
   

最佳實踐

• 專案中嚴禁 自訂全域 $ 或 jQuery 變數。
• 使用 ES Modules / Webpack 等模組化工具，天然隔離作用域。
• 若必須混用多版本 jQuery，noConflict(true) 完全釋放。

核心：重命名自訂函數避免佔用 $，或用 noConflict/IIFE 隔離作用域。