Node.js 디자인 패턴: 상태 패턴이란 무엇입니까? JS 상태 모드 소개

이 기사에서는 js 디자인 패턴에 대한 내용을 제공합니다. 상태 패턴이란 무엇입니까? js 상태 모드에 대한 소개에는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

상태 모드란 무엇인가요?

Definition: 사물 내부의 각 상태를 클래스로 캡슐화하면 내부 상태가 변경되면 다른 동작이 생성됩니다.

주요 솔루션: 객체의 동작은 상태(속성)에 따라 달라지며, 상태 변경에 따라 관련 동작도 변경될 수 있습니다.

사용 시기: 코드에는 객체의 상태와 관련된 다수의 조건문이 포함되어 있습니다.

해결 방법: 다양한 특정 상태 클래스를 추상화합니다.

js 상태 모드 적용 예: 1. 농구를 할 때 운동선수는 정상 상태, 비정상 상태 및 초정상 상태를 가질 수 있습니다. 2. Zeng Hou Yi의 Chime에서 'bell은 추상적인 인터페이스', 'Zhong A' 등은 구체적인 상태이며, 'Zeng Hou Yi의 Chime'은 특정 환경(Context)입니다.

js 상태 모드의 장점: 1. 변환 규칙을 캡슐화합니다. 2. 가능한 상태를 열거하기 전에 상태 유형을 결정해야 합니다. 3. 특정 상태와 관련된 모든 동작을 클래스에 넣고 새로운 상태를 쉽게 추가하면 객체의 동작을 변경할 수 있습니다. 4. 상태 전환 논리가 거대한 조건문 블록 대신 상태 개체와 통합되도록 허용합니다. 5. 여러 환경 개체가 상태 개체를 공유할 수 있으므로 시스템의 개체 수가 줄어듭니다.

js 상태 모드의 단점: 1. 상태 모드를 사용하면 필연적으로 시스템 클래스와 개체 수가 늘어납니다. 2. 상태 모드의 구조와 구현은 상대적으로 복잡합니다. 부적절하게 사용하면 프로그램 구조와 코드에 혼란이 생길 ​​수 있습니다. 3. 상태 모드는 "열림 및 닫힘 원리"를 잘 지원하지 않습니다. 상태를 전환할 수 있는 상태 모드의 경우 새 상태 클래스를 추가하려면 상태 변환을 담당하는 소스 코드를 수정해야 합니다. 그렇지 않으면 새 상태로 전환할 수 없습니다. 상태 및 수정 특정 상태 클래스의 동작에는 해당 클래스의 소스 코드 수정도 필요합니다.

js 상태 모드 사용 시나리오: 1. 상태가 변경됨에 따라 동작이 변경되는 시나리오. 2. 조건문과 분기문을 교체합니다.

참고: 동작이 상태에 의해 제한되고 상태가 5개 이하인 경우 상태 패턴을 사용하세요.

Scene 데모

특정 브랜드의 전기 램프는 버튼을 한 번 누르면 어두운 조명이 켜지고, 버튼을 두 번 누르면 강한 조명이 켜지고, 버튼을 세 번 누르면 조명이 꺼집니다.

// 将状态封装成不同类
const weakLight = function(light) {
  this.light = light
}

weakLight.prototype.press = function() {
  console.log('打开强光')
  this.light.setState(this.light.strongLight)
}

const strongLight = function(light) {
  this.light = light
}

strongLight.prototype.press = function() {
  console.log('关灯')
  this.light.setState(this.light.offLight)
}

const offLight = function(light) {
  this.light = light
}

offLight.prototype.press = function() {
  console.log('打开弱光')
  this.light.setState(this.light.weakLight)
}

const Light = function() {
  this.weakLight = new weakLight(this)
  this.strongLight = new strongLight(this)
  this.offLight = new offLight(this)
  this.currentState = this.offLight          // 初始状态
}

Light.prototype.init = function() {
  const btn = document.createElement('button')
  btn.innerHTML = '按钮'
  document.body.append(btn)
  const self = this
  btn.addEventListener('click', function() {
    self.currentState.press()
  })
}

Light.prototype.setState = function(state) { // 改变当前状态
  this.currentState = state
}

const light = new Light()
light.init()

// 打开弱光
// 打开强光
// 关灯

상태 패턴의 비객체 지향 구현

JavaScript의 위임 메커니즘을 사용하여 상태 패턴을 다음과 같이 구현할 수 있습니다.

const obj = {
  'weakLight': {
    press: function() {
      console.log('打开强光')
      this.currentState = obj.strongLight
    }
  },
  'strongLight': {
    press: function() {
      console.log('关灯')
      this.currentState = obj.offLight
    }
  },
  'offLight': {
    press: function() {
      console.log('打开弱光')
      this.currentState = obj.weakLight
    }
  },
}

const Light = function() {
  this.currentState = obj.offLight
}

Light.prototype.init = function() {
  const btn = document.createElement('button')
  btn.innerHTML = '按钮'
  document.body.append(btn)
  const self = this
  btn.addEventListener('click', function() {
    self.currentState.press.call(self) // 通过 call 完成委托
  })
}

const light = new Light()
light.init()

관련 권장 사항:

js 디자인 패턴: 데코레이터 패턴이란 무엇입니까? ? js 데코레이터 패턴 소개

js 디자인 패턴: 중재자 패턴이란 무엇인가요? JS 조정자 패턴 소개

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