前言

首先，不得不说我们是站在巨人的肩膀上写代码，前辈们已经很合理的帮助我们总结出来了23种设计模式，虽然有些已经被语言直接使用Api实现了，感谢走在前沿的攻城狮。

但是真真正正的看一遍所有的设计模式还是很有必要的，一开始认为 设计模式 不是雪中送来的炭，而是锦上添加的花，为什么这么说呢？因为99.99999%的需求，不考虑设计模式，只使用最基本的分支+循环语句就可以实现，而设计模式只是将这些逻辑有效的整合了起来，提高了可读性、可维护性。确实是这样的，传说中的【屎山粪海】也是这么来的。

我对设计模式的理解还只是一个不求甚解的阶段，就是只是知道有哪些设计模式以及部分模式有过使用经验的阶段，下面从切身实际的一个小场景的实现来探讨一下设计模式对开发人员会带来哪些影响：

前端的话就用轮播来记录一下吧！

设计模式之前

时间就回到4年前的时候了，大概是这样子写的：

<div>
  <ul>
    <li onclick="handleClickItem(0)"></li>
    <li onclick="handleClickItem(1)"></li>
    <li onclick="handleClickItem(2)"></li>
    <li onclick="handleClickItem(3)"></li>
  </ul>
  <div class="left-btn" onclick="handleClickLeft"></div>
  <div class="right-btn" onclick="handleClickRight"></div>
  <div class="tools">
    <ul>
      <li onclick="handleClickTool(0)"></li>
      <li onclick="handleClickTool(1)"></li>
      <li onclick="handleClickTool(2)"></li>
      <li onclick="handleClickTool(3)"></li>
    </ul>
  </div>
</div>
<script>
    function handleClickItem(i) {}
    function handleClickLeft() {}
    function handleClickRight() {}
    function handleClickTool(i) {}
</script>

如上代码，我相信每个前端可能都写过，至少看过吧！

大概的效果就是，上面四个li在轮流显示，一个左右按钮，然后下面的li来展示当前展示的div的位置。

功能肯定是没问题的，但是这是纯为了实现功能去实现的代码，简单说几点他的问题：

1. 增加轮播项怎么办？
2. 顺序发生变化了怎么办？
3. 在一个页面上有多个这样子的轮播？

实际模式之中

为了满足上面提出的三个问题，我们开始考虑如何解决这个问题，就出现了如下的实现方式：

<div id="loogWrap"></div>

<script>
function initLoop(id, data) {
  const wrap = document.getElementById(id)

  const leftBtn = '<div class="left-btn" id="leftBtn"></div>'
  const rightBtn = '<div class="left-btn" id="rightBtn"></div>'
  const tools = `<ul id="toolsBar">
    ${data.map((item) => `<li data-id="${item.id}"></li>`)}
  </ul>`
  const items = `<ul id="itemWrap">
    ${data.map(
      (item) => `<li data-id="${item.id}"><img src="${item.src}"/></li>`
    )}
  </ul>`
  
  wrap.appendChild(leftBtn)
  wrap.appendChild(rightBtn)
  wrap.appendChild(tools)
  wrap.appendChild(items)

  const lbtn = document.getElementById('leftBtn')
  const rbtn = document.getElementById('rightBtn')
  const toolbar = document.getElementById('toolsBar')
  const itemWrap = document.getElementById('itemWrap')
  
  lbtn.addEventListener('click', function (e) {})
  rbtn.addEventListener('click', function (e) {})
  rbtn.addEventListener('tools', function (e) {})
  rbtn.addEventListener('items', function (e) {})
}

const data = Array(5).fill({id:1, src:'img'})

initLoop(id, data)
</script>

呐，这已经有意识的开始令这个轮播变得有点意思了，而且不再关注页面的布局了，只需要修data就可以实现数据的变化，而且想复用的话，只需要写个 div 然后 执行一下 initLoop 方法就可以构建出来一个新的轮播。

同样的实现方式如我前面写的一篇文章中的：工具 - 我又手写轮播了，也是这样做的。文章里面还结合了 jquery 的一些 Api。

如果这时开始了解设计模式的话，已经可以很快的使用 创建型 模式中的方法来创建一个轮播了，比这个更优雅：

    class loogEvent {
      constructor(selector, data) {
        this.$dom = document.querySelector(selector)
        this.data = data
        this.current = 0
        this.init()
      }

      init() {
        this.$dom.appendChild(this.takeBtn('left'))
        this.$dom.appendChild(this.takeBtn('right'))
        this.$dom.appendChild(this.takeTools())
        this.$dom.appendChild(this.takeItems())

        this.addEvent()
      }

      takeBtn() {}
      takeTools() {}
      takeItems() {}

      addEvent() {
        leftBtn.addEventListener('click', this.change)
        rightBtn.addEventListener('click', this.change)
        tools.addEventListener('click', this.change)
        items.addEventListener('click', this.currentItem)
      }

      change(i) {
        switch (i) {
          case 'left':
            this.current -= 1
            break
          case 'right':
            this.current += 1
            break
          case typeof i === 'number':
            this.current = i
            break
          default:
            break
        }
      }

      currentItem() {}
    }

    const loop = new loogEvent('#wrap', [])

这一段代码就已经开始使用 创建型 模式去构建 轮播这个功能了，当然上面这段代码可能跑不通哈，只是展示一下思路，有兴趣的小伙伴可以实现它。总体思路就是所有的逻辑都尽可能的放在了 js 里面，可以实现微操。

但是这也还有一些问题：

1. 我有多个动画效果，组件A使用的是渐入渐出，组件B则希望是平滑移入移出...
2. 有些要显示左右按钮，有些则不显示...
3. 工具条的样式也不尽相同，有点的，有条的...

设计模式之后

到之中这一步的时候，其实已经可以看到，现在追求的已经不是说如何去实现这个轮播了，而是如何能够更优雅的实现轮播。上面的思路都是，把轮播作为一个整体，由一个统一的入口一口气实现它，每次想设计一个新的轮播则需要重新申明一个轮播类。然后去实例化。

而且可以回想一下如果在 vue 里面使用双向绑定是怎么实现一个轮播的？

1. 在template中使用 v-for 的方式写好页面结构
2. 使用 @click 的方式去触发Vue实例里面的方法
3. 配合 过渡实现轮播

还是我的另一篇文章我也做了：Vue组件-景深卡片轮播

可以看到，我们其实并没有向前面那两种思路那样，去手动的写入dom，然后微操数据等等，vue 已经帮忙给做了，而且有些方法例如 init 方法，也是 vue 帮忙实现的。

抛开 vue 是怎么实现的，再回过头来考虑上面的几个问题：

1. 多个动画 => 一个动画库或多个动画类(start,end)
2. 不一样的按钮 => 一个按钮库或多个按钮类
3. 工具条不一样 => 定制化的工具条

我们就可以做出如此的设计：

1. 提供一个方法库，用来实现获取dom属性、窗口属性、鼠标属性的固定方法(命令模式)
2. 提供多个动画类，返回 start/end 两个属性，供主逻辑获取开始和结束的样式(访问模式)
3. 提供多个工具条类，主流程上使用 use 方法挂载在主逻辑里面(桥接模式)
4. 左右按钮进行抽离，只和主逻辑上的 current 进行交互(中介者模式)
5. 还可以加一个备忘录，存在 localstorage 里面，下次直接用
7. ...

这就是在造火箭了。也是为什么面试的时候会面试那些造火箭的问题的原因，上面的方法大家都会，总得问点不一样的东西吧，不然凭什么选你？

而且这些也只是理论上的逻辑，具体操作还是要看公司需求和工期，不过90%的人都做到之中那种效果就不再往下去细究了，一没时间二没精力还没啥用，不以开源造福人类为目的，写的太复杂还真的没啥用。

后话

趁着这个机会又看了一遍这些设计模式，其实前前后后已经看了好几遍了，但是真的是看过就忘了，所以这次一边看，一遍记，有些理解和认识的模式，会自己写几行代码体验一下，有些压根没用过或者看不懂的依旧是看不进去。

然后就是对设计模式的一些理解了，设计模式被好多人称之为【套路】。确实是这样的，并不是说每个人都需要熟练的去使用这些套路，但是你在遇到别人用的时候，至少知道他在干嘛，例如：玩盲僧不知道 R闪 是不是太外行了，哪怕自己手残按不出来，但是肯定是要知道的呀！

套路能得人心，但是还是要待人以诚。

see U！