如何为jQuery小部件实例创建唯一的ID？

Question

我正在基于jQuery小部件创建一个富文本编辑器，并且它可以在页面上有多个实例。第一个实例应该生成这样的工具栏：

<input type="checkbox" id="bold-1"><label for="bold-1">..
<input type="checkbox" id="italic-1"><label for="italic-1">..
...

第二个实例应该生成：

<input type="checkbox" id="bold-2"><label for ="bold-2">..
<input type="checkbox" id="italic-2"><label for ="italic-2">..

需要为其对应的输入'id'属性添加唯一标识符。因此，我需要为每个实例添加一个唯一的id。

像这样的东西可能有效，但我不喜欢在全局命名空间中存储计数器:

var textEditorCount;
$.widget("myEditor.textEditor", {
   _create: function () {
      textEditorCount = textEditorCount ? textEditorCount + 1 : 1;
      this.instanceID = textEditorCount;
   },
   ...
};

也许问题归结为：我如何在小部件的命名空间中存储变量？

- Carlo Roosen

---

个人而言，我会创建一个全局的 jQuery 数组来保存所有插件实例的引用。这样你就可以使用 .length 来获取它们的数量，并轻松地引用所需的实例。 - Arkadiusz 'flies' Rzadkowolski

@fliespl 您的解决方案确实可行，但有点超出我所需的范围。我的问题不是如何将按钮绑定到小部件实例，而是如何在标签中创建一个“for”标记，该标记唯一地引用输入ID。 - Carlo Roosen

Answer 1

您可以使用闭包：

(function () {
  var textEditorCount;
  $.widget("myEditor.textEditor", {
     _create: function () {
        textEditorCount = textEditorCount ? textEditorCount + 1 : 1;
        this.instanceID = textEditorCount;
     },
     ...
  };
})();

textEditorCount不再是全局变量。

- Inkbug

---

哇，当然。我已经有那个闭包了，我只是没有考虑在那里声明变量。非常感谢！ - Carlo Roosen

Answer 2

自jQuery UI 1.9以来，每个小部件实例都具有唯一的字段this.uuid和this.eventNamespace：

this.uuid = uuid++;
this.eventNamespace = "." + this.widgetName + this.uuid;

https://github.com/jquery/jquery-ui/blob/1.9.0/ui/jquery.ui.widget.js#L215

这里的this.eventNamespace字段适用于为事件处理程序分配/清除唯一的命名空间（请参见http://api.jquery.com/on/中的“事件名称和名称空间”部分）。

- Victor

---

谢谢Victor，这绝对是更好的解决方案。 - Carlo Roosen

Answer 3

全局变量（或在NS中）每个实例都会向上一级，这就是我所做的。

- yamsalm

---

那么剩下的问题是，我如何在命名空间中实现它。我可以这样做吗：$.myNamespace.textEditorCount += 1;？它似乎可以工作，但我不知道它是否合法/明智。 - Carlo Roosen