javascript - 自动生成唯一的 DOM id？

Question

在使用 JS 和 DOM 编码时，我发现自己经常需要生成 id(或名称)，这些 id(或名称)除了将 DOM 元素分组在一起(或关联)外别无他用他们彼此)¹.

这些 id(或名称)不会在代码的其他任何地方明确提及，因此它们可以是任何随机字符串，并且对于 id，它们必须是唯一的。

JavaScript 中是否有自动生成唯一 ID 的标准方法？

---

¹在分组(比方说)单选按钮并将它们链接到相关标签时出现了标识符的这种使用情况......

我的(天真的菜鸟)替代像这样编写 HTML 的大脑 NumPy 任务

<input type="radio" name="sys" id="sys-0" value="lnx"> <label for="sys-0"> Linux   </label> <br>
<input type="radio" name="sys" id="sys-1" value="osx"> <label for="sys-1"> OS X    </label> <br>
<input type="radio" name="sys" id="sys-2" value="win"> <label for="sys-2"> Windows </label>

(这需要为每个按钮标签对重复每个基于 sys 的标识符三次)只是写

<div class="button-group" name="sys">
  <input type="radio" value="lnx"> <label> Linux   </label> <br>
  <input type="radio" value="osx"> <label> OS X    </label> <br>
  <input type="radio" value="win"> <label> Windows </label>
</div>

然后使用一些 JS 将按钮分组到一个 name 属性下，并将标签链接到它们各自的按钮:

$('.button-group').each(function (i, e) {
  var name = $(e).attr('name');
  $(e).find(':radio').each(function (j, f) {
    var id = name + '-' + j;
    $(f).attr('name', name)
        .attr('id', id)
      .next()
        .attr('for', id);
  })
});

这很好用，但它仍然需要我为这些按钮组提供名称以及按钮的唯一 ID、名称和 ID，否则这些对我来说毫无用处。我会尽快避免所有这些不必要的命名业务，比如

<div class="button-group">
  <input type="radio" value="lnx"> <label> Linux   </label> <br>
  <input type="radio" value="osx"> <label> OS X    </label> <br>
  <input type="radio" value="win"> <label> Windows </label>
</div>

$('.button-group').each(function (i, e) {
  var name = unique_id();
  $(e).find(':radio').each(function (j, f) {
    var id = unique_id();
    $(f).attr('name', name)
        .attr('id', id)
      .next()
        .attr('for', id);
  })
});

当然，我可以推出我自己的 unique_id 实现，但我想在重新发明这个看起来非常明显的轮子之前我会先问清楚。

Answer 1

我使用的一种方法是

(function(){
    var counter = 0;
    window.uniqueId = function(){
        return 'myid-' + counter++
    }
});

然后

$('.button-group').each(function (i, e) {
  var name = uniqueId();
  $(e).find(':radio').each(function (j, f) {
    var id = uniqueId();
    $(f).attr('name', name)
        .attr('id', id)
      .next()
        .attr('for', id);
  })
});