jQuery $.extend()方法的用法

在前面幾節中，我們學習了各種 jQuery 內建的工具函數。但是這些內建工具函數的功能是有限的，如果我們想要自己定義一個工具函數，此時又該怎麼實現呢？

在 jQuery 中，我們可以使用$.extend()方法來自定義工具函數，以便自己開發使用。

語法：

(function($){
    $.extend({
        "函數名": function(引數){
            ……
        }
    });
})(jQuery);

(function(){})() 是 JavaScript 立即執行函數，這種語法在高階開發中經常用到。

$.extend({
    "函數名": function(引數){
        ……
    }
});

如果不考慮其他情況，僅僅使用上面這段程式碼，其實也可以定義 jQuery 工具函數。但是為什麼我們不這樣做，而要在外面套一個立即執行函數呢？

這是因為很多其他的 JavaScript 庫都會用到$這個符號，使用$.extend()方法定義工具函數時，就有可能受到其他 JavaScript 庫中$變數的影響。我們在外面套一個如下所示的立即執行函數，是為了讓$變數只屬於這個立即執行函數的作用域，從而避免受到其他 JavaScript 庫的“汙染”。

(function($){
……
})(jQuery);

如果只看語法，我們可能一頭霧水，還是先來看一個實際例子。

舉例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        (function($){
            $.extend({
                "maxNum": function(m, n){
                    return (m>n)?m:n;
                }
            });
        })(jQuery);
        $(function () {
            var result=$.maxNum(10, 5)
            console.log("最大值是："+result);
        })
    </script>
</head>
<body>
</body>
</html>

控制台輸出結果如圖 1 所示。

圖 1：自定義工具函數