js デザイン パターン: テンプレート メソッド パターンとは何ですか? jsテンプレートメソッドパターンの紹介

この記事では、JS デザイン パターンに関するコンテンツをお届けします: テンプレート メソッド パターンとは何ですか? js テンプレート メソッド パターンの紹介は、必要な友人に参考にしていただけると幸いです。

テンプレートメソッドパターンとは何ですか?

定義: 一部のステップをサブクラスに延期しながら、操作内のアルゴリズムのスケルトンを定義します。テンプレート メソッドを使用すると、アルゴリズムの構造を変更せずに、サブクラスでアルゴリズムの特定のステップを再定義できます。

主な解決策: 一部のメソッドは共通ですが、このメソッドはすべてのサブクラスで書き換えられます。

いつ使用するか: いくつかの一般的な方法があります。

解決方法: これらの一般的なアルゴリズムを抽象化します。

jsテンプレートメソッドパターン適用例: 1. 家を建てるとき、基礎、配線、水道管は同じですが、クローゼットやフェンスの追加などの違いがあるのは建設の後期のみです。 2. 『西遊記』で菩薩が設定した 81 の難は、最上位の論理枠組みです。

jsテンプレートメソッドパターンの利点: 1. 定数部分をカプセル化し、可変部分を展開します。 2. メンテナンスを容易にするためにパブリック コードを抽出します。 3. 動作は親クラスによって制御され、サブクラスによって実装されます。

js テンプレート メソッド パターンのデメリット: 異なる実装ごとにサブクラスを実装する必要があるため、クラスの数が増加し、システムが大きくなります。

js テンプレート メソッド パターンの使用シナリオ: 1. 複数のサブクラスに共通のメソッドがあり、ロジックは同じです。 2. 重要で複雑なメソッドは、テンプレート メソッドとして考慮できます。

お茶とコーヒーを作る

お茶とコーヒーを作るプロセスの類似点と相違点を比較してみましょう

手順	お茶を作る	コーヒーを作る
1	水を沸騰させる
2	濃いお茶	コーヒーを淹れる
3	カップに注ぐ	カップに注ぐ
4	レモンを加える	砂糖を加える

ステップ 2 と 4 にはわずかな違いしかないことがはっきりとわかります。実装を始めましょう:

const Drinks = function() {}
Drinks.prototype.firstStep = function() {
  console.log('烧开水')
}
Drinks.prototype.secondStep = function() {}
Drinks.prototype.thirdStep = function() {
  console.log('倒入杯子')
}
Drinks.prototype.fourthStep = function() {}
Drinks.prototype.init = function() { // 模板方法模式核心：在父类上定义好执行算法
  this.firstStep()
  this.secondStep()
  this.thirdStep()
  this.fourthStep()
}
const Tea = function() {}
Tea.prototype = new Drinks
Tea.prototype.secondStep = function() {
  console.log('浸泡茶叶')
}
Tea.prototype.fourthStep = function() {
  console.log('加柠檬')
}
const Coffee = function() {}
Coffee.prototype = new Drinks
Coffee.prototype.secondStep = function() {
  console.log('冲泡咖啡')
}
Coffee.prototype.fourthStep = function() {
  console.log('加糖')
}
const tea = new Tea()
tea.init()
// 烧开水
// 浸泡茶叶
// 倒入杯子
// 加柠檬
const coffee = new Coffee()
coffee.init()
// 烧开水
// 冲泡咖啡
// 倒入杯子
// 加糖

フック

ゲストが調味料 (砂糖、レモン) を追加したくない場合はどうすればよいですか? )? このとき、実装にはヒューマンフックが使用され、実装ロジックは次のとおりです:

// ...

Drinks.prototype.ifNeedFlavour = function() { // 加上钩子
  return true
}

Drinks.prototype.init = function() { // 模板方法模式核心：在父类上定义好执行算法
  this.firstStep()
  this.secondStep()
  this.thirdStep()
  if (this.ifNeedFlavour()) { // 默认是 true，也就是要加调料
    this.fourthStep()
  }
}

// ...
const Coffee = function() {}

Coffee.prototype = new Drinks()
// ...

Coffee.prototype.ifNeedFlavour = function() {
  return window.confirm('是否需要佐料吗？') // 弹框选择是否佐料
}

関連推奨事項:

js デザインパターン: 組み合わせパターンとは何ですか? js合成パターン入門

jsデザインパターン：オブザーバーパターン（パブリッシュ・サブスクライブパターン）とは？ JSオブザーバーパターンの紹介

以上がjs デザイン パターン: テンプレート メソッド パターンとは何ですか? jsテンプレートメソッドパターンの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。