JavaScriptの一意のhtmlアイテムID

StackOverflow https://stackoverflow.com/questions/1205561

質問

JavascriptでドラッグアンドドロップGUIビルダーを構築しています。これまでのところとても良い。

GUIにアイテムを追加して構成するとき。それらに対処するための2つのメカニズムがあります：

  • 「クラス」-アイテムの すべてのインスタンス を実行するために使用します（CSS、汎用機能など）。 javascriptライブラリを...にバインドできます。また、ポリモーフィッククラス名をフルに活用できます（つまり、クラスが各クラス名に異なるものをバインドしたclass =＆quot; name1 name2 name3 name4＆quot;）
  • 「id」-テキストボックスまたは段落の この特定のインスタンス を指し、JavaScriptライブラリをバインドできる

私の問題はこれです： 'id'は（定義により）ページ上のすべてのhtmlアイテムで一意でなければなりません。すべてのアイテムのすべてのIDを取得し、何らかの状態テーブルを維持する必要があります。

htmlの空白ビットから開始するのはかなり合理的です-しかし、既存の「id」が混在する部分的に作成されたhtmlのビットから開始する必要があります。 ...

これを最善の方法で実行するには、 を解決する必要があります。

提案、ヒント、例？

役に立ちましたか？

解決

これを行う最良の方法は、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');

いくつかの変数＆quot; private＆quot;を保持する場合は、このルートを使用することもできます：

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

他のヒント

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

Prototypeライブラリを使用している場合（またはチェックアウトする場合）、Element.identify（）メソッドを使用できます。

それ以外の場合、ダリンの応答も良いアイデアです。

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

一意に十分近いほど十分です。特定の時間に1つのIDのみを生成する場合を除き、 Date（）ソリューションを使用しないでください...

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top