是否可以从函数返回jquery小部件？_Jquery_Widget

是否可以从函数返回jquery小部件？

jquery

是否可以从函数返回jquery小部件？,jquery,widget,Jquery,Widget,我想知道是否可以从函数返回jQuery小部件实例。后来我想出了一种完全不同的方法来做我想做的事，所以这只是为了满足我自己的好奇心假设我有两个小部件，一个从另一个继承。我还有一些代码，可能有一个childWidget，也可能有一个parentWidget。但重要的是在父窗口小部件上调用一个方法——在本例中是doSomething（）。不是每次都写if语句来确定是调用childWidget（'doSomething'）还是parentWidget（'doSomething'），我可以写一次代码，返

我想知道是否可以从函数返回jQuery小部件实例。后来我想出了一种完全不同的方法来做我想做的事，所以这只是为了满足我自己的好奇心

假设我有两个小部件，一个从另一个继承。我还有一些代码，可能有一个childWidget，也可能有一个parentWidget。但重要的是在父窗口小部件上调用一个方法——在本例中是doSomething（）。不是每次都写if语句来确定是调用childWidget（'doSomething'）还是parentWidget（'doSomething'），我可以写一次代码，返回正确的小部件，然后调用doSomething（）

一个非常基本的例子：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Little widget test</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

  <script>
  $(function() {
        //create parentWidget with doSomething function
    $.widget( "custom.parentWidget", {
      options: {
        widgetName: 'parent'
      },
      _create: function() {
        this.element
          // add a class for theming
          .addClass( this.options.widgetName );
      },
      doSomething: function( event ) {
        alert(this.options.widgetName);

      }
    });

    //create child widget; just overrides the widgetName property
    $.widget( "custom.childWidget", $.custom.parentWidget, {
      options: {
        widgetName: 'child'
      }
    });

        //make an instance of each widget
    $( "#my-widget1" ).parentWidget();
    $( "#my-widget2" ).childWidget();

    //function to get the widget instance
    $.fn.getWidget = function() {
            if($(this).is('.parent'))
                return $(this).parentWidget();

            return $(this).childWidget();
        }; 

    //this does not work
    $( "#my-widget1" ).getWidget()('doSomething');

  });
  </script>
</head>
<body>

<div>
  <div id="my-widget1">parent widget</div>
  <div id="my-widget2">child widget</div>
</div>


</body>
</html>


小部件测试
$（函数（）{
//使用doSomething函数创建parentWidget
$.widget（“custom.parentWidget”{
选项：{
widgetName:'父'
},
_创建：函数（）{
这个元素
//添加一个主题类
.addClass（this.options.widgetName）；
},
doSomething：功能（事件）{
警报（this.options.widgetName）；
}
});
//创建子窗口小部件；只覆盖widgetName属性
$.widget（“custom.childWidget”，$.custom.parentWidget{
选项：{
widgetName:'孩子'
}
});
//为每个小部件创建一个实例
$（“#my-widget1”）.parentWidget（）；
$（“#my-widget2”）.childWidget（）；
//函数获取小部件实例
$.fn.getWidget=function（）{
如果（$（this）.is（'.parent'））
返回$（this.parentWidget（）；
返回$（this.childWidget（）；
}; 
//这行不通
$（“#my-widget1”）.getWidget（）（'doSomething'）；
});
父窗口小部件
子元件

根据我的测试，我相当肯定答案是“不”

我所做的是通过一个公共函数将所有对小部件的调用汇集起来，因为我只需要对我的小部件进行非常简单的调用，每个调用都包含一个参数：

$.fn.callMyWidget = function (params) {
    if ($(this).is('.parent')) {
        $(this).parentWidget(params);
    }
    else {
        $(this).childWidget(params);
    }
}

//so now I can do this:
$( "#my-widget1" ).callMyWidget('doSomething');

因为

return$（this）.parentWidget（）

不返回小部件实例，所以它返回

这个元素的jquery包装，即与$（this）
相同的对象-正如您所知，jquery是基于链接工作的，所以小部件上的公共方法是使用$（“#my-widget1”）.parentWidget（'doSomething'）是的，这些我都很熟悉。我的问题是，您是否能够独立于小部件所连接的元素来获得它的句柄。我认为答案是否定的，但正如我所说，这是我的好奇心。