JavaScript 设计模式之职责链模式

职责链

在日常开发中，我们一个函数（方法）应该是尽可能的单单只做一件事，比如 一个获取 name 的函数，他就用来返回 name 处理 name相关的数据就好了，这就是职责

function getName(){

    // todo sth.
    return name
}

在写代码过程中，将职责的粒度划分的越小，越容易排查问题，单元测试也更容易

例如

假使我们有以下代码

const sendData = function (data, meth) {
  // todo: 处理请求相关
  // 我们可以在这里处理相关的请求逻辑
  return fetch(`${url}?${data}`, { method: meth })
}

/**
 * 处理数据
 * @param {*} data 需要处理的数据
 */
const dealData = function (data) {
  // 处理数据
  const dataType = Object.prototype.toString.call(data)
  if (dataType === '[object Array]') {
    // 数组
    return createSug(data)
  }
  if (dataType === '[object Object]') {
    // 对象
    let newData = []
    for (let key in data) {
      newData.push( data[key] )
    }
    return createSug([newData])
  }
}

/**
 * 展示到界面
 * @param {*} data 展示的数据
 */
const createSug = function (data) {
  const sugList = document.querySelector('#sug-list')
  sugList.innerHTML = ''
  data.forEach(item => {
    const li = document.createElement('li')
    li.innerText = item
    sugList.appendChild(li)
  })
  return data
}

使用

可以这样使用看看

dealData(["封不平",'易国梓','都史'])

dealData({
  ame: '窝阔台',
  age: 20,
  gender: 'female'
})

只需要做到一个函数只处理与自己相关的事即可，与其他无关

总结

职责链模式定义了请求的传递方向通过多个对象对请求的传递，实现一个复杂的逻辑操作。因此职责链模式将负责的需求颗粒化逐一实现每个对象分内的需求，并将请求顺序地传递。对于职责链上的每一个对象来说，它都可能是请求的发起者也可能是请求的接收者。通过这样的方式原请求的发起者与原请求的接收者之间的耦合。

命令模式

命令模式我们不需要关注命令后面的函数是如何实现的，逻辑是什么，我们只需要对命令返回的某些命令进行正常的传值即可

例如

const sthCommand = (function () {
  // todo: 一些方法
  const methods = {
    // 展示数据
    show(data) {
      console.log('show=>',data)
      // todo:
    },
    // 隐藏数据
    hide(data) {
      console.log('hide=>',data)
      // todo: 
    }
    ...
  }
  return function exec() { }
})()

我们定义许多的方法，我们只需要暴露一个 exec 的闭包函数出去给外部使用即可

 function exec(msg) {
  if (!msg) return 
  msg.params = Object.prototype.toString.call(msg.params) === '[object Array]' ? msg.params : [msg.params];
  return methods[msg.command].apply(methods, msg.params)
}

使用

sthCommand({
  command: 'show',
  params: ['hello world']
})
sthCommand({
  command: 'hide',
  params: ['hello world']
})

// show=> hello world
// hide=> hello world

总结

命令模式我们不再需要关注每一个命令内部的实现，使用起来简洁明了，在许多的框架中也都有用到