> 웹 프론트엔드 > JS 튜토리얼 > js 디자인 패턴: 전략 패턴이란 무엇입니까? JS 전략 패턴 소개

js 디자인 패턴: 전략 패턴이란 무엇입니까? JS 전략 패턴 소개

不言
풀어 주다: 2018-08-17 16:05:06
원래의
1847명이 탐색했습니다.

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

전략 모드란 무엇인가요?

Definition: 다양한 매개변수에 따라 다양한 전략이 나올 수 있습니다

주요 솔루션: 유사한 알고리즘이 여러 개 있는 경우 if...else를 사용하면 유지 관리가 복잡하고 어려워집니다.

전략 패턴을 사용하는 경우: 많은 상황이 있으며 이를 구별하는 것은 직접적인 행동입니다.

해결 방법: 해시 개체를 통해 다양한 전략을 매핑합니다.

js 전략 모드의 장점: 1. 알고리즘을 자유롭게 전환할 수 있습니다. 2. 조건부 판단을 여러 번 사용하지 마십시오. 3. 확장성과 재사용성이 좋습니다.

js 전략 모드의 단점: 1. 전략 카테고리가 늘어납니다. 2. 모든 전략 수업은 외부 세계에 노출되어야 합니다.

전략 모드 사용 시나리오: 1. 실행 방법은 동작에 따라 동적으로 변경되어야 합니다. 2. 코드를 줄이고 코드를 더 읽기 쉽게 만들기 위해. 3. 정책의 일원화된 관리가 필요합니다.

JS의 전략 패턴

연말 보너스 획득에 대한 다음 데모를 관찰하세요. 다양한 매개변수(레벨)에 따라 다양한 전략 방법(규칙)이 획득됩니다. 이는 JS의 전략 패턴의 가장 고전적인 적용 중 하나입니다. .

 const strategy = {
  'S': function(salary) {
    return salary * 4
  },
  'A': function(salary) {
    return salary * 3
  },
  'B': function(salary) {
    return salary * 2
  }
}

const calculateBonus = function(level, salary) {
  return strategy[level](salary)
}

calculateBonus('A', 10000) // 30000
로그인 후 복사

함수가 일류 시민인 JS에서는 고차 함수에 js 전략 패턴의 사용이 숨겨져 있는 경우가 많습니다. 위의 데모를 다음과 같은 형식으로 약간 변형하면 이미 사용하고 있음을 알 수 있습니다. , 우리는 그것을 다시 디자인 패턴으로 마스터했습니다.

const S = function(salary) {
  return salary * 4
}

const A = function(salary) {
  return salary * 3
}

const B = function(salary) {
  return salary * 2
}

const calculateBonus = function(func, salary) {
  return func(salary)
}

calculateBonus(A, 10000) // 30000
로그인 후 복사

관련 추천:

JS 디자인 패턴의 프록시 모드에 대한 자세한 설명

PHP 디자인 패턴의 싱글톤 모드 코드, PHP 디자인 패턴

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿