简述

在项目开发过程中，经常会接触到接口返回特定的 code 值，然后由前端根据不同的 code 值，在页面上显示对应的文案信息。通常我们会采取 if 或者 switch 的方案去处理这中情况，下面我们先来看下这两种方案的代码。

if 方案

  1. let msg = '';
  2. if (res.code === '11001') {
  3.   msg = '微信支付购买';
  4. } else if (res.code === '11008') {
  5.   msg = '余额购买';
  6. } else if (res.code === '11011') {
  7.   msg = '退款到余额';
  8. } else if (res.code === '11012') {
  9.   msg = '优惠卷兑换';
  10. } else if (res.code === '11013') {
  11.   msg = '积分兑换';
  12. } else if (res.code === '11014') {
  13.   msg = '赠送课程';
  14. }

switch 方案

  1. let msg = '';
  2. switch (res.code) {
  3.   case '11001':
  4.     msg = '微信支付购买';
  5.     break;
  6.   case '11008':
  7.     msg = '余额购买';
  8.     break;
  9.   case '11011':
  10.     msg = '退款到余额';
  11.     break;
  12.   case '11012':
  13.     msg = '优惠卷兑换';
  14.     break;
  15.   case '11013':
  16.     msg = '积分兑换';
  17.     break;
  18.   case '11014':
  19.     msg = '赠送课程';
  20.     break;
  21.   default:
  22.     break;
  23. }

会发现上述两种方案的代码量多，可维护性也比较差。要优化这一类的代码，可以采用策略模式实现。

优化后的方案

  1. const messages = {
  2.   11001: '微信支付购买',
  3.   11008: '余额购买',
  4.   11011: '退款到余额',
  5.   11012: '优惠卷兑换',
  6.   11013: '积分兑换',
  7.   11014: '赠送课程',
  8. };
  9. const msg = messages[res.code];