エレガントかどうかを判断多層書き方

はじめ
に、毎日のプロジェクト、私たちはしばしば行わかどうかを判断するために使用しますが、多層、あなたはコードが非常に煩雑であることがわかります
要件は
、今4つの製品、すなわち、携帯電話、コンピュータ、テレビ、ゲーム機、そしてもちろん、それぞれを持っています表示された製品の価格は同じではありません
裁判官があれば
、このような需要を見に速い判断力、シンプルかつを書くための最初の時間は、私たちはコードを見ている場合は、

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元旦の誕生かどうかを判断するために、この時間、同じ関数を呼び出し
、これらのコードが想像できるのであれば再巣場合...書き込みに、それは、ある場合は、押すと
キーをMapを使用しますオブジェクト
この時点地図や助けを私たちは、この問題を解決します

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)
发布了19 篇原创文章 · 获赞 7 · 访问量 6453

おすすめ

転載: blog.csdn.net/ZYQZXF/article/details/104461923