1

Javascript でドラッグ アンド ドロップ GUI ビルダーを構築しています。ここまでは順調ですね。

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

  • 「クラス」 - アイテムのすべてのインスタンス(CSS、汎用機能など)に対して何かを行うために使用し、javascript ライブラリをバインドできる...そしてポリモーフィック クラスをフルに活用できる名前 (つまり、class="name1 name2 name3 name4" で、各クラス名に異なるものがバインドされています...)
  • 「id」 -テキスト ボックスまたは段落のこの特定のインスタンスを参照し、javascript ライブラリをバインドできる

私の問題はこれです: 'id' はページ上のすべての html アイテムで (定義により) 一意でなければならないので、どうすればこれを保証できますか? すべてのアイテムのすべての ID を取得し、ある種の状態テーブルを維持する必要があります。

空白の html から開始するのはかなり合理的ですが、既存の 'id's が混在する部分的に作成された html のビットから開始する必要があります。その一部は独自のスキームにあり、一部はそうではありません...

これを最善の方法で行う方法は、解決された問題でなければなりません。

提案、ヒント、例?

4

4 に答える 4

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 
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()...

于 2012-11-01T00:14:05.740 に答える