zoukankan      html  css  js  c++  java
  • 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({
    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();
    	}
    */
    





查看全文
  • 相关阅读:
    该虚拟机似乎正在使用中,请获取所有权
    分配销售区域
    未对销售组织 XXX 分销渠道 00 语言 ZH 定义
    Bash 遍历目录
    plsql 不需配置*.ora就可以访问数据库
    arch linux
    拓端数据tecdat|R语言有限混合模型(FMM,finite mixture model)及其EM算法聚类分析间歇泉喷发时间
    拓端数据tecdat|使用R语言进行多项式回归、非线性回归模型曲线拟合
    拓端数据tecdat|R语言使用ARIMAX预测失业率经济时间序列数据
    拓端数据tecdat|R语言用ARIMA模型,ARIMAX模型预测冰淇淋消费时间序列数据
  • 原文地址:https://www.cnblogs.com/ldxsuanfa/p/10771066.html
  • Copyright © 2011-2022 走看看