ID d'article HTML unique en Javascript

Question

Je construis un constructeur de drag'n'drop gui en Javascript. Jusqu'ici tout va bien.

Au fur et à mesure que j'ajoute des éléments à l'interface graphique et les configure; J'ai deux mécanismes pour les aborder:

• la "classe" - que j'utilise pour toutes les instances d'un élément (par exemple, CSS, fonctionnalité générique, etc.) et que je peut lier des bibliothèques javascript à ... et utiliser pleinement les noms de classes polymorphes (c'est-à-dire class = "name1 name2 name3 name4" avec différentes choses liées à chaque nom de classe ...)
• le 'id' - qui fait référence à cette instance particulière d'une zone de texte ou d'un paragraphe et auquel je peux lier des bibliothèques javascript

Mon problème est le suivant: le 'id' doit être unique pour tous les éléments html de la page (par définition), alors comment puis-je m'assurer de cela? Je dois obtenir tous les identifiants de tous les éléments, puis conserver une sorte de table d'état.

Partir d'un peu de HTML vide c'est assez raisonnable - mais je dois partir d'un peu de HTML partiellement créé avec un mélange de 'id's existants - dont certains seront dans mon schéma unique et d'autres ne le seront pas. ...

La meilleure façon de faire cela devrait être un problème résolu.

Suggestions, astuces, exemples?

Answer 1

La meilleure façon de procéder dépend entièrement de la structure et de l'organisation de votre javascript. En supposant que vous utilisiez des objets pour représenter chacun de vos éléments de l'interface graphique, vous pourriez utiliser un compteur statique pour incrémenter vos données. identifiants:

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

Bien sûr, vous avez probablement plus d’un type d’élément, vous pouvez donc les configurer de manière à ce qu’ils aient leur propre compteur (par exemple, formulaire_1, formulaire_2, label_1, label_2) ou qu’ils partagent tous un même compteur ( par exemple, element_1, element_2, element_3), mais vous voudrez probablement qu’ils héritent de certains objets de 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');

Vous pouvez également choisir cette voie si vous préférez conserver certaines variables "privé":

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

Mettre à jour: Si vous devez vérifier qu'un identifiant n'est pas déjà utilisé, vous pouvez ajouter la méthode de vérification ainsi que celle des méthodes 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

Si vous utilisez la bibliothèque de prototypes (ou souhaitez l'exécuter), vous pouvez utiliser la méthode Element.identify ().

Sinon, la réponse de Darin est également une bonne idée.

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

Assez proche d'unique, c'est bien. N'utilisez pas la solution Date () sauf si vous ne générez qu'un seul identifiant à la fois ...