0

私はシングル ページ アプリに取り組んでおり、かなりの数の DOM ノード構築関数が、作成したオブジェクトへの参照を返します。これが私が意味することの例です：

if (!document.getElementById('playlistHeader')) {
        appView.buildKit.playlist.headerWrap();
    }

    // construct element
    var secondaryBtnsWrap = document.createElement("div");
    secondaryBtnsWrap.id = "playlistSecondaryBtnWrap";
    secondaryBtnsWrap.className = "clearright right";

    // attach it
    document.getElementById('playlistHeader').appendChild(secondaryBtnsWrap);

    // return reference to dom node
    return secondaryBtnsWrap;

ビューを切り替えるときにノードを破棄して再作成するのは冗長だと考えたので、一部のノード (サイトのサブセクション) のコンテンツを消去できるようにするための作業を開始しました。

// build wipe function
    secondaryBtnsWrap.wipe = function(){

        // do custom wiping here
    }

アイデアは、UI の一部を「リセット」し、ビュー間の違いを再構築することです。たとえば、どうしても必要なボタンがあった場合、ワイプ機能では削除されません。そうすれば、同じ要素を作成する余分な手間が省けます。

場合によっては、ノードへの参照を取得してアタッチされたカスタム関数をトリガーする方がはるかに簡単ですが、それが実際に良いアイデアなのか、それとも単に良いアイデアのように見えるだけなのか疑問に思っていました (しかしそうではありません)。

TL;DR バージョン

DOMノードにJavascript関数を与えるのは良い考えですか?

4

1 に答える 1

2

DOM ノードは第一級のオブジェクトです。それらに独自のプロパティを割り当てても問題はありません。ビルトインを上書きしようとしないでください (おそらくイベント ハンドラーを除きますが、実際にはattachEvent/を使用する必要がありますaddEventListener)。私の意見では、これはユーザー インターフェイスの開発という点で JavaScript の最も便利な機能の 1 つです。

独自の DOM ノードを生成する標準オブジェクトを使用してページを構築することもできます。対話性のために、上記のオブジェクトで関数を呼び出すイベントリスナーをアタッチできます。クロージャーを使用して所有者オブジェクトを参照します。例えば：

function Foo() {
    this.element = undefined;
    this.createTextbox();
}

Foo.prototype.createTextbox = function() {
    var $self = this;
    this.element = document.createElement('input');
    this.element.type = 'text';
    this.element.addEventListener('change', function() { 
        $self.onChange.apply($self, arguments); 
    });
}

Foo.prototype.onChange = function() {
    console.log(this.element.value);
}

Foo.prototype.Render = function(target) {
    target = target || document.body;
    target.appendChild(this.element);
}

var foo = new Foo();
foo.Render();

どちらの方法も同様に有効ですが、デザインまたは機能のいずれかを大幅に変更する必要がある場合は、おそらく後者の方が便利だと思います (両方の場所で ID、クラス、およびレイアウトを変更するのではなく、1 つの場所で変更するだけで済みます)。 ）。

于 2013-02-02T04:47:14.600 に答える