メインコンテンツへ移動

ファサードパターン_JavaScript デザインパターン8

無料2015-07-26#JS#Design_Pattern#JavaScript外观模式

ファサードパターンは、前に紹介したコマンドパターンと非常によく似ています。本稿では JavaScript で実装されたファサードパターンについて詳細に紹介します

一.ファサードパターン

下位層コンポーネントインターフェースを二次カプセル化(三手、四手のものも二手とみなす)し、より使いやすい高層インターフェースを提供するのが、ファサードパターンの核心思想です。

ファサード(外観)と言えば、很容易に化粧を連想しますが、ここでは見た目を良くするためではなく、単に使いやすさを追求するものです。

二.具体的な実装

var mod1 = {
    fun1: function() {
        // ...
    },
    fun2: function() {
        // ...
    }
    // ...
}
var mod2 = {
    fun1: function() {
        // ...
    },
    fun2: function() {
        // ...
    }
    // ...
}
// ...

// facade
var facade = {
    c: true,

    newFun1: function() {
        mod1.fun2();
        if (this.c) {
            mod1.fun1();
        }
        // ...
    },
    newFun2: function() {
        mod2.fun1();
        mod2.fun2();
        mod1.fun1();
        if (this.c) {
            mod1.fun2();
        }
        // ...
    }
    // ...
}

// invoke facade
facade.newFun1();
// invoke mods
// mod1.fun2();
// if (c) {
//     mod1.fun1();
// }
// ...

低層モジュールのインターフェースをさらに抽象化し、シンプルで使いやすいファサードをカプセル化します。カプセル化には終わりがなく、モジュール内部からモジュール間、サブシステム間、そしてシステム自体まで、続けたいと思えば n 層のカプセル化を追加できます。甚至ファサードパターンを使用してメソッド名が長すぎる問題を解決することもできます。例えば:

var d = {
    byId: function(strId) {
        return document.getElementById(strId);
    },
    byClass: function(strClass) {
        return document.getElementsByClassName(strClass);
    },
    byTag: function(strTag) {
        return document.getElementsByName(strTag);
    }
    // ...
}

// test
d.byId('test').innerHTML = 'test facade';

三.ファサードパターンの長所と短所

長所

書籍に比較的的確な言葉があります:

実装詳細に注目する必要がなく、しかも使いやすい

短所

多層カプセル化は長い呼び出しチェーンを意味し、パフォーマンスコストが存在します。パフォーマンス要求が非常に高い場合、当然カプセル化層数は少ないほど良く、底層に近づくほど実行効率は高くなります。ファサードパターンを使用する際は、二次カプセル化の価値があるかどうか(パフォーマンスコストが許容できるかどうか)を考慮する必要があるかもしれません

JQuery の$がネイティブ JS 実装よりどれだけ遅いかについて、答えは:実際にはあなたが想像するほど遅くありません

ファサードパターンに関する詳細情報については、黯羽轻扬:デザインパターン之ファサードパターン(Facade Pattern) を参照してください

参考資料

  • 『JavaScript デザインパターン』

コメント

コメントはまだありません

コメントを書く