2012-02-16 2 views
0

シンプルなjavascriptウィジェットデザインの質問です。 私はかなり最近にjavascriptで作業を始めました。私の仕事の一環として、私は再利用可能なコードをたくさん作りたいと思っています。私のためにjavascriptウィジェットは最善の方法のように思えます。 しかし、私はデザインのジレンマに直面しており、正しい答えを見つけることができません。OOPsの概念をJavascriptウィジェットに変換する

私はHTMLコンポーネントの文字列を変更する単純なjavascriptウィジェットを持っています。だから私のウィジェットは多少このようなものです:

(function() { 
    var convertString = function() { 
     $(".classForHtmlComponentsIWantToHandle").each(function(index, element) { 
      //js_fu stuff done with string fetched from "element" 
     }); 
    }; 

    var _somePrivateHelperMethod() { 
     //some work that would have been impossible without this helper method 
    }; 

    GloballyDefinedNamespace.StringUtils = {convert : convertString}; 
}()); 

これは私はあなたが上記の私のウィジェットっぽい機能に気づくならば今、私はDOMからすべてのHTML要素を抽出し、後で

GloballyDefinedNamespace.StringUtils.convert(); 

呼び出すことができます、私は文字列を変更したいと思っています。興味深いのは、HTMLには、同じCSSクラスとCSSクラスを持つテキストボックスコンポーネントを持つspanとdivがあるということです。

どちらも、値を抽出して新しい値を戻す別の方法を持っています。 これは私の経験に基づいて、これは文字列を変更するウィジェットであるならば、気をつけなければならないすべてのオブジェクトは、均一な方法で文字列を「保持」し、オブジェクトの期待に基づいて、私のウィジェットは盲目的に動作するはずです。

「アヒルのように聞こえたら、アヒルのように歩くなら、それはアヒルです」ものの種類。

効果的には、私のウィジェットのテキストボックスまたはスパンである「要素」オブジェクトの区別について心配する必要はありません。代わりに汎用ラッパーにラップします。

しかし、人々は、javascriptウィジェットではウィジェット内のコンポーネント固有のものを世話することが通常のコンベンションであると私に忠告しました。私は確信していない、私はしっかりとインターフェースにプログラミングし、具体的ではないと信じている。だから私は葛藤している。

上記の例では、強調表示されているジレンマがこの問題を正当化するとは思っていませんが、より大きなスケールではこれは私の質問として頻繁にポップアップします。

HTML DOMのウィジェット内でそのコンポーネントの独立性をどう構築するかについて、皆さんからの意見を聞きたいですか?同じインターフェイスでjavascriptラッパーオブジェクトを作成し、それを別々にCSSで選択し、次のようにメソッド呼び出しを行うソリューションはありますか?

(function() { 
    var locateAllComponents = function() { 
     $(".generic-class").each(function(index, element) { 
      //wrap element into suitable wrapper that has common interface for getter 
      //setter. 
      GloballyDefinedNamespace.StringUtils.convert(wrappedElement); 
     }); 
    }; 

}()) 

洞察と回答は高く評価されます。

答えて

1

あなたはそれに馴染みのないjavascriptでコンセプトを強制しようとしています。

インターフェイスへのプログラミングはOOPのために機能しますが、他の言語のタイプの場合は悪い考えです。

jqueryが.text()(http://api.jquery.com/text/)と.val()(http://api.jquery.com/val/)をどのように使用しているのかを見ると、2つの異なる関数に抽象化したいものが表示されます。

ウィジェットは便利ですが、膨らみとパフォーマンスを犠牲にして、あなたがしていることを見て、あまりにも多くの価格を厳密に指定しないようにする必要があります。

フォーム要素を操作できるウィジェットを使用して小さくして、オブジェクト内でできることを確認してください。ただし、ある時点で、APIユーザーまたはAPI開発者はウィジェットに渡す機能を作成し、追加機能を取得します。

しかし、これらのすべてがパフォーマンスに影響を与えるため、作業している間に単なる単体テストを行い、パフォーマンスの変化を見て、価値のある変更がどのようなものかを判断するのに役立ちます。

ホイールを再発明するのではなく、JQuery UIウィジェットを見て、何をしたらいいか分かります。