、
Adapter、および
Decorator があります。
があります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
|
メソッドを使用すると、複数のインスタンスが存在しないようにできます。上の例では、データベース接続をラップする疑似クラスがこのパターンからどのように恩恵を受けるかがわかります。
この例は、<p>getInstance メソッドを何度呼び出しても、接続は常に同じであることを示しています。
上記の実行結果: <p>1 2 3 4 5 |
|
Single と同様の作成モードです。ケースモード
同じです。ただし、このパターンは対象のオブジェクトに直接作用するのではなく、オブジェクトの作成を管理するだけです。
説明: 移動する乗り物をシミュレートするコードを作成するとします。車、自転車、飛行機など、さまざまな種類の乗り物があります。モバイル コードは、各 vehicle<p> クラスにカプセル化する必要があります。ただし、呼び出し中の move
メソッドのコードは汎用的なものにすることができます。
ここでの質問は、オブジェクトの作成をどのように処理するかということです? 3 つのメソッドを持つ単一の creator<p> クラス、またはパラメーターを取るメソッドが存在する可能性があります。いずれの場合も、より多くの vehices
の作成をサポートするためにそのロジックを拡張するには、同じクラスを継続的に成長させる必要があります。
ただし、ファクトリ メソッド パターンを使用する場合は、次のことが可能です。 <p><p>新しいオブジェクトの作成に必要なコードは次のとおりです。新しいクラスにカプセル化されています。 クラスのうち、各クラスは車両タイプに対応します。これにより、将来車両を追加する必要がある場合、既存のクラスを変更することなく、新しいクラスを追加するだけで済みます。 <p>これを TypeScript<p> を使用してどのように実現できるかを見てみましょう: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">interface Vehicle {
move(): void
}
class Car implements Vehicle {
public move(): void {
console.log("Moving the car!")
}
}
class Bicycle implements Vehicle {
public move(): void {
console.log("Moving the bicycle!")
}
}
class Plane implements Vehicle {
public move(): void {
console.log("Flying the plane!")
}
}
// VehicleHandler 是“抽象的”,因为没有人会实例化它instantiate it
// 我们要扩展它并实现抽象方法
abstract class VehicleHandler {
// 这是真正的处理程序需要实现的方法
public abstract createVehicle(): Vehicle
public moveVehicle(): void {
const myVehicle = this.createVehicle()
myVehicle.move()
}
}
class PlaneHandler extends VehicleHandler{
public createVehicle(): Vehicle {
return new Plane()
}
}
class CarHandler extends VehicleHandler{
public createVehicle(): Vehicle {
return new Car()
}
}
class BicycleHandler extends VehicleHandler{
public createVehicle(): Vehicle {
return new Bicycle()
}
}
/// User code...
const planes = new PlaneHandler()
const cars = new CarHandler()
planes.moveVehicle()
cars.moveVehicle()</pre><div class="contentsignin">ログイン後にコピー</div></div>
上記は大量のコードですが、上の図を使用して理解できます。基本的に最終的に重要なのはカスタム ハンドラーです。ここでは作成者ではなくハンドラーと呼びます。これは、オブジェクトを作成するだけでなく、オブジェクトを使用するロジック (moveVehicle メソッド) も備えているためです。 <p>このパターンの利点は、新しい vehicle<p> タイプを追加する場合、その vehicle
クラスとそのハンドラー プログラム クラスを追加するだけで済むことです。他のクラスの LOC を増加させることなく。
Observer Pattern
どのように機能するのでしょうか? 基本的に、このパターンは、観察されるエンティティの状態の変化に反応する一連のオブザーバー オブジェクトがあることを示します。これを達成するために、観察される側で変更が受信されると、そのメソッドの 1 つを呼び出して観察者に通知する責任があります。 <p>実際には、このパターンの実装は比較的簡単です。コードをざっと見てから確認してみましょう。1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
|
エンティティの変更に反応するオブジェクトを表します。上記の例では、クリックされた
InputElement エンティティ (フロントエンドに HTML 入力フィールドがある場合と同様) と、コンソールにログを記録する
ConsoleLogger があると想定しています。起こったことすべて。
このパターンの利点は、内部コードをいじらずに
Observable の内部状態を理解し、それに反応できることです。他のアクションを実行するオブザーバー (特定のイベントに反応するオブザーバーも含む) を引き続き追加し、各通知に対して何を行うかをコードに決定させることができます。 <p>move
方法的Dog
类,现在您想扩展其行为,因为我们想要一只超级狗和一只可以游泳的狗。<p>通常,我们需要在 Dog 类中添加move
行为,然后以两种方式扩展该类,即SuperDog
和SwimmingDog
类。 但是,如果我们想将两者混合在一起,则必须再次创建一个新类来扩展它们的行为,但是,有更好的方法。<p>组合让我们可以将自定义行为封装在不同的类中,然后使用该模式通过将原始对象传递给它们的构造函数来创建这些类的新实例。 让我们看一下代码:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
|
SuperDecorator
类扩展了Animal
类,与Dog
类扩展了相同的类。 这是因为装饰器需要提供与其尝试装饰的类相同的公共接口。SuperDecorator
类是abstract
,这意味着并没有使用它,只是使用它来定义构造函数,该构造函数会将原始对象的副本保留在受保护的属性中。 公共接口的覆盖是在自定义装饰器内部完成的。SuperAnimal
和SwimmingAnimal
是实际的装饰器,它们是添加额外行为的装饰器。Animal
类,因此如果你要将两种行为混合在一起,则可以执行以下操作:1 2 3 |
|
<p>
等标签定义一些格式,然后格式之间互相组合,通过一种递归的方式组织成相应的结构,这种方式其实就是组合,将部分的组件镶嵌到整体之中。<p>关于此模式的有趣之处在于,它不是一个简单的对象组,它可以包含实体或实体组,每个组可以同时包含更多组,这就是我们所说的树。<p>看一个例子:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
|
product
放入Box
中,也可以将Box
放入其他Box
中,这是组合的经典示例。因为我们要实现的是获得完整的交付价格,因此需要在大box
里添加每个元素的价格(包括每个小box
的价格)。<p>上面运行的结果:1 2 3 4 5 6 |
|
<p>英文原文地址:https://blog.bitsrc.io/design-patterns-in-typescript-e9f84de40449 <p>作者:Fernando Doglio <p>译者:前端小智<p>更多编程相关知识,请访问:编程视频!!
以上がTypeScript の 5 つのデザイン パターンの詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。