尽管现在有大量非常棒的插件可供免费下载使用，但是在实际开发中，有时候我们需要根据项目需求来自己定义一个插件，提供给团队其他人来复用。

学习使用jQuery并不难，因为它非常简单易学。但是如果你想要将能力上升一个台阶，学会编写一个属于自己的jQuery插件是一个不错的选择。

从广义上来说，jQuery插件可以分为以下3种。

  • （1）方法类插件
  • （2）函数类插件
  • （3）选择器插件

其中对于选择器插件，很少人会去开发使用，因为jQuery内置的选择器已经足够完善了，所以这一节我们只会介绍方法类插件和函数类插件。

一、方法类插件

在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>绿叶学习网</h1>
</body>
</html>

默认情况下，预览效果如下图所示。

当鼠标移到元素后，此时预览效果如下图所示。

分析：

在这个例子中，我们使用$.fn.extend()方法定义了一个名为changColor的插件。该插件接收两个参数：fgcolor、bgcolor。其中，fgcolor是“字体颜色”，bgcolor是“背景颜色”。

在插件的内部，我们定义了元素在鼠标移入和鼠标移出时的颜色变化。在插件的最后，我们还需要使用return $(this)返回当前的jQuery对象，从而保持链式调用的功能。

所谓“封装jQuery插件”，说白了就是把功能封装成一个函数而已，小伙伴们别想得那么复杂。

$.fn.extend({
    "插件名":function(参数){
        ……
    }
})

事实上，jQuery插件的定义方式有两种，上面这段代码是其中一种，还有一种如下所示。这两种方式其实是等价的。

$.fn.插件名 = function(参数){
    ……
}

不过，上面这个例子的传参方式只适用于参数比较少的情况，如果参数比较多的话，我们应该定义一个参数对象，然后把需要传给插件的参数一股脑儿都放在参数对象中就可以了，优化后的代码如下：

举例：优化传参

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        //定义插件
        (function(){
            $.fn.extend({
                "color":function(options){
                    $(this).mouseover(function () {
                        $(this).css({"color":options.fgcolor,"background":options.bgcolor});
                    }).mouseout(function () {  
                        $(this).css({"color":"black","background":"white"});
                    });
                    return $(this);
                }
            })
        })(jQuery);
    </script>
    <script>
        $(function () {
            //调用插件
            $("h1").color({ fgcolor: "red", bgcolor: "#F1F1F1" });
        })
    </script>
</head>
<body>
    <h1>绿叶学习网</h1>
</body>
</html>

默认情况下，预览效果如下图所示。

当鼠标移到元素后，此时预览效果如下图所示。

分析：

可能有些小伙伴又会问了：很多插件的参数都有默认值，如果我也想设置默认值，又该怎么实现呢？接下来，我们对上面代码进一步优化，请看下面例子。

举例：设置参数的默认值

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        //定义插件
        (function(){
            $.fn.extend({
                "color":function(options){
                    //设置参数的默认值
                    var defaults = {
                        fgcolor: "hotpink",
                        bgcolor: "lightskyblue"
                    };
                    var options = $.extend(defaults, options);
                    $(this).mouseover(function () {
                        $(this).css({"color":options.fgcolor,"background":options.bgcolor});
                    }).mouseout(function () {  
                        $(this).css({"color":"black","background":"white"});
                    });
                    return $(this);
                }
            })
        })(jQuery);
    </script>
    <script>
        $(function () {
            //调用插件
            $("h1").color();
        })
    </script>
</head>
<body>
    <h1>绿叶学习网</h1>
</body>
</html>

默认情况下，预览效果如下图所示。

当鼠标移到元素后，此时预览效果如下图所示。

分析：

想要设置参数的默认值，我们需要在插件内部另外定义一个选项对象，然后使用.extend()，来将参数对象options和选项对象defaults合并成一个对象。.extend()方法允许你使用一个或多个对象来扩展一个基准对象，扩展的方式是依序将右边的对象合并到基准对象（也就是左边第一个对象）。

最后，如果想要同时封装多个jQuery插件，我们可以采用以下的语法：

(function($){
    $.fn.extend({
        "插件1": function(参数){
            ……
        },
        "插件2": function(参数){
            ……
        },
        "插件3": function(参数){
            ……
        }
    });
})(jQuery);

二、函数类插件

在jQuery中，我们可以使用.extend()方法来定义一个函数类插件。此时小伙伴们就会问了：“之前不是说.extend()方法是用来定义工具函数的吗？怎么它还可以用来定义插件呢？”实际上，“工具函数”跟“函数类插件”说白了就是一个玩意！

语法：

(function($){
    $.extend({
        "插件名": function(){
            ……
        }
    });
})(jQuery)

说明：

函数类插件的语法跟方法类插件的差不多，仅仅是把.fn.extend()换成.extend()就可以了。

举例：

在线测试
<!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>

控制台输出结果如下图所示。

分析：

从这个例子可以看出来，函数类插件跟方法类插件在定义和调用上都是差不多的，不过函数类插件使用的是.extend()，而方法类插件使用的是.fn.extend()。此外，两者最大的不同在于：函数类插件是在全局对象下定义一个方法，而方法类插件是在所获取的jQuery对象下定义一个方法。

方法类插件可以使用jQuery中功能强大的选择器，调用方式一般是：

$(选择器).插件名()

而函数类插件不可以使用jQuery选择器，其调用方式一般是：

$.函数名()

在实际开发中，我们所说的jQuery插件一般指的是方法类插件，小伙伴们一定要记住这一点。最后，我们来总结一下jQuery插件，有以下几点是比较重要的。

  • （1）插件的文件命名必须严格按照jquery.[插件名].js或jquery.[插件名].min.js的格式。
  • （2）在插件的最后必须使用return $(this)来返回当前jQuery对象，以便保持链式调用的功能。
  • （3）无论是哪一种插件，定义的结尾都必须以分号结束，否则文件被压缩后，可能会出现错误。
  • （4）方法类插件使用的是$.fn.extend()，而函数类插件使用的是$.extend()。我们常说的jQuery插件，指的都是方法类插件。
  • （5）$.extend()是在jQuery全局对象上扩展一个方法，而$.fn.extend()是在选择器上扩展一个方法。因此定义工具函数应该用$.extend()，而定义jQuery插件应该用$.fn.extend()。