调用 JQuery UI 小部件超级函数的正确方法？

Question

在 JQuery UI 中，调用 super/base 函数的正确语法是什么？在下面的示例中，我应该使用 this._super(param1) 还是 this._super('myFunction', param1) 来调用基本函数？

$.widget( "namespace.Foo", {
    _create: function () {
        // ...
        this._super( "_create" );
    },

    myFunction: function(param1) {
        // ...
    }
});


$.widget( "namespace.Bar", $.namespace.Foo, {
    _create: function () {
        // ...
        this._super( "_create" );
    },

    myFunction: function(param1) {
        // Is this correct?
        this._super('myFunction', param1);
        // or this?
        this._super(param1);

        // ...
    }
});

Answer 1

此处讨论：https://api.jqueryui.com/jQuery.widget/#method-_super

Invokes the method of the same name from the parent widget, with any specified arguments. Essentially .call().

args Zero to many arguments to pass to the parent widget's method.

_setOption: function( key, value ) {
  if ( key === "title" ) {
    this.element.find( "h3" ).text( value );
  }
  this._super( key, value );
}

所以它已经在您的第一个示例中调用了 _create，因此您现在将“_create”作为参数发送给 this._create()，实际上并没有做任何事情。

深入挖掘，我们看到：https://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/

_super() and _superApply() invoke methods of the same name in the parent widget. Refer to the following example. Like the previous one, this example also overrides the open() method to log "open". However, this time _super() is run to invoke dialog's open() and open the dialog.

$.widget( "custom.superDialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
 
        // Invoke the parent widget's open().
        return this._super();
    }
});
 
$( "<div>" ).superDialog();

您的第一个小部件没有发生变化，因此不确定是否需要调用 _super()。在你的突变中，你不需要向 _create() 发送参数。你可以换另一个。

$.widget( "namespace.Bar", $.namespace.Foo, {
    _create: function () {
        this._super();
    },
    myFunction: function(param1) {
        this._super(param1);
    }
});

调用 JQuery UI 小部件超级函数的正确方法？

Correct way to call a JQuery UI widget super function?

jquery

jquery-ui

jquery-ui-widget