Question

我正在使用Javascript构建一个drag'n'drop gui构建器。到目前为止一切都很好。

我向GUI添加项目并进行配置;我有两种解决它们的机制：

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

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

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

最好的方法应该才能解决问题。

建议，提示，示例？

Answer 1

function uniqueId() {
    return 'id_' + new Date().getTime();
}

Answer 2

执行此操作的最佳方式完全取决于javascript的结构和组织。假设您使用对象来表示每个GUI元素，您可以使用静态计数器来增加IDS：

// 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');

如果您希望将某些变量保持为“私有”，您也可以选择此路线：

// 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;
}

Answer 3

如果您正在使用Prototype库（或想要检查它），您可以使用Element.identify（）方法。

否则，达林的反应也是一个好主意。

Answer 4

function generateId() {
    var chars = "0123456789abcdefghiklmnopqrstuvwxyz",
        string_length = 8,
        id = '';
    for (var i = 0; i < string_length; i++) {
        var rnum = Math.floor(Math.random() * chars.length);
        id += chars.substring(rnum, rnum + 1);
    }

    return id;
}

足够接近独特就足够了。除非您在任何给定时间仅生成单个ID，否则请勿使用Date()解决方案...

Javascript中唯一的html项ID

4 个答案: