JavaScriptオブジェクト内にDOM要素をラッピングします

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

質問

私が書いているJavaScriptの一般的なパターンに気づき、ベストプラクティスと同様のものを定義するパターンがすでにあるかどうか疑問に思っていましたか？基本的に、それはDOM要素を取得し、それを内部に包む /それをJavaScriptオブジェクトに関連付ける方法です。 Webアプリでフィルターが必要なこの例を取ります。あなたのページは次のようになります：

<html>
<head></head>
<body>
    <div id="filter"></div>
</body>
</html>

その後、そのように要素を包みます：

var myFilter = new Filter({
    elem: document.getElementById('filter'),
    prop: 'stacks-test',
    someCallback: function() {
        // specify a callback
    }
});

JavaScript（スペックはコンストラクターに渡されるオブジェクトです）：

var Filter = function(spec) {
    this.elem = spec.elem;
    this.prop = spec.prop;
    this.callback = spec.someCallback;
    this.bindEvents();
};

Filter.prototype.bindEvents = function() {
    var self = this;
    $(this.elem).click(function(e) {
        self.updateFeed();
    };
};

Filter.prototype.updateFeed = function() {
    this.prop; // 'stacks-test'
    this.callback();
    // ...
    // code to interact with other JavaScript objects
    // who in turn, update the document
};

この種のアプローチは何と呼ばれ、ベストプラクティスと警告は何ですか？

役に立ちましたか？

解決

DojoのWidget Library、Dijitに興味があるかもしれません - あなたの質問を正しく理解しているなら、それは基本的にあなたが求めていることをします。

Dijitでは、ウィジェットが本質的にDOMノード、その内容、その動作を定義するJavaScriptをカプセル化し、（別々にインポート）CSSをスタイリングします。

ウィジェットには、独自のライフサイクル、レジストリ、およびイベントがあります（多くの人がウィジェット内のノード上のDOMイベントにマッピングするだけです。 myWidget.onClick 効果的に呼び出すことができます myWidget.domNode.onclick).

ウィジェットは、初期コンテンツを別のHTMLテンプレートファイルで定義することができます。テンプレート内のノード。

ここではほとんど表面をひっかいていません。これについてもっと読みたい場合は、これらの参照ページから始めることができます。

私はあなたが最終的に何を目指しているのかわからない、そしておそらくこれはあなたの目的のために少し多くです（私はあなたに他のライブラリ全体を投げていることを考慮して）が、それは少なくともあなたの興味をそそるかもしれないと考えました。

他のヒント

質問についての私のコメントから続けて、jQueryは 潜在的な 仕事のためのツールは、あなたが望んでいるものの基礎のいくつかをすでに提供しているためです。しかし、そうは言っても、それは独自の複雑さをもたらし、さらに、すべての「jQueryの方法」が等しいわけではありません。 jQueryを「オブジェクトモデル」として使用する方法の1つをお勧めしますが、ニーズに合っている場合とそうでない場合があります。

最初に最初のこと。 jQueryの哲学は、最初に要素を選択して、すべてを開始することです。 $(), 、または同等に jQuery(). 。すべての操作は概念的にこれから始まります。これは、要素をラップし、そのラッパーへの参照を維持するオブジェクトを作成するのと比較して、わずかに異なる考え方ですが、本質的にこれはjQueryがあなたのために行うことです。通話 $('#some-id') 「some-id」のIDで要素をつかみ、jqueryオブジェクトにラップします。

一方通行： 「フィルター」プラグインを書きます。

コンストラクターをに置き換えます initFilter() jQueryメソッド。これを行うには、jQueryプロトタイプを変更し、jqueryオブジェクトをラッパーとして使用することで行うことができます。 jQueryのプロトタイプは参照されています jQuery.fn, 、 それで：

jQuery.fn.initFilter = function (prop, callback) {
    // Save prop and callback
    this.data('filter-prop', prop);
    this.data('filter-callback', callback);

    // Bind events (makes sense to do this during init)
    this.click(function () {
        $(this).updateFeed();
    });
};

次に、同様のことをします updateFeed():

jQuery.fn.updateFeed = function () {
    this.data('filter-prop');
    this.data('filter-callback')();
});

そして、このようにそれを使用します：

$('#filter').initFilter(prop, callback);

ご了承ください updateFeed jQueryネームスペースの不必要な汚染を防ぐために、クリックハンドラーに単純に並べることができます。ただし、このようにjQueryを使用することの利点の1つは、JQueryが実際の要素にすべての参照を結び付けるため、後で機能する必要がある場合、オブジェクトへの参照を保持する必要がないことです。電話したい場合 updateFeed プログラム、次に：

$('#filter').updateFeed();

その後、正しいオブジェクトに呼び出されます。

考慮すべきことがいくつかあります

確かにこの方法には欠点があります。 1つは、すべてのプロパティが使用されている要素に対して保存したすべてのプロパティです .data(), 、その要素に作用するすべてのjQuery関数の間で共有されます。プロパティ名に「フィルター」を接続することでこれを軽減しようとしましたが、オブジェクトの複雑さによっては、これは適切ではない場合があります。

さらに、この正確な方法は、これらすべての関数がすべてのjQueryオブジェクトに共通するようになるため、多くの操作（すなわち多くの関数を持つオブジェクト）を必要とするオブジェクトにそれほど適していない場合があります。ここには入らないこれらすべてをカプセル化する方法がありますが、jQuery-uiはウィジェットでこれを行います。

ただし、少し引き戻すと、そもそもjQueryを使用することを提案した唯一の理由は、フィルターオブジェクトがDOMに大きく結び付けられているように見えることです。イベントをDOMにバインドし、ユーザーの相互作用に基づいてDOMを変更します。基本的にはDOMに住んでいるように見えるため、DOMベース、すなわちJQueryを使用します。

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