读书人

jquery(自各儿看的)

发布时间: 2012-10-08 19:54:56 作者: rapoo

jquery(自己看的)
jQuery UI Widget(1.8.1)工作原理 2010年05月24日 +"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的实例。

读书人网 >Web前端

热点推荐