适配器模式 | 秋雨

简介

策略模式定义了一系列算法，并将每个算法封装起来，使他们可以相互替换。

ES6

const startegry = {
  S: (salary) => {
    return salary * 6;
  },
  A: (salary) => {
    return salary * 5;
  },
  B: (salary) => {
    return salary * 4;
  },
  C: (salary) => {
    return salary * 3;
  },
  D: (salary) => {
    return salary * 2;
  },
};

function calBonus(level, salary) {
  return startegry[level](salary);
}

calBonus("A", 10000);
calBonus("B", 8000);

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>策略模式示例</title>
    <style>
      li {
        display: flex;
        justify-content: space-between;
      }

      .reditem {
        background-color: red;
      }

      .yellowitem {
        background-color: yellow;
      }

      .greenitem {
        background-color: green;
      }
    </style>
  </head>

  <body>
    <ul id="mylist"></ul>
    <script>
      var list = [
        {
          title: "男人看了沉默",
          type: 1,
        },
        {
          title: "震惊",
          type: 2,
        },
        {
          title: "kerwin来了",
          type: 3,
        },
        {
          title: "tiechui离开了",
          type: 2,
        },
      ];

      let obj = {
        1: {
          content: "审核中",
          className: "yellowitem",
        },
        2: {
          content: "已通过",
          className: "greenitem",
        },
        3: {
          content: "未通过",
          className: "reditem",
        },
      };

      mylist.innerHTML = list
        .map(
          (item) => `
                    <li>
                        <div>${item.title}</div>    
                        <div class="${obj[item.type].className}">${
            obj[item.type].content
          }</div>    
                    </li>
                `
        )
        .join("");
    </script>
  </body>
</html>