web-dev-qa-db-ja.com

再利用可能なJavascriptを作成するにはどうすればよいですか？

関数をオブジェクト内にラップし始めました。例：

var Search = {
  carSearch: function(color) {
  },
  peopleSearch: function(name) {
  },
  ...
}

これは可読性に大いに役立ちますが、再利用性には引き続き問題があります。 ）。具体的には、難しさは2つの領域にあります。

  1. パラメータの受信。多くの場合、複数の入力フィールドとjavascript検索関数を呼び出すボタンを備えた検索画面が表示されます。ボタンのonclickに大量のコードを入力して取得し、入力フィールドから関数呼び出しに値をマーシャルするか、HTML入力フィールドの名前/ IDをハードコーディングして、後で取得できるようにする必要があります。 Javascriptを使用します。これについて私が決めた解決策は、フィールド名/ IDを関数に渡すことです。関数は、これを使用して入力フィールドから値を取得します。これは単純ですが、実際には不適切に見えます。

  2. 戻り値。ほとんどのJavascript呼び出しの効果は、画面上の一部のビジュアルが直接変化するか、呼び出しで実行された別のアクションの結果として生じる傾向があります。これらの画面変更効果を関数の最後に置くと、再利用性は乾杯します。たとえば、検索が完了したら、結果を画面に表示する必要があります。

他の人はこれらの問題をどのように処理しますか？思考の上限を設定すると、アプリケーションでの各使用と、アプリケーション全体で使用される一般的なメソッドの間に、ページ固有のJavascriptレイヤーが必要であると考えるようになります。前の例を使用すると、onclickがmyPageSpecificSearchFunctionを呼び出す検索ボタンがあります。この場合、検索フィールドID /名前がハードコードされ、パラメーターがマーシャリングされ、汎用検索関数が呼び出されます。汎用関数はデータ/オブジェクト/変数のみを返し、DOMから直接読み取ったり、DOMに変更を加えたりすることはありません。次に、ページ固有の検索機能がこのデータを受け取り、DOMを適切に変更します。

私は正しい道を進んでいますか、それともJavascriptオブジェクト/メソッドの再利用を処理するためのより良いパターンがありますか？

javascriptcode-reuse
22
aw crud

基本パターン

基本パターンに関して、モジュールパターンと名前付き関数を使用するように構造を変更することをお勧めします。

var Search = (function(){
    var pubs = {};

    pubs.carSearch = carSearch;
    function carSearch(color) {
    }

    pubs.peopleSearch = peopleSearch;
    function peopleSearch(name) {
    }

    return pubs;
})();

はい、それはもっと複雑に見えますが、それは部分的にはヘルパー関数が関与していないためです。現在、すべての関数に名前が付いていることに注意してください（以前の関数は匿名でした。バインドされたプロパティには名前がありましたが、関数には名前がありませんでした。これは、デバッガーなどでの呼び出しスタックの表示に影響します）。モジュールパターンを使用すると、Searchオブジェクト内の関数のみがアクセスできる完全にプライベートな関数を使用することもできます。 （大きな無名関数内で関数を宣言し、それらをpubsに追加しないでください。）その理由の詳細（長所と短所、および関数宣言とプロパティ割り当てを組み合わせることができない理由） ） ここ 。

パラメータの取得

Prototype から私が本当に好きな関数の1つは、 Form#serialize 関数。フォーム要素をウォークスルーし、フィールドの名前に基づいて各フィールドのプロパティを持つプレーンオブジェクトを作成します。 （プロトタイプの現在の– 1.6.1 –実装には、フィールドのorderが保持されないという問題がありますが、それが問題になることはめったにありません。 。）そのようなものはあなたに十分なサービスを提供しているように思えますが、それらを構築するのは難しくありません。その場合、ビジネスロジックは、関連するものに応じて名前が付けられたプロパティを持つオブジェクトを処理しており、実際のフォーム自体についての知識はありません。

戻り値/ UIとロジックの混合

私はアプリケーションをオブジェクトとそれらの間の接続と相互作用として考える傾向があります。だから私は作成する傾向があります：

  • インターフェイスに関係なく、ビジネスモデルなどを表すオブジェクト（もちろん、ビジネスモデルはほぼ確実にインターフェイスによって駆動されます）。これらのオブジェクトは1つの場所で定義されますが、クライアント側とサーバー側の両方で使用され（はい、JavaScriptサーバー側を使用します）、シリアル化（私の場合はJSON経由）を念頭に置いて設計されているため、オブジェクトをやり取りできます簡単に。
  • 基になるストアを更新するためにそれらを使用する方法を知っているサーバー側のオブジェクト（私は基になるストアでプロジェクトに取り組む傾向があるため）、および
  • その情報を使用してUIにレンダリングする方法を知っているクライアント側のオブジェクト。

（私は知っています、ほとんどオリジナルではありません！）ストアとレンダリングオブジェクトを汎用的に保つようにしています。そのため、ほとんどの場合、ビジネスオブジェクトのパブリックプロパティ（ほとんどすべてのプロパティです。次のようなパターンは使用しません）を確認することで機能します。あなたが本当にデータを隠すことを可能にするCrockfordのもの、私はそれらが高すぎると思います）。プラグマティズムとは、ストアまたはレンダリングオブジェクトが、具体的には何を処理しているのかを知る必要がある場合があることを意味しますが、私はできる限り一般的なものを維持しようとしています。

25
T.J. Crowder

Javascriptは途方もなく柔軟性があります。つまり、さまざまな方法で物事を行うことができるため、デザインは特に重要です。これが、おそらくJavascriptが再利用性に向いていると感じさせない理由です。

オブジェクト（関数/クラス）を宣言してから名前空間を作成するためのいくつかの異なる表記法があります。これらの違いを理解することが重要です。ここでのコメントで述べたように、「名前空間は簡単です」-そして始めるのに良い場所です。

私はこの返信で十分に行くことができず、言い換えるだけなので、これらの本を購入することをお勧めします。

プロJavaScriptデザインパターン

プロのJavascriptテクニック

1
Lewis

私は モジュールパターン を使い始めましたが、その後 jQueryプラグイン ですべてを始めました。プラグインを使用すると、ページ固有のオプションを渡すことができます。

JQueryを使用すると、検索用語を識別してその値を見つける方法を再考することもできます。すべての入力にクラスを追加することを検討し、そのクラスを使用して、各入力に特定の名前を付けないようにすることができます。

1
Mark