编写Jquery插件
jQuery基本上是前端开发中使用最多的JavaScript工具库。有些项目开发过程中总会有些业务逻辑相似的代码块，为了便于管理项目中的逻辑，这些逻辑相似的代码块我们可以编写jQuery插件进行统一管理。
起步
引用相关所需文件
<link href="./css/jquery-ui.css" rel="stylesheet"> <script src="./script/jquery.js"></script> <script src="./script/jquery-ui.js"></script>
<!-- 自定义插件 -->
<script src="./component/widget.js"></script>
这样我们就可以使用jQuery UI原生插件--dialog、progress等；也可以在此基础上对插件进行扩展。
扩展小部件
创建小部件是通过向 $.widget() 传递小部件名称和一个原型对象来完成的；下面的实例是在 "custom" 命名空间中创建一个 "superDialog" 小部件：
$.widget( "custom.superDialog", {} );
为了支持扩展，$.widget()可选性地接受父部件的构造函数，当指定一个父部件时，把它作为第二个参数进行传递，定义的小部件会继承父部件的属性和方法：
$.widget( "custom.superDialog", $.ui.dialog, {} );
上面我们在custom命名空间定义了superDialog部件，它继承于原生的dialog部件，我们可以像使用dialog一样使用superDialog。
<div class="dialog-sec"> <p>这是一个动画显示的对话框，用于显示信息。对话框窗口可以移动，调整尺寸，默认可通过 'x' 图标关闭。</p> </div>
$('.dialog-sec').superDialog({
autoOpen: true,
title:'自定义弹窗',
show: {
effect: "blind",
duration: 1000
},
modal: true,
})
小部件中有两个基本属性：
- this.element： 是一个包含一个元素的 jQuery 对象。如果我们的插件在包含多个元素的 jQuery 对象上调用，
则会为每个元素创建一个单独的插件实例，且每个实例都会有自己的this.element；
- this.options：是一个包含所有插件选项的键名/键值对的哈希，可以传值给插件；
小部件方法的重写及调用
我们可以扩展已有的方法
$.widget( "custom.superDialog", $.ui.dialog, { options: {}, _create: function() { this.element.css("color", "red") return this._super() }, _destory: function() { return this._super() } })
这里我们重载了_create私有方法，并设置了dialog中元素的颜色。记住，重写方法会覆盖掉原生插件中的默认行为，我们可以通过部件库提供的_super()继承父部件行为，实际上效用等同于call()方法。
使用小部件的插件调用方法，把方法名称以字符串形式进行传递，几种调用部件方法的写法如下：
- $( ".selector" ).dialog( "close" )--调用原生方法
- $( ".selector" ).dialog( "option", key, value ) --传参调用
- $( ".selector" ).dialog( fun, param ) --调用自定义方法
部件的私有方法在外部是无法调用的，我们只能调用部件暴露出来的原生或自定义的方法。
添加回调
最简单的扩展插件的方法是添加回调，这样我们就只用在插件内部只处理最基础的交互逻辑，而复杂的业务逻辑就交给具体的实例去处理。
setTitle: function(value) { this._setOption('title',value) this._trigger('complete',null,{value:value}) },
我们这里定义个setTitle方法来改变dialog弹窗标题，更改成功后触发实例上的complete回调。
_trigger() 方法有三个参数：回调名称，一个启动回调的 jQuery 事件对象，以及一个与事件相关的数据哈希。回调名称是唯一一个必需的参数。
然后，我们在插件实例上定义complete事件进行业务处理：
$('.dialog-sec').superDialog({
autoOpen: true,
title:'自定义弹窗',
show: {
effect: "blind",
duration: 1000
},
modal: true,
complete:function(event,data){
console.log('....complete....')
console.log(data)
},
})
只要更改dialog标题，触发实例上的回调：
$('.dialog-sec').superDialog('setTitle','更改标题')
....complete....
{value: "更改标题"}
部件库优势
jQuery插件定义了如何创建和销毁小部件，获取和设置选项，调用方法，以及监听小部件触发的事件。创建的是有状态的插件，它们有全生命周期、维持状态以及对变化的反应。
