軟體主廚的程式料理廚房

jQuery.fn.extend()

以下是 jQuery.fn.extend() 的官方描述：

Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.

意思是說透過 jQuery.fn.extend() 我們可以將一個物件的內容合併到 jQuery prototype 上面，以在 jQuery 實例上提供新的方法。

我們來看範例，我現在想做一件事，隨意地 select 出一個 element，然後可以將此 element 底下所有使用者輸入的內容萃取成一個 JSON 物件，好讓我方便傳遞。

假定我有一個 id 為 testDiv 的 div，裡面有三個欄位分別是身份證字號、姓名、年齡，然後呼叫 $("#testDiv").model() 之後就可以得到 { id: "...", name: "...", age: n } 的 JSON 物件。

所以我就用 jQuery.fn.extend() 來擴展一個 model() 方法，然後為了要能對應輸入框跟屬性名稱，我就在這幾個輸入框標上 data-prop="屬性名稱"，若是數字就標上 data-prop-number="屬性名稱"。

最後我只要去實作 model() 方法，取得 data-prop 或 data-prop-number 的值來當做屬性名稱，把輸入框的值當做屬性值，合併成一個物件回傳就可以了。

(function ($) {
    $.fn.extend({
        model: function () {
            var numberType = "data-prop-number";

            var elements = this.find("[data-prop],[" + numberType + "]");

            if (elements.length === 0) return undefined;

            var obj = {};

            $.each(elements,
                function (index, element) {
                    if (element.dataset.propNumber) {
                        obj[element.dataset.propNumber] = Number($(element).val());
                    } else {
                        obj[element.dataset.prop] = $(element).val();
                    }
                });

            return obj;
        }
    });
})(jQuery);

執行結果

jQuery.extend()

jQuery.extend() 的官方描述：

Merge the contents of two or more objects together into the first object.

意思是說它可以合併兩個或更多個物件的內容到第一個參數的物件之中，這個可以參考黑大的一篇文章，我更關注的是 API 文件底下有一段話

... that will extend the jQuery namespace if it is the sole argument.

當 jQuery.extend() 只有一個參數的時候，會被擴展到 jQuery 的 namespace 上，也就是說擴展了之後我們可以用 jQuery. (或 $.) 直接存取擴展的物件。

我們來看範例，我想要在呼叫 $.ajax() 少打一點字，所以我決定擴展一個 $.http 物件來包裝它，程式碼如下：

(function ($) {
    $.extend({
        http: {
            prerequest: function (func) {
                if (func) func();

                return this;
            },
            get: function (url) {
                return $.ajax(url, { method: "GET" });
            },
            post: function (url, data) {
                return $.ajax(url, { method: "POST", data: data });
            },
            put: function (url, data) {
                return $.ajax(url, { method: "PUT", data: data });
            },
            patch: function (url, data) {
                return $.ajax(url, { method: "PATCH", data: data });
            },
            delete: function (url) {
                return $.ajax(url, { method: "DELETE" });
            }
        }
    });
})(jQuery);

這樣我就可以少打一些字，一樣呼叫 $.ajax() 來發送 http 請求。

以上針對 jQuery.fn.extend() 及 jQuery.extend() 兩個擴展方法做簡單的介紹，希望對大家了解這兩個方法有幫助。