0

在我正在编写的 jQuery 插件中，我想检查调用插件的 DOM 对象中的特定元素。代码看起来像这样：

//the object that you call the plugin on, stored in the variable "o"
o = this;

//Store children of a child element inside "o" in the variable "elInsideO"
elInsideO = o.find('selector').children('childrenSelector');

/* check if elInsideO is empty in case 'selector' is not present and then look for 
alternative element 'selector2' */
if (elInsideO.length == 0) {
    elInsideO = o.find('selector2').children('childrenSelector');
}

有没有更有效的方法来进行这种选择？我能想到的另一种可能性是：

if (o.find('selector').length != 0) {
    elInsideO = o.find('selector').children('childrenSelector');
} else {
    elInsideO = o.find('selector2').children('childrenSelector');
}

这些解决方案中哪一个更有效（意味着性能更好）？还有其他更好的方法吗？

感谢您的帮助！

4

2 回答 2

1

这两个代码片段做了不同的事情......如果o.find('selector')有元素但这些元素没有子元素，第一个方法将转到第二个选择器。然而，第二位代码将返回一组不存在的空子集。所以在这种情况下，问题不是哪个表现更好，而是哪个是正确的。:)

在您保证孩子的情况下，我会认为他们将与您将结果缓存o.find('selector')在变量中而不是在条件检查中并再次在结果中运行它几乎相同。在这两种情况下，你都是先做的o.find('selector')。在这两种情况下，如果它存在，那么你会得到孩子，所以时间会大致相同。

如果它不存在，那么第一个方法也会调用 children，但是在一个空的 jquery 对象上调用这个方法是很简单的。然后他们都继续做同样的事情。

第二组代码避免了一些多余的调用，否则你会注意到可以忽略不计的差异。

与往常一样，如果您认为这种性能真的很关键，那么请执行一些基准测试来测试您自己在使用它的情况下表现最好的情况。

于 2012-10-16T09:46:00.540 回答
1

好的，我终于第一次做了一些基准测试。我使用了 jsPerf。根据测试，效率最低的方法是：

elInsideO = o.find('selector').children('childrenSelector');
if (elInsideO.length == 0) {
    elInsideO = o.find('selector2').children('childrenSelector');
}

我测试了另外三个给我相同结果的变体：

2：

if (o.find('selector').length != 0) {
    elInsideO = o.find('selector').children('childrenSelector');
} else {
    elInsideO = o.find('selector2').children('childrenSelector');
}

3：

 if (o.find('selector').length != 0) {
    elParent = o.find('selector');
 } else {
    elParent = o.find('selector2');
 }
 elInsideO = stopsParent.children('childrenSelector');

4：

elParent = o.find('selector');
if (elParent.length == 0) {
    elParent = o.find('selector2');
}
elInsideO = elParent.children('childrenSelector');

2、3 和 4 都比第一个变体表现更好。尽管测试总是将这三个中的另一个声明为最好的，因此您无法确定其中哪个最好，但第一个总是表现最差。我更喜欢第四个变体，因为它将父元素存储在一个额外的变量中，所以我也可以将它用于其他目的，并且与变体 3 相比，我的代码行更少。

你可以在这里自己测试：

http://jsperf.com/fallback-selection

于 2012-10-16T13:02:06.433 回答