JavaScript - 전략 패턴 🧠

내부에 케이스가 많은 여러 if/else if 또는 switch 문을 작성하는 것을 피하고 싶습니까?

전략 패턴이 우리에게 도움이 될 수 있습니다.

사용자가 다른 방법을 사용하여 가입할 수 있는 사용 사례가 있다고 상상해 보십시오.

구글 인증

페이스북 인증

양식 제출

우리는 이것을 피하고 싶습니다:

const AUTH_METHODS = {
  GOOGLE: 'GOOGLE',
  FACEBOOK: 'FACEBOOK',
  FORM_SUBMISSION: 'FORM_SUBMISSION'
}

const googleAuth = _ => {
  // ... Google auth code here
}

const facebookAuth = _ => {
  // ... Facebook Auth code here
}

const formSubmissionAuth = _ => {
  // ... Form submission code here
}

const handleAuthentication = method => {
  if (method === AUTH_METHODS.GOOGLE) {
    googleAuth()
  } else if (method === AUTH_METHODS.FACEBOOK) {
    facebookAuth()
  } else {
    formSubmissionAuth()
  }
}

전략 패턴을 사용하여 이를 어떻게 개선할 수 있습니까?

const AUTH_METHODS = {
  GOOGLE: 'GOOGLE',
  FACEBOOK: 'FACEBOOK',
  FORM_SUBMISSION: 'FORM_SUBMISSION'
}

const googleAuth = _ => {
  // ... Google auth code here
}

const facebookAuth = _ => {
  // ... Facebook Auth code here
}

const formSubmissionAuth = _ => {
  // ... Form submission code here
}

const authenticationStrategy = method => ({
  [AUTH_METHODS.GOOGLE]: googleAuth,
  [AUTH_METHODS.FACEBOOK]: facebookAuth,
  [AUTH_METHODS.FORM_SUBMISSION]: formSubmissionAuth
})[method]

const strategy = authenticationStrategy(AUTH_METHODS.GOOGLE)
strategy()

그리고 일부 전략 함수에 매개변수를 전달하려면 다음과 같이 할 수 있습니다.

const authenticationStrategy = method => ({
  [AUTH_METHODS.GOOGLE]: googleAuth,
  [AUTH_METHODS.FACEBOOK]: facebookAuth,
  [AUTH_METHODS.FORM_SUBMISSION]: () => formSubmissionAuth({ username: 'javascript', password: 'strategyPattern' })
})[method]

전략 패턴은 키/값 쌍이 있는 개체를 반환하고 "실행"할 키를 결정하는 것은 마지막에 [method]입니다. 이것은 우리가 전달하는 값이 무엇이든 간에 함수의 종속성입니다. 해당 개체 키에 매핑됩니다.