JavaScriptデザインパターンのデコレータパターン入門_JavaScriptスキル

デコレータ パターンの説明

説明: あるクラスを使用して、前後に別のクラスの関数オブジェクトを動的に変更し、それにいくつかの追加関数を追加します。これはクラス オブジェクトの関数の装飾であり、装飾されたクラスは装飾されたクラスに関連しています。 class クラスは同じアクセス インターフェイス メソッド (関数) を持つ必要があります。動的オブジェクト指向クラスでは、実装は通常、同じインターフェイスを実装することによって制約され、対応するクラスで使用される装飾クラスへの参照が必要になります。装飾されたクラスのメソッドは、対応する装飾されたクラスのメソッドを呼び出し、それを変更します。

シナリオの例:

1> たとえば、私たちが人生で着る服は、シャツ、スーツのジャケット、ズボン、ネクタイ、そして美しい革の靴です。または体全体;

2> たとえば、ログの書き込みやユーザーのログインに使用される関数メソッドがあり、ログを書き込む前またはログインに成功した後に、現在のオペレーター情報を取得する必要があるかもしれません。 write ログを入力します。ログを書き込む前の追加操作は、通常、ログイン成功後のログの書き込みです。

したがって、デコレーター パターンは、2 つが同様の操作を持つシナリオを実装するために使用されます。これは、デコレーターを装飾された関数オブジェクトに拡張したものであり、本質は元のメソッドの同じ機能範囲です。

ソースコードの例

1. デコレータクラス

コードをコピー コードは次のとおりです:

function Wear() {

}

Wear.prototype. Shirt = function() { //シャツを着ています

console.log('シャツを着る');
}

2. デコレータクラス

コードをコピーします コードは次のとおりです:

関数 デコレータ(着用) {

This.wear = 着る;
}

Decorator.prototype. Shirt = function() { This.wear. Shirt();

//シャツを着た後、ネクタイを付けました
}

3.

の使用方法

コードをコピーします コードは次のとおりです:

var Wear = new Wear();

vardecorator = 新しい Decorator(wear);
デコレータ.シャツ();

このようにして、Wear シャツ機能オブジェクトの動的拡張装飾が実現されます。元の装飾メソッドがどのように実行されるかを知る必要はありません。その機能を理解するだけで済みます。追加機能が何であれ、

その他の指示

デコレータ パターンは、まさにオブジェクト指向のアプローチを体現しています。つまり、拡張に対してオープンであり、変更に対してクローズであるという原則です。必要な関数メソッドはすべて、[デコレータ クラス Wear] を変更したり、[デコレータ クラス] Decorator を拡張したりすることなく実装されます。 ;

デコレーター パターンの主な特徴の 1 つは、デコレーターが装飾されたオブジェクトを参照して、装飾されたオブジェクトの未変更の装飾を実現することです。

シミュレーション: 最初にシャツを着、次にネクタイ、次にスーツを着ます: 上の装飾された人物は変わりません:

2. デコレータクラス:

コードをコピーします コードは次のとおりです:

関数 デコレータ(着用) {

This.wear = 着る;
}
Decorator.prototype. Shirt = function() {
This.wear. Shirt() // ここではシャツのみを着用します;
}

3. Decorator サブクラス

を継承するネクタイ クラスとスーツ クラスを作成します。

コードをコピー コードは次のとおりです:

function Decorator_Tie(デコレータ) {
This.decorator = デコレータ;
}
Decorator_Tie.prototype. Shirt = function() {
This.decorator. Shirt() // シャツを着ます
console.log('ネクタイを締め直してください');
}

関数 Decorator_Western (デコレータ) {
This.decorator = デコレータ;
}
Decorator_Western.prototype. Shirt = function() {
This.decorator. Shirt();
console.log('もう一度スーツを着てください');
}

使用法:

コードをコピー コードは次のとおりです:

//まずシャツを着てください
var Wear = new Wear();
vardecorator = 新しい Decorator(wear);
//decorator. Shirt();
//ネクタイをもう一度締めてください
vartie = new Decorator_Tie(decorator);
//tie. Shirt();
//またスーツを着てください
var Western = new Decorator_Western(tie);
ウエスタン.シャツ();

これは衣服と装飾のシミュレーション例です。