javascript设计模式——命令模式

命令模式：将请求与实现解耦并封装成独立对象，从而使不用的请求对客户端的实现参数化。

绘图命令：我们在使用cavnas时，经常会调用一些内置方法，但是需要不停的使用canvas元素的上下文引用，这在多人项目开发中耦合度比较高。我们可以将上下文引用对象安全地封装在一个命令对象的内部，如果他人想绘图，直接通过命令对象数学一条命令，即可调用命令对象内部封装的方法完成需求。

对canvas进行封装，实现命令调用

  <canvas id="canvas"></canvas>
  <script>
      var CanvasCommand = (function(){
        var canvas = document.getElementById('canvas')
        ctx = canvas.getContext('2d')
        var Action = {
          fillStyle: function(c) {
            ctx.fillStyle = c
          },
          fillRect: function (x, y, width, height) {
            ctx.fillRect(x, y, width, height)
          },
          strokeStyle: function (c) {
            ctx.strokeStyle = c
          },
          strokeRecct: function (x, y, width, height) {
            ctx.strokeRecct(x, y, width, height)
          },
          fillText: function(text, x, y) {
            ctx.fillText(text, x, y)
          },
          beginPath: function () {
            ctx.beginPath()
          }
        }
        return {
            excute: function(msg) {
              if (!msg) {
                return
              }
              if (msg.length) {
                for (var i = 0; i < msg.length; i++) {
                  arguments.callee(msg[i])
                }
              } else {
                // 如果msg.param不是一个数组，将其转化成数组
                msg.param = Object.prototype.toString.call(msg.param) === "[object Array]" ? msg.param : [msg.param]
                // Action 内部调用的方法可能引用this,为保证作用域中this指向正确，故传入action
                Action[msg.command].apply(Action, msg.param)
              }
            }
          }
      })()
      CanvasCommand.excute([
        {command: 'fillStyle', param: 'red'},
        {command: 'fillRect', param: [20, 20, 300, 100]}
      ])
    </script>