jQuery ui widget和jQuery plugin的实现原理简单比较

一、创建

1、  jquery plugin

(function($){

$.fn.myplugin=function(){

  //js代码

}

})(jquery)

为了与页面上其他代码友好相处,将plugin定义在一个闭包里，myplugin是plugin的名字。调用方式:$(‘选择器’).myplugin();

2、  jquery ui widget

  $.widget(‘ui.mywidget’,{

options:{

  //默认的配置参数

},

//方法的定义

})

})(jqurry)

同样定义在一个闭包里。mywidget

为这个widget的名字。调用方式:$(‘选择器’).mywidget();

上述代码只是简单概述，具体实现jquery官方文档讲得很详细。

二、实现原理

创建一个jquery

plugin其实是创建了一个jquery对象（在这里我把通过$(‘选择器’)的返回值叫做jquery对象）的方法。看下$()和$.fn 是什么就明白了。

通过$.widget 这个widget factory

函数创建的一个widget，本质上是通过创建一个类即一个构造函数实现的。

看下 widget

工厂函数的调用，方法：$.widget(name,[,base],prototype)。

name:要创建的widget的名字，包扩命名空间。如：ui.mywidget。

base：为一个父类。新创建的类将继承他的方法。默认为：$.widget。

prototype:作为创建的类即构造函数的prototype属性值。

再看下widget的调用。

 实例化：通过$(‘选择器’).mywidget()，实例化相应的类，并通过$.data()将实例化后得到的对象存储在对应的$(‘选择器’)中。源码：$.data(

this, fullname, new object( options, this ) );

  对象操作: $(‘选择器’).mywidget(方法名，方法的参数);

调用存储在$(‘选择器’)对应对象的方法。注意在对对象操作前必须实例化，否则会报错。