Node.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()
// 烧开水
// 冲泡咖啡
// 倒入杯子
// 加糖

Hook

손님이 양념(설탕, 레몬) 추가를 원하지 않으면 어떻게 하나요? ) 이때 도입할 수 있는 것은 Human Hooks를 사용하여 구현한 것이며 구현 로직은 다음과 같습니다.

// ...

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 디자인 패턴: 관찰자 패턴(Publish-Subscribe 패턴)이란 무엇인가요? JS 관찰자 패턴 소개

위 내용은 Node.js 디자인 패턴: 템플릿 메소드 패턴이 무엇인가요? js 템플릿 메소드 패턴 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!