web-dev-qa-db-ja.com

実用的なJavaScriptオブジェクト指向のデザインパターンの例

アプリケーションのjavascriptで使用するオブジェクト指向のデザインパターンとその理由は何ですか？

正式なデザインパターンが添付されていない場合でも、コードを投稿してください。

私はたくさんのjavascriptを書きましたが、私は自分がしていることに多くのオブジェクト指向のパターンを適用していません。

javascriptjquerydesign-patternsoop
81
ming yeow

以下は3つの一般的なJavaScriptパターンです。これらは closures により簡単に実装できます：

また、チェックアウトすることもできます。

以下は、Diazが提示した2008年のGoogle I/O講演で、彼は本からいくつかのトピックについて議論しています。

53
Daniel Vassallo

継承

継承の表記法 を使用します。これは ExtJS に基づいており、Javaで古典的な継承をエミュレートするのにかなり近い作品です。基本的には次のように実行されます。

// Create an 'Animal' class by extending
// the 'Object' class with our magic method
var Animal = Object.extend(Object, {
    move : function() {alert('moving...');}
});

// Create a 'Dog' class that extends 'Animal'
var Dog = Object.extend(Animal, {
    bark : function() {alert('woof');}
});

// Instantiate Lassie
var lassie = new Dog();

// She can move and bark!
lassie.move();
lassie.bark();

名前空間

また、名前空間にこだわり、上記のコードはウィンドウオブジェクトの外側の独自のコンテキスト内で実行する必要があることについて、Eric Miragliaに同意します。これは、ブラウザーウィンドウで実行される多くの同時フレームワーク/ライブラリの1つとしてコードを実行する場合に重要です。

つまり、ウィンドウオブジェクトへの唯一の方法は、独自の名前空間/モジュールオブジェクトを経由することです。

// Create a namespace / module for your project
window.MyModule = {};

// Commence scope to prevent littering 
// the window object with unwanted variables
(function() {

    var Animal = window.MyModule.Animal = Object.extend(Object, {
         move: function() {alert('moving...');}
    });

    // .. more code

})();

インターフェース

また、アプリケーションの設計を強化するためのインターフェイスなどの高度なOOP構成体を使用することもできます。 これらに対する私のアプローチ は、Function.prototypeこれらの行に沿って表記を取得するには：

var Dog = Object.extend(Animal, {
     bark: function() {
         alert('woof');
     }
     // more methods ..
}).implement(Mammal, Carnivore);

OOパターン

Javaの意味での「パターン」に関しては、 シングルトンパターン （キャッシングに最適）および オブザーバーパターン ユーザーがボタンをクリックしたときにいくつかのアクションを割り当てるなどのイベント駆動型機能用。

オブザーバーパターンの利用例は次のとおりです。

// Instantiate object
var lassie = new Animal('Lassie');

// Register listener
lassie.on('eat', function(food) {
   this.food += food;
});

// Feed lassie by triggering listener
$('#feeding-button').click(function() {
    var food = Prompt('How many food units should we give lassie?');
    lassie.trigger('eat', [food]);
    alert('Lassie has already eaten ' + lassie.food + ' units');
});

そして、それはOO JSの私のバッグにあるいくつかのトリックです。

Douglas Crockfords Javascript：the Good Parts を読んで、この道を行くつもりならお勧めします。このようなもののための素晴らしい本。

25
Steven de Salas

私はモジュールパターンのファンです。これは、拡張可能で、独立した（ほとんどの場合）フレームワークを実装する方法です。

例：

フレームワークQは、次のように定義されます。

var Q = {};

関数を追加するには：

Q.test = function(){};

これらの2行のコードを一緒に使用してmodulesを形成します。モジュールの背後にある考え方は、これらはすべて何らかの基本フレームワーク、この場合はQを拡張しますが、相互に依存せず（正しく設計されている場合）、任意の順序で含めることができるということです。

モジュールでは、フレームワークオブジェクトが存在しない場合は最初に作成します（これはSingletonパターンの例です）。

if (!Q)
    var Q = {};

Q.myFunction = function(){};

そうすれば、複数のモジュール（上記のものなど）を別々のファイルに入れて、それらを任意の順序で含めることができます。それらのいずれかがフレームワークオブジェクトを作成し、それを拡張します。フレームワークが存在するかどうかを手動で確認する必要はありません。次に、カスタムコードにモジュール/関数が存在するかどうかを確認します。

if (Q.myFunction)
    Q.myFunction();
else
    // Use a different approach/method
20
Chris Laplante

シングルトンパターンは、「カプセル化」や組織化に非常に役立ちます。アクセシビリティを変更することもできます。

var myInstance = {
  method1: function () {
    // ...
  },
  method2: function () {
    // ...
  }
};

javascriptでシングルトンを実装する最もクリーンな方法

6
Gordon Gustafson

Jqueryの method chaining pattern が本当に好きで、1つのオブジェクトで複数のメソッドを呼び出すことができます。 1行のコードで複数の操作を簡単に実行できます。

例：

$('#nav').click(function() {
   $(this).css('color','#f00').fadeOut();
});
4
GSto

JQueryプラグインで Decorator pattern が本当に好きです。ニーズに合わせてプラグインを変更するのではなく、要求を転送して追加のパラメーターと機能を追加するだけのカスタムプラグインを作成します。

たとえば、常に一連のデフォルト引数を渡す必要があり、ビジネスロジックに結び付くわずかに異なる動作が必要な場合は、preおよびpostを実行するプラグインを記述します。ニーズに合わせて作業が必要であり、特定の引数が指定されていない場合はデフォルトの引数を渡します。

これの主な利点は、ライブラリを更新でき、ライブラリの変更を移植することを心配しないことです。コードは破損する可能性がありますが、少なくとも破損しない可能性があります。

3
Stefan Kendall

Javascriptの世界で有用なパターンの1つは、LINQによって最初に普及し、jQueryでも使用されているチェーンパターンです。

このパターンにより、クラスのさまざまなメソッドをチェーン方式で呼び出すことができます。

このパターンの主な構造は次のようになります

var Calaculator = function (init) {
    var result = 0;
    this.add = function (x) { result += (init + x); return this; };
    this.sub = function (x) { result += (init - x); return this; };
    this.mul = function (x) { result += (init * x); return this; };
    this.div = function (x) { result += (init / x); return this; };

    this.equals = function (callback) {
        callback(result);
    }

    return this;
};


new Calaculator(0)
    .add(10)
    .mul(2)
    .sub(5)
    .div(3)
    .equals(function (result) {
        console.log(result);
    });

このパターンの重要な考え方はthis key Wordです。これにより、Calculator機能の他のパブリックメンバーへのアクセスが可能になります。

3
Matrix Buster