우아한 작성하는 방법을 멀티 - 레이어를 결정

소개
에서 매일 프로젝트, 우리는 자주 수행 여부를 결정하는 데 사용하지만, 다층, 당신은 코드가 매우 복잡 것을 발견 할 것이다
요구 사항은
지금 사 개 제품을, 즉, 휴대 전화, 컴퓨터, 텔레비전, 게임 콘솔, 그리고 물론 각의가 제품의 가격은 동일하지 않습니다 표시
판사는 경우
처음 판단, 간단한을 작성하는 경우, 그러한 수요를보고하고 빠른, 우리는 코드를보고있다

let commodity = {
  phone: '手机',
  computer: '电脑',
  television: '电视',
  gameBoy: '游戏机'
}

if (commodity.phone) {
  // do someThing
} else if (commodity.computer) {
  // do someThing
} else if (commodity.television) {
  // do someThing
} else if (commodity.gameBoy) {
  // do someThing
}

쓰기뿐만 아니라, 달성 할 수 있지만, 더 판단되면, 코드는 유지 보수 및 독서는 매우 쌀쌀하다, 너무 깁니다
스위치
우리는 스위치의 사용을 고려,이 시간

let commodity = {
  phone: '手机',
  computer: '电脑',
  television: '电视',
  gameBoy: '游戏机'
}
const price = (name) => {
  switch (name) {
    case commodity.phone: 
      console.log(9999)
      break
    case commodity.computer: 
      console.log(15999)
      break
    case commodity.television: 
      console.log(1999)
      break
    case commodity.gameBoy: 
      console.log(2500)
      break
  }
}
price('手机') // 9999

그러나 그러한 모습, 근본적으로 문제를 해결할 수없는 것으로 보이지만 코드는 간단하고 작은
지도
지도입니다 무엇?
지도 개체 만들기

const commodity = new Map([
  ['phone', 9999],
  ['computer', 15999],
  ['television', 2999],
  ['gameBoy', 2599]
])

인수 가격 기능 만들기

const price = (name) => {
  return commodity.get(name)
}
price('phone') // 9999

경우와 스위치 코드보다 훨씬 간단하고 크게 가독성 향상
이 작업을 수행하고, 갑자기 제품 매니저는 말했다, 지금 새해, 상품 수 없어, 당신은 서로 다른 시간대에 서로 다른 가격을 설정하는 할인 혜택을 필요로했고, 다른 논리가있을 것이다 같은 함수를 호출,이 시간을 결정하는 경우 좋은 번호와 이중 어떤 11쌍 탄생 (12) 설날 ...
당신은 다시 둥지 이러한 코드는 상상 할 수 있다면 ... 경우이다 쓰기에 경우 누르면
키가지도를 사용하는 객체
우리가이 문제를 해결지도와 도움이 시간을

const commodity = new Map([
  [{name: 'phone', date: '11-11'}, () => {
    console.log(9999)
    // do Something
  }],
  [{name: 'phone', date: '12-12'}, () => {
    console.log(9888)
    // do Something
  }],
  [{name: 'phone', date: '06-18'}, () => {
    console.log(9799)
    // do Something
  }],
  [{name: 'phone', date: '09-09'}, () => {
    console.log(9699)
    // do Something
  }],
]);
const showPrice = (name, date) => {
  [...commodity].forEach(([key,value])=> {
    key.name === name && key.date === date ? value.call() : ''
  })
}
showPrice('phone', '12-12')

, 더 나은 깨끗하고 아름다운 코드의 가독성을 쓰기
일정 시간이, 그것을 어떻게 같은 논리가 있다면?
우리는 캐시에 동일한 로직을 고려할 수 있습니다

const CheckPrice = () => {
  const showMessage = () => {
    console.log('打开活动页面')
  }
  return new Map ([
    [{name: 'phone', date: '11-11'}, () => {
      console.log(9999)
      showMessage()
      // do Something
    }],
    [{name: 'phone', date: '12-12'}, showMessage],
    [{name: 'phone', date: '06-18'}, () => {
      console.log(9799)
      // do Something
    }],
    [{name: 'phone', date: '09-09'}, () => {
      console.log(9699)
      // do Something
    }],
  ])
}
const showPrice = (name, date) => {
  [...CheckPrice()].forEach(([key,value])=> {
    key.name === name && key.date === date ? value.call() : ''
  })
}
showPrice('phone', '11-11')

그런 다음 그것을 간단하게 할 수 있습니까?
긍정적으로 최적화되어

const CheckPrice = () => {
  const showMessage = () => {
    console.log('打开活动页面')
  }
  return new Map ([
   [/^phone_[0-4]$/, () => {
     console.log('活动时间价格是8888')
   }],
   [/^phone_[5-9]*$/, () => {
     console.log('其他时间10000')
   }],
   [/^phone_.*$/, () => {
    showMessage()
   }],
  ])
}
const showPrice = (name, date) => {
  [...CheckPrice()].forEach(([key,value])=> {
    key.test(`${name}_${date}`) ? value.call() : ''
  })
}
let date = [{date: '11-11', key: 1}, {date: '12-28', key: 9}]
let target = date.find((item, index) => item.date === '12-28')
showPrice('phone', target.key)