jQuery插件其实是前端框架的思维，构成一个框架，个人认为必须满足以下几个基础条件：1. 可重用，2. 兼容性，3. 维护方便，虽说现在有很多比较成熟的前端框架，但是也有部分存在配置麻烦，学习成本大的麻烦。jQuery的学习成本相对较低，对于有JavaScript基础的朋友很容易上手。而且我也希望能利用jQuery写一套自己的前端框架，有跟我一样想法的人，欢迎扫描尾部二维码，加入群聊，交流学习！
一：关于如何写jQuery插件的方法有三种：
1. 使用$.extend()来扩展jQuery；
2. 使用$.fn来添加jQuery方法；
3. 通过$.widget()应用jQuery UI的部件工厂方式创建；
二：三种jQuery插件开发方式说明
1、$.extend()相对简单，一般很少能够独立开发复杂插件，仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以。
2、我们调用通过$.extend()添加的函数时直接通过$符号调用（$.myfunction()），而不需要选中DOM元素($('#example').myfunction())。
3、$.widget()是一种高级的开发模式，该模式开发出来的部件带有很多jQuery内建的特性，比如插件的状态信息自动保存，各种关于插件的常用方法等
4、$.fn则是一般插件开发用到的方式，可以利用jQuery强大的选择器带来的便利，以及将插件更好地运用于所选择的元素身上，使用的插件也大多是通过此种方式开发。
三：实例演示
1. $.extend()
(function( $ ) {
$.extend({
sayHello: function(name) {
console.log('Hello,' + (name ? name : 'aaa') + '!');
}
})
$.sayHello(); //Hello,aaa
$.sayHello('bbb'); //Hello,bbb
})( jQuery );
2. $.fn.插件名称
(function($){
$.fn.myPlugin = function(options) {
var defaults = {
'color': 'red',
'fontSize': '12px'
};
var settings = $.extend({}, defaults, options);
return this.css({
'color': settings.color,
'fontSize': settings.fontSize
});
}
})(jQuery);
保护好默认参数：做法是将一个新的空对象做为$.extend的第一个参数，defaults和用户传递的参数对象紧随其后，这样做的好处是所有值被合并到这个空对象上，保护了插件里面的默认值。
调用：
<script type="text/javascript">
$(function(){
$('a').myPlugin({
'color':red
});
});
</script>
要点
1、jQuery插件的文件名推荐命名为jQuery.[插件名].js，以免和其他JS库插件混淆
2、所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上
3、在插件内部的this指向的是当前通过选择器获取的jQuery对象，而不像一般方法那样，如click，内部的this指向的是DOM元素
4、可以通过this.each来遍历所有的元素
5、所有的方法或函数插件，都应当以分号结尾。否则压缩的时候可能出现问题。为了稳妥些，甚至可以在插件头部先加上一个分号，以免他人不规范的代码影响自身的插件代码
6、插件应该返回一个jQuery对象，以保证插件的可链式操作
7、避免在插件内部使用$作为jQuery对象的别名，而应使用完整的jQuery来表示，避免冲突。当然，也可以利用闭包来回避这种问题，使插件内部继续使用$作为jQuery的别名
8、利用闭包的特性，即可以避免内部临时变量影响全局空间，又可以在插件内容继续使用$作为jQuery的别名。常见的jQuery插件都是以下这种形式的:
(function(){ /*这里放置代码*/})();首先定义一个匿名函数function(){/*这里放置代码*/}，然后用括号括起来，变成(function(){/*这里放置代码*/})这种形式，最后通过()这个运算符来执行。可以传递参数进行，以供内部函数使用
上面的代码是一种常见的jQuery插件的结构
PS:欢迎扫描下方二维码或点击链接，加入QQ群
来源：https://www.cnblogs.com/ydcnblog/p/9274120.html