カテゴリー別アーカイブ: デザインパターン

jQueryとデザインパターン

デザインパターンとjQueryのメソッドの関係を備忘録として自分なりにまとめてみました. 記載しているメソッドはあくまで一例です.

 

Design Pattern Method Description
コンポジットパターン jQuery, $関数 単一の要素でも, 複数の要素でも同一インターフェースで処理できる
アダプタパターン cssメソッド opacityのIE対応
ファサード $.ajaxメソッド 内部では$.getや$.postを利用しているが, 外部には1つのインターフェースを提供する
オブザーバパターン on / off メソッド (Observer), triggerメソッド (Subject) イベントの監視と (Observer), イベントの発行 (Subject)
イテレータ $.eachメソッド 配列でもプレインオブジェクトでもコレクションであれば同一のインターフェースでイテレーションできる
プロキシパターン $.proxy 引数に渡された関数を代わりに実行する
ビルダーパターン jQuery, $関数 タグを表す文字列を引数に指定しても, DOMを引数に指定しても対応するjQueryオブジェクトが生成される
デコレータパターン $.extend メソッド 既存のオブジェクトに機能を追加する

デコレータパターン

デコレータパターンとは, 既存のオブジェクトに変更をすることなく, 新しい機能を追加することです.

代表的な実装例としては, Javaのストリームですね.

InputStream input    = new FileInputStream("input.txt");
OutputStream input = new FileOutputStream("output.txt");

これを, InputStreamReader / OutputStreamWriterでデコレートすることで, バイトストリームを文字ストリームに変換するという機能が追加できます.

Reader input  = new InputStreamReader(new FileInputStream("input.txt"));
Writer output = new OutputStreamWriter(new FileOutputStream("output.txt"));

さらに, さらに, BufferedReader / BufferedWriterでデコレートすることで, バッファリングという機能が追加できます.

Reader input  = new BufferedReader(new InputStreamReader(new FileInputStream("input.txt")));
Writer output = new BufferedWriter(new OutputStreamWriter(new FileOutputStream("output.txt")));

JavaScriptの場合, プロトタイプ継承 (インスタンスの継承) という動的な継承関係をもてることから, デコレータパターンとは非常に相性が良いです.

さらに, 言えばjQueryではデコレータを実現するためのメソッドがあります.

//再帰的にデコレートするために, 第1引数にはtrueを指定する.
//デコレートした新規オブジェクトを返すために, 第2引数には空のオブジェクトを指定する.
var settings = $.extend(true, {}, defaults, options);

jQueryプラグインの実装では, イディオムのようなコードですね.

jQueryでオブザーバーパターンの実装

JavaScriptは, クライアントサイドでもサーバーサイドでもイベントドリブンプログラミングがコアとなるので, 必然的にオブザーバーパターンなどGUIアプリに相性の良いデザインパターンを適用できる場面が多いと思います.

jQueryでは, そのオブザーバーパターンを簡単に実装できるメソッドが用意されています.

カスタムイベントのイベントリスナを設定可能なonメソッド (古いバージョンだとbind) とカスタムイベントを発生させるtriggerメソッドです.

jQueryによるオブザーバーパターンの雛形は以下のような感じになるでしょうか (かなり, はっしょって書いてます…).

//SubjectはObserverのリストを保持する

//Subjectごとの処理 ....

//更新をオブザーバーに通知する必要が発生
$('.observers').trigger('update');

//Observer
$('.observers').on('update', function(event) {
     //ビューの更新など
});

Java バイトストリームから文字ストリームへの変換

Androidアプリの作成では, ファイル (ストリーム) 処理をあつかう機会がなかったので, ちょっとしたサンプルコードを作成してみました.

変換のためには, InputStreamReader / OutputStreamWriterを利用します. これらは, 文字ストリームの抽象基底クラスであるReader / Writerを継承しています.

Javaのストリームを学ぶことはデコレータパターンの好例を学ぶことでもあります.

シングルトンパターン

Javaだとこんな感じ…

//1. 拡張継承により, 複数のインスタンスが生成されてしまうのを防ぐ
final class Singleton {
    //2. クラス定義時にインスタンスを生成して, かつ, クラス(static) プロパティとして保持することで, マルチスレッドにおいてもインスタンスが1つしかないことを保証する
    private static Singleton instance = new Singleton();

    //3. 外部からコンストラクタを呼べないように, private
    private Singleton() {
    }

    //4. ただ1つのインスタンスを取得するクラス (static) メソッド (外部から直接インスタンスにはアクセスできないので)
    public static Singleton getInstance() {
        return Singleton.instance;
    }
}