首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

经过分析jqueryui源码,调用其私有方法

2012-11-17 
通过分析jqueryui源码,调用其私有方法jqueryui是一个优秀的组件库,合理利用并封装其代码,可以创造出自己的

通过分析jqueryui源码,调用其私有方法

jqueryui是一个优秀的组件库,合理利用并封装其代码,可以创造出自己的组件库,使用过程中,避免不了的需要深入其源码,并调用其内部的一些方法,来完成自己的需求。

?

需求场景:

jqueryui的autocomplete功能,为输入框中输入值,则自动进行suggest,但是现在有一个需求,即不让其自动提示,而是通过点击按钮来触发。

解决:

通过参数设置,是肯定不能完成这个功能了。仔细看了其source参数的自定义方式,也不能满足这个需求,进而查看其源码,发现其从输入到发送请求,到最后展现div列表项,经历了ui.autocomplete的如下方法调用

search->_search->source->response->_response->_normalize->_suggest

?

其中respone以后,即为数据返回后,开始创建DIV列表项了,那我们要去从中间开始,连接上这一长串的调用,就要手动调用search或者_search中的一个方法,通过对2个方法的对比,最终决定选择_search方法,其函数如下:

?

_search: function( value ) {

?

显然,只要调用这个方法,并且把输入框的值,传入函数,那么接下来的动作,就又可以交给组件进行了。

?

接下来就蛋疼了,关于怎么调用这个方法,颇费了一番周折。

先把调用的结果写法列出来,然后再具体分析:

?

?

通过阅读,可以知道,他会把传来的组件字符串名,分配到相应的属性上,并定义其方法,原型等

?

我们重点关注其最后一行的$.widget.bridge( name, $[ namespace ][ name ] );函数

?

查看其方法定义如下:

?

?

?

?

这个方法,就很明显了,大概意思为当调用组件的入口方法(如:inputobj.autocomplete(settings);)时,所进行的逻辑。比如判断传来的参数是否为方法,是方法则调用,不是则设置属性。

?

方法调用的判断中,有这么一句话,也值得我们关注:

?

?

if ( isMethodCall && options.charAt( 0 ) === "_" ) {

return returnValue;

}

?

什么意思,就是说你要是调用了它以_开头的方法,就直接返回,也就是不允许你对其定义的私有方法进行调用,这也就是,我为什么要给起对象,添加一个rqcussearch方法的原因了。

?

?

看到了以上的分析,我想我们已经对jqueryui的源码,有了初步的,整体的了解,那么以后我们在使用时,遇到了问题,就无往而不利了

热点排行