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(); } */