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(方法名，方法的參數);

調用存儲在$(‘選擇器’)對應對象的方法。注意在對對象操作前必須執行個體化，否則會報錯。