检查jQuery UI选项卡是否已初始化（无需检查类）

Question

使用 jQuery UI tabs - 我编写了一个插件来与 UI tabs 集成。我已经将插件设置为在未调用 .tabs() 的情况下启动 jQuery UI tabs，但这只是进行了简单的类检查：

 if(!$globalTabs.hasClass("ui-tabs")){
    $globalTabs.tabs();
 }

但这是有问题的，因为为了避免FOUC，在document.ready之前，开发人员通常会向选项卡中添加UI类来获得更好的初始渲染。

我可以检查不同的类，比如`ui-widget1'，但想知道是否有另一种/更好的方法？

- Jason

---

但是你为什么在意它是否被调用了呢？你可以随时再次调用.tabs()，而不会发生任何问题。 - aquinas

@aquinas - 避免进行不必要的调用通常是一个好的实践。 - Jason

同意，但你担心进行一次（可能不必要的）调用吗？看看这个fiddle：http://jsfiddle.net/gBZbd/。我调用了tabs 1000次，只需要10毫秒。对我来说，这似乎是一个非常大的过早优化。@Frédéric Hamidi在他的回答中绝对是正确的，但据我所知，这并没有在任何地方记录。那段代码随时可能会出问题。当然，这只是我的个人意见。 - aquinas

@aquinas，这实际上已经有文档记录了，请看我的更新答案。 - Frédéric Hamidi

啊哈。我猜我已经看到插件这样做了，但没有意识到它是“官方认可”的。好的参考。+1。（但我仍然认为担心一个调用tabs()不值得思考。 :)） - aquinas

@aquinas - 我们的网站是一个庞然大物 - 它是巨大/企业级别的，我尽可能地减少调用，因为我们的代码库已经存在多年，许多开发人员都曾参与其中。所以代码很臃肿，我尽量重构和最小化影响。有人必须成为代码的牧羊人... - Jason

Answer 1

你可以使用 data() 查询所附加的小部件：

if (!$globalTabs.data("tabs")) {
    $globalTabs.tabs();
}

这种行为在jQuery UI的开发与计划Wiki的Widget工厂页面有记录：

• 插件实例可以通过$( "#something" ).data( "pluginname" )访问

  • 作为实例属性的一个jQuery对象引用包含DOM元素，因此在对象和元素之间来回切换很容易，可通过this.element访问。

更新：从jQuery UI 1.9开始，小部件键变成小部件的完全限定名称，其中点被替换为破折号, 如下所示：

if (!$globalTabs.data("ui-tabs")) {
    $globalTabs.tabs();
}

在1.9版本中，仍支持使用未经过资格认证的名称，但此方法已被弃用，将在1.10版本中停止支持。

- Frédéric Hamidi

---

关于我对过早优化的评论：运行 if 语句实际上会使代码变慢：请参见：http://jsfiddle.net/gBZbd/与http://jsfiddle.net/gBZbd/2/。 - aquinas

@aquinas，确实如此，但问题并没有提到性能，因此我们不知道它是否涉及速度。提问者可能实际上需要知道小部件是否已经在元素上实例化，出于我们无法猜测的原因。因此，我试图回答这个问题，以防万一 :) - Frédéric Hamidi

Answer 2

当我尝试检查实例时，某种原因导致了一些错误。

我需要重新初始化选项卡，对我来说使用try catch就可以解决问题：

try {
    $('.mytabs').tabs('destroy');
} catch (exception) {}

然后只需重新初始化即可：

$('.mytabs').tabs();

- Guntram

---

可能是由于较新的jQuery UI版本更改了一些方法，例如“data”。 - Jason

不幸的是，我有点受限于必须支持IE8... 因此，更新插件必须非常小心地进行（或者最好不要更新任何东西:D） - Guntram