设计模式：策略模式

最新推荐文章于 2024-11-03 23:39:20 发布

Attacking-Coder

最新推荐文章于 2024-11-03 23:39:20 发布

阅读量69

点赞数

分类专栏：设计模型文章标签：策略模式设计模式

本文链接：https://blog.csdn.net/xinbaiyu/article/details/128629656

版权

设计模型专栏收录该内容

9 篇文章 0 订阅

订阅专栏

该示例展示了如何通过创建一个对象映射来优化代码，避免在JavaScript中使用大量的if…else语句进行条件判断。当有多种情况需要不同处理时，这种模式提高了代码的可读性和可维护性，例如在渲染列表内容时，根据item的type属性动态设置class和内容。

摘要由CSDN通过智能技术生成

该模式主要解决在有多种算法相似的情况下，使用if…else所带来的难以维护性。它的优点是算法可以自由切换，同时可以避免过多的if…else判断，具有良好的扩展性。
例如：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .greenItem {
      background: green;
    }

    .redItem {
      background: red;
    }

    .yellowItem {
      background: yellow;
    }
  </style>
</head>

<body>
  <ul id="list_content"></ul>
  <script>
    let list = [
      {
        title: '见义勇为',
        type: 1
      }, {
        title: '正能量',
        type: 2
      }, {
        title: '黄色',
        type: 3
      }, {
        title: '为民除害',
        type: 1
      },
    ]

    let obj = {
      1: {
        content: '审核通过',
        className: 'greenItem'
      },
      2: {
        content: '审核ing',
        className: 'yellowItem'
      },
      3: {
        content: '审核未通过',
        className: 'redItem'
      }
    }



    let listContent = document.querySelector('#list_content')
    listContent.innerHTML = list.map(item => {
      return `<li class="${obj[item.type].className}">
        ${item.title}
        ${obj[item.type].content}
        </li>`
    })
  </script>
</body>

</html>