如何检查特定的 jQuery UI 函数是否可用，如果不可用则使用不同的函数？

Question

我正在编写一个 jQuery 插件，我希望我的代码能够利用 jQuery UI show(effect, [options], [speed], [callback]) 和 hide(effect , [options], [speed], [callback]) 函数，允许您用漂亮的动画显示和隐藏元素。

但是，如果 jQuery UI 不可用，我还希望我的插件能够正常降级，切换回使用基本的非动画 show() 和 hide() 标准 jQuery API 中存在的函数。

我需要专门测试显示和隐藏功能，因为即使 jQuery UI 可用，它也可能是一个自定义版本，不包含效果组件。

起初我以为我可以做类似的事情：

if(typeof myelement.show('blind', 'slow') == 'undefined')
{
    myelement.show('blind', 'slow');
}
else
{
    myelement.show();
}

但是当然这不起作用，因为即使 UI 不存在， show() 仍然是一个函数，它只是有不同的签名 - 因此 typeof 在任何情况下都会返回 object。

那么，检查 jQuery UI 是否可用于我的插件的最佳方法是什么？非常感谢任何帮助！

Answer 1

尼克的功能发挥得非常完美；为了保持一致性，我最终在我的插件代码中将其添加为 jQuery 实用函数：

$.extend({
    hasEffect: function (effect) {
        return $.effects && $.effects[effect];
    }
});

所以现在我可以在任何想要检查是否存在特定 jQuery UI 的地方调用 $.hasEffect(effectname)影响。

Answer 2

您可以检查这样的效果：

function hasEffect(effect) {
    return $.effects && $.effects[effect];
}

然后您可以在任何地方使用它：

if(hasEffect('blind')) {
  myelement.show('blind', 'slow');
} else {
  myElement.show();
}
//or, you can shorten it further:
//$.fn.show.apply(myelement, hasEffect('blind') ? ['blind','slow'] : []);​

您可以在此处查看演示，选中/取消选中左侧的 jQuery UI，然后单击顶部的“运行”以查看其运行情况。这是有效的，因为效果是这样声明的：

$.effects.blind = function(o) { ...effecty stuff... };

例如，您可以看到 此处“盲目”。我在上面的代码中检查 $.effects 和 $.effects.effect 的原因是您只能下载 下载 jQuery UI 时的一些效果，因此这说明了这种可能性。