ホームページ ウェブフロントエンド jsチュートリアル JavaScript デザイン パターン テンプレート メソッド pattern_javascript スキルを学ぶ

JavaScript デザイン パターン テンプレート メソッド pattern_javascript スキルを学ぶ

May 16, 2016 pm 03:19 PM
javascript テンプレートメソッドパターン デザインパターン

1. 定義

テンプレート メソッドは継承設計パターンに基づいており、システムのスケーラビリティを大幅に向上させることができます。 Java の抽象親クラスとサブクラス
テンプレート メソッドは構造の 2 つの部分で構成されます。最初の部分は抽象親クラスで、2 番目の部分は具象実装サブクラスです。

2. 例

コーヒーまたは紅茶
(1) 水を沸騰させる
(2) 茶葉を熱湯に浸す
(3) 紅茶をカップに注ぎます
(4)レモンを加える

/* 抽象父类:饮料 */
var Beverage = function(){};
// (1) 把水煮沸
Beverage.prototype.boilWater = function() {
  console.log("把水煮沸");
};
// (2) 沸水浸泡
Beverage.prototype.brew = function() {
  throw new Error("子类必须重写brew方法");
};
// (3) 倒进杯子
Beverage.prototype.pourInCup = function() {
  throw new Error("子类必须重写pourInCup方法");
};
// (4) 加调料
Beverage.prototype.addCondiments = function() {
  throw new Error("子类必须重写addCondiments方法");
};

/* 模板方法 */
Beverage.prototype.init = function() {
  this.boilWater();
  this.brew();
  this.pourInCup();
  this.addCondiments();
}

/* 实现子类 Coffee*/
var Coffee = function(){};
Coffee.prototype = new Beverage();
// 重写非公有方法
Coffee.prototype.brew = function() {
  console.log("用沸水冲泡咖啡");
};
Coffee.prototype.pourInCup = function() {
  console.log("把咖啡倒进杯子");
};
Coffee.prototype.addCondiments = function() {
  console.log("加牛奶");
};
var coffee = new Coffee();
coffee.init();

ログイン後にコピー

テンプレート メソッド パターンを使用して、サブクラスのアルゴリズム フレームワークが親クラスにカプセル化されます。これらのアルゴリズム フレームワークは、通常の状況ではほとんどのサブカテゴリに適していますが、「性格」サブカテゴリも表示されます。
上記のプロセスと同様に、調味料の追加はオプションです。
フック メソッドは、この問題を解決できます。フックを配置することは、変更を分離する一般的な手段です。

/* 添加钩子方法 */
Beverage.prototype.customerWantsCondiments = function() {
  return true;
};
Beverage.prototype.init = function() {
  this.boilWater();
  this.brew();
  this.pourInCup();
  if(this.customerWantsCondiments()) {
    this.addCondiments();
  }
}

/* 实现子类 Tea*/
var Tea = function(){};
Tea.prototype = new Beverage();
// 重写非公有方法
Tea.prototype.brew = function() {
  console.log("用沸水冲泡茶");
};
Tea.prototype.pourInCup = function() {
  console.log("把茶倒进杯子");
};
Tea.prototype.addCondiments = function() {
  console.log("加牛奶");
};
Tea.prototype.customerWantsCondiments = function() {
  return window.confirm("需要添加调料吗?");
};
var tea = new Tea();
tea.init();

ログイン後にコピー

JavaScript は、オブジェクト間の委任によって真のクラス継承を実現しません。

3. 「ハリウッドの原則」: 電話をかけないでください。私たちが電話します

一般的な使用シナリオ:

(1) テンプレート メソッド パターン: このデザイン パターンを使用すると、サブクラスは自身の制御を放棄し、代わりにサブクラスを親クラスに通知します。サブクラスとして、これは一部の設計の詳細を提供することのみを担当します。
(2) オブザーバー モード: パブリッシャーはメッセージをサブスクライバーにプッシュします。
(3) コールバック関数: ajax 非同期リクエストは、コールバック関数で実行する必要がある操作をカプセル化します。このコールバック関数は、データが返されたときにのみ実行されます。

この記事が、JavaScript プログラミングを学習する皆さんのお役に立てれば幸いです。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Java フレームワークのテンプレート メソッド パターンの利点は何ですか? Java フレームワークのテンプレート メソッド パターンの利点は何ですか? Jun 05, 2024 pm 08:45 PM

Java フレームワークのテンプレート メソッド パターンの利点は何ですか?

Java フレームワークにおけるデザイン パターンとアーキテクチャ パターンの違い Java フレームワークにおけるデザイン パターンとアーキテクチャ パターンの違い Jun 02, 2024 pm 12:59 PM

Java フレームワークにおけるデザイン パターンとアーキテクチャ パターンの違い

Java 設計パターンにおけるアダプター パターンの素晴らしい使用法 Java 設計パターンにおけるアダプター パターンの素晴らしい使用法 May 09, 2024 pm 12:54 PM

Java 設計パターンにおけるアダプター パターンの素晴らしい使用法

Java デザイン パターンにおけるデコレータ パターンの分析 Java デザイン パターンにおけるデコレータ パターンの分析 May 09, 2024 pm 03:12 PM

Java デザイン パターンにおけるデコレータ パターンの分析

PHP設計パターンの実践事例分析 PHP設計パターンの実践事例分析 May 08, 2024 am 08:09 AM

PHP設計パターンの実践事例分析

Java フレームワークでデザイン パターンを使用する利点と欠点は何ですか? Java フレームワークでデザイン パターンを使用する利点と欠点は何ですか? Jun 01, 2024 pm 02:13 PM

Java フレームワークでデザイン パターンを使用する利点と欠点は何ですか?

デザインパターンがコードメンテナンスの課題にどのように対処するか デザインパターンがコードメンテナンスの課題にどのように対処するか May 09, 2024 pm 12:45 PM

デザインパターンがコードメンテナンスの課題にどのように対処するか

Guice フレームワークでのデザイン パターンの適用 Guice フレームワークでのデザイン パターンの適用 Jun 02, 2024 pm 10:49 PM

Guice フレームワークでのデザイン パターンの適用

See all articles