JavaScript/jQuery 正確「預聲明」jQuery 物件：變數命名慣例與實際賦值

核心誤區

var $obj = {} 僅創建一個普通物件字面量，與 jQuery 無任何關係。`$` 只是合法變數名字元，**不具備任何魔力**。

什麼是「jQuery 物件」？

透過 jQuery 選擇器/建構函數返回的、包含 DOM 元素陣列並擁有 jQuery 方法 (`css`, `animate`, `on`...) 的包裝器物件。

正確獲取/聲明模式

為何 `$obj.animate is not a function`？

var $obj = {};           // 普通物件 {}
$obj.animate(...);       // TypeError: $obj.animate is not a function
// 因為 {} 沒有 animate 方法，只有 jQuery.prototype 上有

最佳實踐：命名慣例 + 類型檢查

// 1. 命名慣例：$ 開頭 = jQuery 物件 / DOM 節點集合
var $userList = $('.user-list');
var $submitBtn = $('#submitBtn');

// 2. 使用前防禦性檢查
if ($userList.length) {  // jQuery 物件 length > 0 表示選中到元素
    $userList.fadeIn();
}

// 3. TypeScript 類型註解 (現代專案)
const $userList: JQuery = $('.user-list');

// 4. 避免全域變數污染，使用 IIFE/模組封裝
(function($) {
    const $cache = {};
    function getPanel(id) {
        if (!$cache[id]) $cache[id] = $(`#${id}`);
        return $cache[id];
    }
})(jQuery);

進階：緩存 jQuery 物件提升性能

// 錯誤：重複選擇
$('.item').css('color', 'red');
$('.item').hide(); // 再次遍歷 DOM

// 正確：緩存
const $items = $('.item');
$items.css('color', 'red').hide(); // 鏈式調用，單次遍歷

總結

• 「預聲明 jQuery 物件」本質是聲明一個變數，稍後賦值為 jQuery 選擇器結果。
• 變數名加 `$` 只是團隊約定俗成的語義標記，JS 引擎不認。
• 永遠不要用 `{}` 或 `[]` 假裝是 jQuery 物件，會導致運行時錯誤。