先看下代码的相关注释:

/*!* jQuery UI Widget 1.8.1** Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)* Dual licensed under the MIT (MIT-LICENSE.txt)* and GPL (GPL-LICENSE.txt) licenses.** http://docs.jquery.com/UI/Widget*/
(function( $ ) {var _remove = $.fn.remove;$.fn.remove = function( selector, keepData ) {return this.each(function() {if ( !keepData ) {if ( !selector || $.filter( selector, [ this ] ).length ) {$( "*", this ).add( this ).each(function() {$( this ).triggerHandler( "remove" );});}}//dom元素在被删除前,触发一下remove事件,jquery框架本身没有对元素删除绑定事件return _remove.call( $(this), selector, keepData );});
};$.widget = function( name, base, prototype ) {var namespace = name.split( "." )[ 0 ],fullName;name = name.split( "." )[ 1 ];fullName = namespace + "-" + name;//比如ui.tab,上面的name='tab';fullName='ui-tab';if ( !prototype ) {prototype = base;base = $.Widget;}//如果没有prototype,那么prototype就是base参数,实际base默认为$.Widget// create selector for plugin$.expr[ ":" ][ fullName ] = function( elem ) {return !!$.data( elem, name );};$[ namespace ] = $[ namespace ] || {};//是否有命名空间$[ namespace ][ name ] = function( options, element ) {//根据上面的例子,即初始化了$.ui.tab=func// allow instantiation without initializing for simple inheritanceif ( arguments.length ) {this._createWidget( options, element );}};var basePrototype = new base();//初始化,一般都是调用了new $.Widget()// we need to make the options hash a property directly on the new instance// otherwise we'll modify the options hash on the prototype that we're// inheriting from
//    $.each( basePrototype, function( key, val ) {//        if ( $.isPlainObject(val) ) {//            basePrototype[ key ] = $.extend( {}, val );
//        }
//    });basePrototype.options = $.extend( {}, basePrototype.options );//初始化options值,注意不需要深度拷贝$[ namespace ][ name ].prototype = $.extend( true, basePrototype, {namespace: namespace,widgetName: name,widgetEventPrefix: $[ namespace ][ name ].prototype.widgetEventPrefix || name,widgetBaseClass: fullName}, prototype );//为新的ui模块创建原型,使用深度拷贝,在basePrototype上扩展一些模块基本信息,在扩展prototype,比如ui.tabs.js中就是tab的拥有各种方法的大对象
 $.widget.bridge( name, $[ namespace ][ name ] );//将此方法挂在jQuery对象上
};$.widget.bridge = function( name, object ) {$.fn[ name ] = function( options ) {var isMethodCall = typeof options === "string",args = Array.prototype.slice.call( arguments, 1 ),returnValue = this;//如果第一个参数是string类型,就认为是调用模块方法//剩下的参数作为方法的参数,后面会用到// allow multiple hashes to be passed on initoptions = !isMethodCall && args.length ?$.extend.apply( null, [ true, options ].concat(args) ) :options;//可以简单认为是$.extend(true,options,args[0],...),args可以是一个参数或是数组// prevent calls to internal methodsif ( isMethodCall && options.substring( 0, 1 ) === "_" ) {return returnValue;}//开头带下划线的方法都是私有方法,不让调用if ( isMethodCall ) {//如果是调用函数this.each(function() {var instance = $.data( this, name ),//得到实例,实例作为一个数据和元素关联上methodValue = instance && $.isFunction( instance[options] ) ?instance[ options ].apply( instance, args ) ://如果实例和方法均存在,调用方法,把args作为参数传进去instance;//否则返回undefinedif ( methodValue !== instance && methodValue !== undefined ) {//如果methodValue不是jquery对象也不是undefinedreturnValue = methodValue;return false;//跳出each,一般获取options的值会走这个分支
                }});} else {//不是函数调用的话this.each(function() {var instance = $.data( this, name );if ( instance ) {//实例存在if ( options ) {//有参数instance.option( options );//调用option函数,一般是设置状态之类的操作
                    }instance._init();//再次调用此函数,根据options调整} else {$.data( this, name, new object( options, this ) );//没有实例的话,给元素绑定一个实例。注意这里的this是dom,object是模块类
                }});}return returnValue;//返回,有可能是jquery对象,有可能是其他值
    };
};$.Widget = function( options, element ) {//所有模块的基类// allow instantiation without initializing for simple inheritanceif ( arguments.length ) {//如果有参数,调用初始化函数this._createWidget( options, element );}
};$.Widget.prototype = {widgetName: "widget",widgetEventPrefix: "",options: {disabled: false},//上面的属性会在创建模块时被覆盖_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 runsthis.element = $( element ).data( this.widgetName, this );//缓存实例,保存jquery对象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();//初始化
    },_create: function() {},_init: function() {},destroy: function() {//销毁模块:去除绑定事件、去除数据、去除样式、属性this.element.unbind( "." + this.widgetName ).removeData( this.widgetName );this.widget().unbind( "." + this.widgetName ).removeAttr( "aria-disabled" ).removeClass(this.widgetBaseClass + "-disabled " +"ui-state-disabled" );},widget: function() {//返回jquery对象return this.element;},option: function( key, value ) {//设置选项函数var options = key,self = this;if ( arguments.length === 0 ) {// don't return a reference to the internal hashreturn $.extend( {}, self.options );//返回一个新的对象,不是内部数据的引用
        }if  (typeof key === "string" ) {if ( value === undefined ) {return this.options[ key ];//取值
            }options = {};options[ key ] = value;//设置值
        }$.each( options, function( key, value ) {self._setOption( key, value );//调用内部的_setOption
        });return self;},_setOption: function( key, value ) {this.options[ key ] = value;if ( key === "disabled" ) {//增加或是去除classNamethis.widget()[ value ? "addClass" : "removeClass"](this.widgetBaseClass + "-disabled" + " " +"ui-state-disabled" ).attr( "aria-disabled", value );}return this;},enable: function() {return this._setOption( "disabled", false );},disable: function() {return this._setOption( "disabled", true );},_trigger: function( type, event, data ) {var callback = this.options[ type ];event = $.Event( event );event.type = ( type === this.widgetEventPrefix ?type :this.widgetEventPrefix + type ).toLowerCase();data = data || {};// copy original event properties over to the new event// this would happen if we could call $.event.fix instead of $.Event// but we don't have a way to force an event to be fixed multiple timesif ( event.originalEvent ) {//把原始的event属性重新赋到event变量上for ( var i = $.event.props.length, prop; i; ) {prop = $.event.props[ --i ];event[ prop ] = event.originalEvent[ prop ];}}this.element.trigger( event, data );return !( $.isFunction(callback) &&callback.call( this.element[0], event, data ) === false ||event.isDefaultPrevented() );}
};})( jQuery );

上面是jquery.ui.widget.js的源码,jquery ui的所有模块都是基于其中的widget方法进行扩展,使用统一的命名规范和编码风格。 
先来说一下原理: 
$.widget此函数完成了对jQuery本身的扩展,根据第一个参数来确定模块的命名空间和函数名;第二个参数确定模块的基类(默认是$.Widget);第三个参数实现模块本身的方法。比如标签切换插件jquery.ui.tabs.js中开始: 
$.widget(“ui.tabs”, {…});//这里只有两个参数,那么基类就默认是$.Widget 
第一个参数:”ui.tabs”用来表示在jQuery上选择(或增加)一个命名空间,即如果jQuery.ui不存在,则定义jQuery.ui = {},然后在jQuery.ui上增加一个函数,名称为tabs.最后调用$.widget.bridge将tabs方法挂在jQuery对象上。这样,所有的jquery对象将拥有tabs方法。

注意:jquery ui有严格的命名规范,每个控件对外只暴露一个借口。控件所有方法或属性通过向此借口传递不同参数来调用和获取。

jquery ui的大部分控件是基于$.Widget基类实现的。所以一般我们做控件是都要重写$.Widget类中的一些方法。一般来说,一个ui控件需要实现下列的方法或属性: 
属性: 
options 用来缓存控件各项参数 
私有方法,使用“$(xx).tabs(私有方法)”这种方式来调用私有方法时会立刻返回,调用不能成功: 
_create 控件初始化调用,多次调用$(xx).tabs()这样不带参数的方法只会执行一次 
_init 一般不用实现,默认为空函数,每次“$(xx).tabs()”这样调用时会调用此方法 
_setOption “$(xx).tabs(‘option’,xxx)”这种调用方式会调用此方法 
公开方法: 
destroy 销毁模块 
option 设置或获取参数 
enable 启用模块功能 
disable 禁用功能

几乎所有的jquery ui控件都会重写这些接口,同时增加控件相关的私有或公有方法。

记住,jquery ui的实例是和元素关联起来的,作为数据保存起来了。暴露给用户使用的只是jquery对象上增加的方法。一般我们不需要获取ui的实例。

原文地址:http://xj19891016.iteye.com/blog/789201

转载于:https://www.cnblogs.com/davidwang456/p/4024433.html

jQuery UI Widget(1.8.1)工作原理--转载相关推荐

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

    一.创建 1.  jQuery plugin (function($){ $.fn.MyPlugin=function(){ //js代码 } })(jQuery) 为了与页面上其他代码友好相处,将p ...

  2. 使用 jQuery UI Widget Factory 编写有状态的插件(Stateful Plugins)

    使用 jQuery UI Widget Factory 编写有状态的插件(Stateful Plugins) 使用 jQuery UI Widget Factory 编写有状态的插件(Stateful ...

  3. 三极管工作原理(转载)

    参考文章 : 1.三极管工作原理详解 2.图说三极管的三个工作状态 3.图解三极管基本知识及电子电路图 半导体三极管,又称为双极结型晶体管(bipolar junction transistor, B ...

  4. SAP 电商云 Spartacus UI feature level directive 的工作原理

    如何消费这个 Directive: 我们可以 mock FeatureLevelDirective 的服务类: isLevel 的判断逻辑: 进行 Component 单元测试时,我们可以使用下面的 ...

  5. 1-趣味解读DNS工作原理——转载疯猫网络科技

    因为只要我们输入百度.腾讯.淘宝的名字,无论它们的服务器在哪里,历经多少轮查询,我们都能找到并访问之.这就是计算机网络中著名的域名系统DNS(Domain Name System),它能实现把一个网站 ...

  6. 基于 jquery ui 扩展Widget

    jQuery UI CSS Framework是jQuery UI中的一个样式框架,可以利用jQuery Theme roller 来生成自己想要的css样式效果.我们可以利用jQuery UI的一些 ...

  7. jquery ui 主题_使用jQuery UI主题

    主题不是一个新概念. 您可能已经使用级联样式表(CSS)样式和类推出了一些样式,以格式化网站的外观. 使用框架可以使方法标准化,并减少需要编写的工作量和代码量. jQuery UI现在是主题实现的行业 ...

  8. Dijit、ExtJS、jQuery UI 异同浅析

    钟思奇是 IBM CDL 的一名软件工程师,主要从事 Dojo 控件库及基于 J2EE 的项目开发,热衷于学习各类新技术. 王 修文, 软件工程师, Sungard 王修文是 Sungard SGT ...

  9. 前端文摘:深入解析浏览器的幕后工作原理(转)

    前端文摘:深入解析浏览器的幕后工作原理 https://www.cnblogs.com/lhb25/p/how-browsers-work.html 您可能感兴趣的相关文章 10大流行 Metro U ...

最新文章

  1. xml、 Dao service 三层参数以及对应关系
  2. Fedora学习总结
  3. 当阿里不想赚钱了,生意该怎么做?
  4. Greg Kroah-Hartman LDD3 作者,LKN作者,linux driver 开发者,新闻两则,因为过时了所以就放我这个垃圾博客里吧...
  5. boost::contract模块实现loop的测试程序
  6. Swoole安装make报错 因为php-config配错
  7. C#部分面试题及答案
  8. ubantu 重启mysql
  9. 今天,一个收到谷歌Offer的学弟用50W年薪秀了我一脸...
  10. HDU 6446 Tree and Permutation(赛后补题)
  11. 【转载】pyinstaller的使用和几个坑
  12. UITextView(文本视图) 学习之初体验
  13. 最全面的PS快捷键使用指南
  14. java如何运行_如何运行java程序
  15. Ubuntu 18.04安装c++版OpenCV4
  16. OpenStack DVR 原理深入分析
  17. 阿里云思维导图系列(一)开篇
  18. 一篇博文搞定英文常见单词后缀(完全版)
  19. [实用工具] 简单的数独计算器
  20. 一个小问题,解决提示无法启动程序,“....exe”。系统找不到指定文件

热门文章

  1. python输入程序_Python 程序设计中的输入与输出介绍
  2. 对接多种三方的设计模式_死磕设计模式之适配器模式
  3. go int 最大值_Dig101 - Go之灵活的slice
  4. linux 内核参数 杨,Linux 内核参数
  5. gitlab更新配置无效_GitMaster 发布 v1.11.0 版本,支持 GitLab 多级分组,Gist支持文件列表...
  6. 桌面计算机怎么覆盖文件,win7系统桌面快捷方式图标被未知文件覆盖如何解决...
  7. cuda 编 程(六)简单CUDA程序的基本框架
  8. Python Elasticsearch 插入数据
  9. python 自然语言处理 (六) 采用deepQA搭建自动聊天机器人
  10. 摘抄 :methodology 怎么写