Question

我正在学习jQuery UI。我下载了一个代码，其中作者制作了一个插件。代码正在运行但是当作者调用函数时我很困惑。这是代码

(function($){

    $.widget("ui.calculator", {

        options: {

            autoShow: true,
            currentSum: []

        }, //end of options

        _create: function(){..},
        destroy: function(){..},
        disable: function(){..},
        enable: function() {..},
        show: function() {
            var el = this.element.children(":first");
            if (el.is(":hidden")) {
                el.show();
            }
            this._trigger("show", null, this.element);
        }, //end of show()

         _addHoverState: function(){..}, 
         ..
    }); //end of $.widget()

})(jQuery);

这里是调用方法

$(document).ready(function(){

    //To configure the autoShow option, we could use:
    //To add a handler for the custom show event we defined     
    $("#calc").calculator({
        autoShow: true,
        show: function(e, ui) {
            alert(e + ", " + $(ui).attr("id"));
        }
     });

 }); //end of document.ready(fn)

我在打电话时很困惑。我定义show方法只是 show：function（）{} 我传递的参数没有。但是在打电话的时候我正在写 show：function（e，ui）{} 将两个参数传递给我的show函数。为什么？另外我在firebug中调试它，我注意到在 show：function（e，ui）{行之后，它来到插件的_create（）方法，但是不要进入show方法。为什么？感谢

Answer 1

你有两个完全不同的show。这一个：

$("#calc").calculator({
    show: function(e, ui) { /* ... */ }
});

是计算器小部件调用的回调函数。在你的小部件内的某个地方，你会说：

this.options.show.call(some_sensible_this, e, ui);

使用任何上下文（some_sensible_this）调用它对您的小部件有意义，或者如果您不关心上下文，您只需说：

this.options.show(e, ui);

您使用小部件工厂定义的show：

show: function() {
    var el = this.element.children(":first");
    if (el.is(":hidden")) {
        el.show();
    }
    this._trigger("show", null, this.element);
}

将是您的小部件上的jQuery-UI样式方法，您可以这样调用：

$('#calc').calculator('show');

“消息传递”接口是在jQuery-UI世界中调用方法的常用方法; jQuery插件的标准行为是返回一个jQuery对象进行链接，因此插件很难返回一个带有普通JavaScript方法的自定义对象。要具有链接和同时调用自定义方法的能力，可以使用方法名称和参数调用插件：

$(...).somePlugin('some_method', arg1, arg2, ...)

查看jQuery-UI文档中的任何 Methods 选项卡以获取示例; accordion有这样的事情：

activate
  .accordion( "activate" , index )

以编程方式激活Accordion的内容部分。

这里还有第三个show，这就是这个：

el.show();

show只是通常的jQuery show功能。

调用函数的混乱（jQuery UI）

1 个答案: