定义

命令模式,即将请求于实现解耦并封装成独立对象,从而使不同的请求对客户端的实现参数话

场景

下面我们来通过下面这个简单的例子来说明。

这里我们分别为两个元素绑定了不同的事件,但是类似的操作比较多的时候,我们就可以使用命令模式来解耦代码,方便扩展和维护,操作方式如下:

  1. document.getElementById('div1').addEventListener('click', function(){
  2. console.log('天气不错')
  3. })
  4. document.getElementById('div2').addEventListener('click', function(){
  5. console.log('心情不好')
  6. })

首先创建一个对象,用来存放发送事件,执行事件和命令函数。

  1. var order = {} // 命令对象

发送事件:

  1. order.sendCommond = function (el, fn) {
  2. document.getElementById(el).addEventListener('click', function(){
  3. fn && fn()
  4. })
  5. }

执行事件:

  1. order.events = {
  2. type1: function() {
  3. console.log('天气不错')
  4. },
  5. type2: function() {
  6. console.log('心情不好')
  7. }
  8. }

命令函数:

  1. order.commondObj = function(param) {
  2. this.sendCommond(param.el, this.events[param.type])
  3. }

我们可以发现,这里的3个操作其实是把事件和事件执行内容做了分离,并且事件并不是直接调用,而是由一个命令函数来操作,当同一类型的操作比较多或者比较频繁的时候就可以通过这种方式来简化操作,在扩展性上便更好一点。我们可以通过下面的方式来为id为div1的元素添加事件,如下:

  1. order.commondObj({
  2. type: 'type1',
  3. el: 'div1'
  4. })

总结

通过上面个例子,不难发现,命令模式实现了解耦,也更适用于稍微复杂的逻辑。在逻辑比较简单的情况下,面向过程会显的更加灵活和便于理解。