javascript - Javascript 中唯一的 html 项目 ID

Question

我正在用 Javascript 构建拖放式图形用户界面生成器。到目前为止一切顺利。

当我向 GUI 添加项目并配置它们时；我有两种机制来解决它们:

• “类”- 我用它来处理项目的所有实例(例如 CSS、通用功能等等)，我用它可以将 javascript 库绑定(bind)到...并且我可以充分利用多态类名(即 class="name1 name2 name3 name4"将不同的东西绑定(bind)到每个类名...)
• 'id' - 指的是文本框或段落的这个特定实例，我可以将 javascript 库绑定(bind)到它

我的问题是:“id”在页面上的所有 html 项目中必须是唯一的(根据定义)，那么我如何确保这一点？我需要获取所有项目的所有 ID，然后维护某种状态表。

从一段空白的 html 开始，这是非常合理的 - 但我需要从部分创建的 html 开始，混合现有的“id” - 其中一些将在我的独特方案中，其中一些不会...

做到最好的方法应该是一个已解决的问题。

建议、提示、示例？

Answer 1

做到这一点的最佳方法将完全取决于您的 javascript 的结构和组织。假设您正在使用对象来表示每个 GUI 元素，您可以使用静态计数器来递增编号:

// Your element constructor
function GuiElement() {
    this.id = GuiElement.getID();
}
GuiElement.counter = 0;
GuiElement.getID = function() { return 'element_' + GuiElement.counter++; };

当然你可能有不止一种类型的元素，所以你可以设置它们中的每一个，这样它们就有自己的计数器(例如 form_1、form_2、label_1、label_2)或者它们都共享一个计数器(例如 element_1、element_2、element_3)，但无论哪种方式，您都可能希望它们继承自某个基础对象:

// Your base element constructor
function GuiElement(tagName, className) {
    this.tagName = tagName;
    this.className = className;
}
GuiElement.counter = 0;
GuiElement.getID = function() { return 'element_' + GuiElement.counter++; };
GuiElement.prototype.init = function() {
    this.node = document.createElement(this.tagName);
    this.node.id = this.id = GuiElement.getID();
    this.node.className = this.className;
}

// An element constructor
function Form() {
    this.init();
}
Form.prototype = new GuiElement('form', 'form gui-element');

// Another element constructor
function Paragraph() {
    this.init();
}
Paragraph.prototype = new GuiElement('p', 'paragraph gui-element');

如果您希望将一些变量保留为“私有(private)”，您也可以采用这种方式:

// Your element constructor constructor
var GuiElement = (function() {
    var counter = 0;
    function getID() {
        return 'element_' + counter++;
    }
    return function GuiElement(tagName, className) {
        return function() {
            this.node = document.createElement(tagName);
            this.node.id = this.id = getID();
            this.node.className = className + ' gui-element';
            this.className = className;
        };
    }
})();

// Create your element constructors
var Form = GuiElement('form', 'form'),
    Paragraph = GuiElement('p', 'paragraph');

// Instantiate elements
var f1 = new Form(),
    f2 = new Form(),
    p1 = new Paragraph();

更新:如果您需要验证一个 id 是否尚未被使用，那么您可以添加检查您和 getID 方法:

var counter = 0;
function getID() {
    var id = 'element_' + counter++;
    while(document.getElementById(id)) id = 'element_' + counter++;
    return id;
}