什麼是工具函數？

工具函數定義在 jQuery 物件 (即 $) 上，不操作 DOM 元素，而是提供通用的資料處理能力：陣列/物件操作、字串處理、瀏覽器特性偵測、URL 解析等。它們是 jQuery 或 $ 的靜態方法，呼叫方式如下：

$.trim(" text ");           // 去除首尾空白
jQuery.isArray([]);         // 判斷是否陣列
$.extend(target, obj1);     // 物件合併

官方文件：jQuery Utilities API

五大分類核心函數速查

1. 瀏覽器與特性偵測 jQuery.support

注意：$.browser, $.browser.version, $.boxModel 已在 1.3+ 棄用，現代開發應採用 特性偵測 而非瀏覽器嗅探。

jQuery.support 回傳物件，包含瀏覽器對特定 CSS/JS/DOM 特性的支援布林值，主要供外掛/核心開發者使用：

• boxModel：是否為 W3C 盒模型 (IE6/7 怪異模式為 false)
• cssFloat：支援 style.cssFloat (IE 用 styleFloat)
• opacity：支援 CSS opacity (IE 用 filter)
• hrefNormalized：getAttribute("href") 回傳原始值
• noCloneEvent：clone 時不複製事件處理器
• ... 共 17 項特性旗標

實務上，極少直接使用 $.support，現代專案建議改用 Modernizr 做特性偵測。

2. 陣列與物件操作

函數	說明	範例
$.each(obj, fn)	通用迴圈，支援陣列/物件，this 指向當前值	$.each([1,2], function(i,v){...})
$.grep(arr, fn)	過濾陣列，回傳符合條件的新陣列	$.grep([1,2,3], function(v){ return v>1 }) → [2,3]
$.map(arr, fn)	映射轉換，回傳新陣列	$.map([1,2], function(v){ return v*2 }) → [2,4]
$.inArray(val, arr)	搜尋值索引，不存在回傳 -1	$.inArray("b", ["a","b","c"]) → 1
$.merge(arr1, arr2)	合併陣列 (修改 arr1)	$.merge([1], [2,3]) → [1,2,3]
$.unique(arr)	去除 DOM 元素陣列重複項	$.unique($("div").get())
$.extend(target, obj...)	深度/淺層合併物件	$.extend(true, {}, defaults, options)
$.makeArray(obj)	類陣列轉真陣列	$.makeArray(document.getElementsByTagName("div"))

3. 測試操作 (型別判斷)

• $.isFunction(fn)、$.isArray(arr)、$.isPlainObject(obj)、$.isEmptyObject(obj)、$.isWindow(obj)、$.isNumeric(val) (1.7+)
• $.type(obj) 回傳內部 [[Class]] 小寫字串："array", "object", "regexp", "date", "null", "undefined" 等。

4. 字串操作

• $.trim(str)：去除首尾空白 (含全形空白、換行)。最常用。
• $.param(obj)：物件序列化為 URL 查詢字串 a=1&b=2，支援巢狀物件/陣列。

5. URL 操作 (jQuery 內建較少，常搭配外掛或原生 API)

現代瀏覽器可直接使用 URL、URLSearchParams 原生 API，或引入 URI.js。

實戰範例：表單資料序列化與深度合併設定

// 1. 表單序列化為物件 (非字串)
function serializeForm($form) {
  var arr = $form.serializeArray(); // [{name:"a", value:"1"}, ...]
  var obj = {};
  $.each(arr, function(i, field) {
    obj[field.name] = field.value;
  });
  return obj;
}

// 2. 深度合併預設設定與使用者選項
var defaults = { url: "/api", method: "GET", cache: true, headers: { "X-Req": "1" } };
var options = { method: "POST", data: { id: 1 }, headers: { "X-Token": "abc" } };
var settings = $.extend(true, {}, defaults, options);
// 結果: { url:"/api", method:"POST", cache:true, data:{id:1}, headers:{"X-Req":"1","X-Token":"abc"} }

擴充自訂工具函數

將常用業務邏輯封裝為 jQuery 工具函數，實現團隊共用：

$.fn.serializeObject = function() { ... }; // 實例方法
$.formatDate = function(date, fmt) { ... }; // 靜態工具方法
$.isMobile = function() { return /Mobile|Android|iPhone/.test(navigator.userAgent); };

總結

熟練掌握 $.each, $.extend, $.grep, $.map, $.trim, $.param, $.isPlainObject 等核心工具函數，能讓業務邏輯代碼更簡潔、健壯、可複用。遇到資料處理需求，優先查閱 Utilities API，避免重複造輪子。