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

标签：style   c   t   sp   get   cti   type   new   name   代码   margin   

一、创建

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

jQuery ui widget和jQuery plugin的实现原理简单比较,搜素材,soscw.com

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

标签：style   c   t   sp   get   cti   type   new   name   代码   margin   

原文地址：http://www.cnblogs.com/htmlwall/p/3699404.html