ID articolo HTML univoco in Javascript

Question

Sto costruendo un generatore di gui drag'n'drop in Javascript. Fin qui tutto bene.

Mentre aggiungo elementi alla GUI e li configuro; Ho due meccanismi per affrontarli:

• la 'classe' - che utilizzo per fare tutte le istanze di un elemento (ad esempio CSS, funzionalità generiche e così via e così via) e che io posso associare le librerie javascript a ... e posso sfruttare appieno i nomi delle classi polimorfiche (cioè class = " name1 name2 name3 name4 " con cose diverse legate al nome di ogni classe ...)
• l '"id" - che fa riferimento a questa particolare istanza di una casella di testo o di un paragrafo e a cui posso associare le librerie javascript

Il mio problema è questo: l '"id" deve essere univoco in tutti gli elementi html nella pagina (per definizione), quindi come posso assicurarmelo? Devo ottenere tutti gli ID di tutti gli elementi e quindi mantenere una sorta di tabella di stato.

Partendo da un bit vuoto di html questo è abbastanza ragionevole - ma devo iniziare da un po 'creato in parte di html con una miscela di "id" esistenti - alcuni dei quali saranno nel mio schema unico e alcuni non lo saranno ...

Il modo di fare questo pensato per essere un problema risolto.

Suggerimenti, suggerimenti, esempi?

Answer 1

Il modo migliore per farlo dipenderà interamente dalla struttura e dall'organizzazione del tuo javascript. Supponendo che stai usando oggetti per rappresentare ciascuno dei tuoi elementi della GUI, puoi usare un contatore statico per incrementare il tuo id:

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

Ovviamente hai probabilmente più di un tipo di elemento, quindi puoi impostare ciascuno di essi in modo che abbiano il proprio contatore (es. form_1, form_2, label_1, label_2) o in modo che condividano tutti un contatore ( ad esempio element_1, element_2, element_3), ma in entrambi i casi probabilmente vorrai che ereditino da qualche oggetto base:

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

Potresti anche seguire questa strada se preferisci mantenere alcune variabili " 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();

Aggiornamento: se è necessario verificare che un ID non sia già in uso, è possibile aggiungere il controllo e i metodi getID:

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

Answer 2

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

Answer 3

Se ti capita di usare la libreria Prototype (o vuoi verificarla), puoi usare il metodo Element.identify ().

Altrimenti, anche la risposta di Darin è una buona idea.

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

Abbastanza vicino a unico è abbastanza buono. Non utilizzare la soluzione Date () a meno che non si generi un solo ID in qualsiasi momento ...