编写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插件定义了如何创建和销毁小部件，获取和设置选项，调用方法，以及监听小部件触发的事件。创建的是有状态的插件，它们有全生命周期、维持状态以及对变化的反应。