jquery的widget源代码剖析

dialog_obj(别名):

Widget_obj(别名):

调用widget方法

$.widget("ui.dialog",dialog_obj);  //  jquery.ui.dialog.js文件第27行 

	   //widget方法位于 jquery.ui.widget.js 文件第27行 

变量赋值:

prototype=dialog_obj

base=Widget_obj

定义构造函数

	$[ namespace ][ name ] = function( options, element ) {
		// allow instantiation without initializing for simple inheritance
		if ( arguments.length ) {
			this._createWidget( options, element );
		}
	};//<pre name="code" class="javascript">//以上代码位于 jquery.ui.widget.js 文件第44行

 以上代码作用:

jQuery.ui.dialog=function(){};//定义一个名为dialog类的构造函数
	

创建Widget_obj类的实例对象

var basePrototype = new base();

设置dialog类的原型对象

$[ namespace ][ name ].prototype = $.extend( true, basePrototype, {
		namespace: namespace,
		widgetName: name,
		widgetEventPrefix: $[ namespace ][ name ].prototype.widgetEventPrefix || name,
		widgetBaseClass: fullName
	}, prototype );

通过extern方法将basePrototype与prototype两者进行合并，两个对象中出现同名属性，

后者将前者覆盖,并将basePrototype作为返回值赋值给dialog类的原型对象,

如：

Widget_obj中_init,_create,destroy等方法被dialog_obj的_init,_create,destroy覆盖

创建dialog插件

$.widget.bridge( name, $[ namespace ][ name ] );//name="dialog" ,jQuery.ui.dialog

$.fn[ name ] =function(){};//定义dialog插件

调用

/*当我们在页面中js中调用:$("#showDiv").dialog({
width:500px;
heigh:200px;
...
});
调用的是$.fn[ name ] = function( options ) {} 这一堆
重点:
在bridge方法中，有以下一段这段
$.data( this, name, new object( options, this ) );
//this是id为showDiv的div对象,options为页面中传入的json对象,
name="dialog" ,object=jQuery.ui.dialog ,此处使用闭包

new object //创建 jQuery.ui.dialog 类的实例
构造函数:
$[ namespace ][ name ] = function( options, element ) {
		// allow instantiation without initializing for simple inheritance
		if ( arguments.length ) {
			this._createWidget( options, element );
		}
	};
//调用 this._createWidget,代码例如以下:

_createWidget: function( options, element ) {
		// $.widget.bridge stores the plugin instance, but we do it anyway
		// so that it's stored even before the _create function runs
		this.element = $( element ).data( this.widgetName, this );
		this.options = $.extend( true, {},
			this.options,
			$.metadata && $.metadata.get( element )[ this.widgetName ],
			options );

		var self = this;
		this.element.bind( "remove." + this.widgetName, function() {
			self.destroy();
		});

		this._create();
		this._init();
	}
*/