jQuery $.fn.extend()和$.extend()詳解

儘管現在有大量非常棒的外掛可供我們免費下載和使用，但是在實際開發中，我們有時候需要根據專案需求自己來定義一個外掛，提供給團隊其他人複用。學習使用 jQuery 並不難，因為它非常簡單。但是如果你想要使能力上升一個台階，學會編寫一個屬於自己的 jQuery 外掛是一個不錯的辦法。

從廣義上來說，jQuery 外掛可以分為以下 3 種。

方法類外掛；
函數類外掛；
選擇器外掛。

其中的選擇器外掛，很少有人會去開發使用，因為 jQuery 內建的選擇器已經足夠完善了，所以我們只會介紹方法類外掛和函數類外掛。

jQuery $.fn.extend()方法類外掛

在 jQuery 中，我們可以使用$.fn.extend()方法來定義一個方法類外掛。方法類外掛就是首先你使用 jQuery 選擇器來獲取一個 jQuery 物件，然後針對你獲取的這個 jQuery 物件新增一個方法。

語法：

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

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

$.fn.extend({
    "外掛名": function(引數){
        ……
    }
});

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

之前也說過，這是因為很多其他的 JavaScript 庫都會用到$這個符號，所以使用$.fn.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(){
            $.fn.extend({
                //外掛名為“changeColor”，有兩個引數：fgcolor、bgcolor
                "changeColor":function(fgcolor,bgcolor){
                    //定義滑鼠指標移入移出效果
                    $(this).mouseover(function () {
                        $(this).css({"color":fgcolor,"background":bgcolor});
                    }).mouseout(function () {  
                        $(this).css({"color":"black","background":"white"});
                    });
                    //返回jQuery物件，以便鏈式呼叫
                    return $(this);
                }
            })
        })(jQuery);
    </script>
    <script>
        $(function () {
            //呼叫外掛
            $("h1").changeColor("red","#F1F1F1")
        })
    </script>
</head>
<body>
    <h1>C語言中文網</h1>
</body>
</html>

預設情況下，預覽效果如圖 1 所示。、

圖 1：預設效果