javascript - 使用空选择器调用具有命名空间的小部件的安全方法

Question

jQueryUi $.widget 工厂创建可以通过两种方式使用的类:

1. $("mySelector").myWidget(myOptions);和
2. $.myNamespace.myWidget(myOptions, mySelector)。

第一种方式不支持小部件的命名空间，因此我更喜欢使用第二种版本。我的问题是，当 mySelector 与任何 html 元素不匹配时(即 $(mySelector).length == 0)，支持命名空间的版本会引发异常。有什么漂亮的方法来避免这个问题吗？我正在开发一个内部框架，不希望有不必要的 if 条件。

作为引用，我已经阅读过(并且我认为我理解了):

• http://api.jqueryui.com/1.10/jQuery.widget/
• http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/

Answer 1

这两个调用并不完全相同。第一个将遍历选择器的每个元素并应用小部件，但第二个不会。 请参阅:

$.ui.draggable('', 'div')

div {
  width: 100px;
  height: 100px;
  border: solid black;
}
.ui-draggable {
  border: solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div>
</div>
<div>
</div>

要使其等效，您需要使用 $.each，这会将其应用于选择器中的所有元素并消除错误。

例如这样:

$('div').each(function(){
	$.ui.draggable('', this)
});

$('.empty').each(function(){
	$.ui.draggable('', this)
});

div
{
  width: 100px;
  height: 100px;
  border: solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
 <script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div>
</div>
<div>
</div>