web-dev-qa-db-ja.com

JavaScriptのデザインパターン

多くのWebフレームワークには、コードを作成し、問題に対処するためのMVCスタイルのレイアウトがあります。 JavaScriptによく似たパラダイムは何ですか？私はすでにフレームワーク（jQuery）と邪魔にならないjsを使用していますが、それでも、多くのJavaScriptを必要とするより複雑なWebアプリがある場合に遭遇する問題には対応していません。単一またはおそらくいくつかのファイルで機能します。これに取り組むより良い方法は何ですか？

design-patternsjavascript
32
GSto

Namespacing：オブジェクトをpseudo-packageとして使用することを忘れないでください（ほとんどのフレームワークがこれを行うので、あなたもすべきです）：

var YourCompany = {};

YourCompany.util = {};

YourCompany.util.myFunction = function() { /* ...  */ }

必ずしもそのように設定する必要はなく、任意の命名規則を使用する必要がありますが、名前空間は非常に役立ちます（何かを移動する場合は、検索と置換のリファクタリングも簡単になります）。 。

18
Nicole

jSが完全にオブジェクト指向であることを理解していない人もいます。クラスのように機能するものを作成できます。

function Car() {
    this.publicField = "bad";
    var privateField = "good";
    var self = this;

    this.publicMethod = function() {
        alert("I can access " + this.publicField + " and " + privateField);
    }

    function privateMethod() {
        alert("I can access " + self.publicField + " and " + privateField);
    }
}

これらのクラスをインスタンス化できます。

var car = new Car();

継承 をサポートします：

function Vehicle() { /* define class */ }

function Truck() { /* define class */ }
Truck.prototype = new Vehicle();

既存のクラスにメソッドを追加することもできます：

Array.prototype.remove = function() {
}

JavaScriptのOOサポートについて詳しく知りたい場合は、 Rhino本 を強くお勧めします。

12
Brad Cupit

このリンク は、中規模から大規模のJavascriptアプリケーションを構築するための正気な方法を説明します。特に、これには以下が含まれます。

  • モジュールパターンを使用してコードをモジュールに分割する
  • モジュールに依存関係を宣言させ、RequireJSなどのツールを介してそれらを非同期にロードさせる
  • 定義するグローバルオブジェクトの名前空間
  • DOM操作ライブラリーを抽象化する（これは十分に大きなプロジェクトでのみ意味があります）
  • MVCパターン（の一部のバリエーション）に従い、データの永続化とAJAX呼び出しの役割をモデル化し、イベントを管理する役割を制御し、DOMとスタイル操作の役割を表示する
  • メッセージをディスパッチするコアによって、独立したモジュールを介した通信を最小限に抑える
  • 例外がスローされるとすぐにモジュールを再起動するメカニズムの設計。結果として、再起動によって予期しない結果が生じないようにモジュールを設計する（一部のUI要素を2回描画するなど）
  • UIの再利用可能な部分をウィジェットに結合する
6
Andrea

名前空間を使用してから、名前空間を反映したファイル構造を使用することをお勧めします。たとえば、ブラッドの答えを使用して、私はTruck.js、Car.jsおよびVehicle.js。これにより、メンテナンス、整理、単体テストが簡単なコードベースが得られます。ただし、複数のJSファイルを連結して最小化し、本番環境で使用できるようなビルドプロセスが必要です。

プロトタイプオブジェクトの整理されたコードベースを使用すると、ほとんどの設計パターンを実装できる状態になります。 この主題に関する優れた本 もいくつかあります。 Nicholas Zackasによる presentation は、優れたJavascriptアプリを構築する方法を理解するのにも役立ちます。

また、JavaScriptでは、パターンと手法を区別することも重要だと思います。ネームスペースなど、JSには本来備わっていない一般的に使用されているさまざまな手法に精通している必要があります。しかし、これらはパターンではなくテクニックです。 Gang of Fourで定義されているようなパターンの作成を容易にするテクニック。

申し訳ありませんが、このような短い要約です。しかし、私はより深い洞察を得るために私が言及したリソースを強くお勧めします。

3
Phil Mander

JavaScriptのデザインパターンの実装に焦点を当てた最近追加された新しい記事と、JavaScriptを使用した Gang-of-Fourのデザインパターン の一部が追加されています。

  1. JavaScriptデザインパターン：責任の連鎖 （最終更新日：2012年2月20日）-この記事では明らかに責任の連鎖に焦点を当てていますが 、JavaScriptで実装されている他の多くのGoFパターンへのリンクがあります。
  2. 必須のJavaScriptおよびjQueryデザインパターン （最終更新日：2012年4月30日）
2
Sean Mickey

JQueryの使用は素晴らしい出発点です。ブラウザーのJavaScriptはフロントエンドを補強します。MVCの「パターン」やそれに続くものはありません。コードをクリーンに保つための「ベストプラクティス」がいくつかあります。

  • 別のもののための別の機能。 1つのバインディング、別のアクション。 thisおよびアクションのクラスを使用します。
  • JavaScriptは柔軟性が非常に高く、作成されたクロージャーを渡すことでバインディングを簡素化し、コードを軽量化できることに注意してください。
  • グローバルスコープからシールドし、必要なものだけを公開します。
  • JSLint を使用して、コードを標準に保ちます。

サーバー側/ブラウザー以外のJavaScript（Node.jsなど）には、ビルド用の 素晴らしいフレームワーク がいくつかあります。ソースを参照して、何かを拾っているかどうかを確認することは価値があります。

これを 興味がある人のためのより詳細なエントリ に移動しました。

0
Josh K