首页 > 代码库 > jQuery ui widget和jQuery plugin的实现原理简单比较

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

一、创建

1、  jQuery plugin

(function($){

$.fn.MyPlugin=function(){

  //js代码

}

})(jQuery)

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

2、  jquery ui widget

(function($){

  $.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(方法名,方法的参数); 调用存储在$(‘选择器’)对应对象的方法。注意在对对象操作前必须实例化,否则会报错。