1

我正在用 Javascript 构建一个拖放 gui 构建器。到现在为止还挺好。

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

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

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

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

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

建议、提示、示例？

4

4 回答 4

2 
function uniqueId() {
    return 'id_' + new Date().getTime();
}
于 2009-07-30T09:53:10.243 回答
2

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

// 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;
}
于 2009-07-30T13:55:44.220 回答
0

如果您碰巧正在使用 Prototype 库（或想查看它），您可以使用 Element.identify() 方法。

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

于 2009-07-30T14:21:39.833 回答
0 
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;
}

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

于 2012-11-01T00:14:05.740 回答