JavaScript 디자인 패턴 템플릿 메소드 Pattern_javascript 기술 배우기

1. 정의

템플릿 방식은 상속 설계 패턴을 기반으로 하여 시스템의 확장성을 크게 향상시킬 수 있습니다. Java의 추상 상위 클래스 및 하위 클래스
템플릿 메소드는 구조의 두 부분으로 구성됩니다. 첫 번째 부분은 추상 상위 클래스이고 두 번째 부분은 구체적인 구현 하위 클래스입니다.

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 비동기 요청은 콜백 함수에서 수행해야 하는 작업을 캡슐화합니다. 이 콜백 함수는 데이터가 반환될 때만 실행됩니다.

이 기사가 자바스크립트 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.