从广义上来说，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：默认效果
当鼠标指针移到元素上时，预览效果如图 2 所示。
图 2：鼠标指针移到元素上时的效果
在这个例子中，我们使用$.fn.extend()方法定义了一个名为“changeColor”的插件。该插件接收两个参数：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>C语言中文网</h1>
</body>
</html>
默认情况下，预览效果如图 3 所示。
图 3：默认效果
当鼠标指针移到元素上时，预览效果如图 4 所示。
图 4：鼠标指针移到元素上时的效果
可能有些小伙伴又会问了：“很多插件的参数都有默认值，如果我也想设置默认值，又该怎么办呢？”接下来，我们对上面的代码作进一步优化，请看下面的例子。
举例：设置参数的默认值
<!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>C语言中文网</h1>
</body>
</html>
默认情况下，预览效果如图 5 所示。
图 5：默认效果
当鼠标指针移到元素上时，预览效果如图 6 所示。
图 6：鼠标指针移到元素上时的效果
想要设置参数的默认值，我们需要在插件内部另外定义一个选项对象，然后使用$.extend()方法将参数对象 options 和选项对象 defaults 合并成一个对象。$.extend()方法允许你使用一个或多个对象来扩展一个基准对象，扩展的方式是依序将右边的对象合并到基准对象（也就是左边第一个对象）。
最后，如果想要同时封装多个 jQuery 插件，我们可以采用以下的语法。
(function($){
$.fn.extend({
"插件1": function(参数){
……
},
"插件2": function(参数){
……
},
"插件3": function(参数){
……
}
});
})(jQuery);
jQuery $.extend()函数类插件
在 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>
控制台输出结果如图 7 所示。
图 7：函数类插件
从这个例子可以看出，函数类插件与方法类插件在定义和调用方式上都是差不多的，不过函数类插件使用的是$.extend()方法，而方法类插件使用的是$.fn.extend()方法。此外，两者最大的不同在于：函数类插件是在全局对象下定义一个方法，而方法类插件是在所获取的 jQuery 对象下定义一个方法。
方法类插件可以使用 jQuery 中功能强大的选择器，调用方式一般是$(选择器).插件名()。而函数类插件不可以使用 jQuery 选择器，其调用方式一般是$.函数名()。在实际开发中，我们所说的 jQuery 插件一般指的是方法类插件，小伙伴们一定要记住这一点。
最后，我们来总结一下 jQuery 插件，以下几点是比较重要的。
-
插件的文件命名必须严格按照
jquery.[插件名].js或jquery.[插件名].min.js的格式。 - 在插件的最后必须使用 return$(this) 来返回当前的 jQuery 对象，以便保持链式调用的功能。
- 无论是哪一种插件，定义的结尾都必须以分号结束，否则文件被压缩后，可能会出现错误。
-
方法类插件使用的是
$.fn.extend()方法，而函数类插件使用的是$.extend()方法。我们常说的 jQuery 插件，指的都是方法类插件。 -
$.extend()方法是在 jQuery 全局对象上扩展一个方法，而$.fn.extend()方法是在选择器上扩展一个方法。因此定义工具函数应该用$.extend()方法，而定义 jQuery 插件应该用$.fn.extend()方法。
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/23894.html