7

私が書いている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（specはコンストラクターに渡されるオブジェクトです）：

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

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

4

2 に答える 2

2

DojoのウィジェットライブラリであるDijitに興味があるかもしれません。私があなたの質問を正しく理解していれば、それは基本的にあなたが求めていることを実行します。

Dijitでは、ウィジェットは基本的にDOMノード、そのコンテンツ、その動作を定義するJavaScript、および（個別にインポートされた）CSSをカプセル化して外観をスタイル設定します。

ウィジェットには、独自のライフサイクル、レジストリ、およびイベントがあります（ウィジェット内のノード上のDOMイベントに単純にマップするものを含みます。たとえば、myWidget.onClick効果的に呼び出すことができますmyWidget.domNode.onclick）。

ウィジェットは、初期コンテンツを別のHTMLテンプレートファイルで定義することができます（ただし、そうする必要はありません）。これにより、テンプレート内のノードのイベントをウィジェットメソッドにバインドしたり、特定の参照を参照するウィジェットのプロパティを設定したりすることもできます。テンプレート内のノード。

ここの表面をかろうじて引っ掻いているだけです。これについて詳しく知りたい場合は、次のリファレンスページから始めることができます。

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

于 2011-01-23T07:48:43.180 に答える
1

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

まず最初に。jQueryの哲学は、最初に要素を選択するか、を使用して$()、または同等にすべてを開始することですjQuery()。すべての操作は概念的にこれから始まります。これは、要素をラップするオブジェクトを作成してそのラッパーへの参照を保持するのとは少し異なる考え方ですが、基本的にはこれがjQueryが行うことです。$('#some-id')「some-id」のidを持つ要素を取得し、それをjQueryオブジェクトにラップするための呼び出し。

1つの方法：「フィルター」プラグインを作成します。

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

updateFeedjQuery名前空間の不必要な汚染を防ぐために、クリックハンドラーに単純にインライン化できることに注意してください。ただし、このようにjQueryを使用する利点の1つは、後で何らかの関数を呼び出す必要がある場合にオブジェクトへの参照を保持する必要がないことです。これは、jQueryがすべての参照を実際の要素に結び付けるためです。updateFeedプログラムで電話をかけたい場合は、次のようにします。

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

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

考慮すべきいくつかの事柄

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

さらに、これらの関数はすべてすべてのjQueryオブジェクトに共通になるため、この正確なメソッドは、多くの操作を必要とするオブジェクト（つまり、多くの関数を持つオブジェクト）にはあまり適していない可能性があります。ここでは取り上げませんが、これらすべてをカプセル化する方法はいくつかありますが、jQuery-uiはウィジェットを使用してこれを行い、作成しているライブラリでさらに別の方法を試しています。

ただし、少し引き戻すと、最初にjQueryを使用することを提案した唯一の理由は、FilterオブジェクトがDOMに強く結びついているように見えることです。イベントをDOMにバインドし、ユーザーの操作に基づいてDOMを変更します。基本的には、DOM内に存在するように見えるため、DOMベースの何か（jQuery）を使用します。

于 2011-01-20T07:53:46.897 に答える