命令模式

将一个请求封装为一个对象，使发出请求的责任和执行请求的责任分割开。这样两者之间通过命令对象进行沟通，这样方便将命令对象进行储存、传递、调用、增加与管理。

命令模式的主要优点如下:

• 通过引入中间件（抽象接口）降低系统的耦合度。
• 扩展性良好，增加或删除命令非常方便。采用命令模式增加与删除命令不会影响其他类，且满足“开闭原则”。
• 可以实现宏命令。命令模式可以与组合模式结合，将多个命令装配成一个组合命令，即宏命令。
• 命令模式可以与备忘录模式结合，实现命令的撤销与恢复。
• 可以在现有命令的基础上，增加额外功能。比如日志记录，结合装饰器模式会更加灵活。

命令模式的主要缺点如下:

• 可能产生大量具体的命令类。因为每一个具体操作都需要设计一个具体命令类，这会增加系统的复杂性。
• 命令模式的结果其实就是接收方的执行结果，但是为了以命令的形式进行架构、解耦请求与实现，引入了额外类型结构（引入了请求方与抽象命令接口），增加了理解上的困难。不过这也是设计模式的通病，抽象必然会额外增加类的数量，代码抽离肯定比代码聚合更加难理解。

示例一

在调用与实现间加上一层命令层

var command = (function (){
    var action = {
        
    };
    return function excute(){}
})()

示例二

要做一个画廊，图片数量和排列顺序随机

var _data = {
    imgArr: [{img: 'xxxx', title: 'default title1'}, {img: 'xxxx', title: 'default title2'}],
    type: 'normal',
}
_data.imgArr.forEach((img) => {
    //生成html
})
target.innerHTML = _html

var createImg = (function () {
    var action = {
        create: function (obj) {
            var htmlArr = [];
            var _htmlstring = '';
            var _htmlTemplate = "<div><img src='{{img-url}}' /></div><h2>{{title}}</h2>"
            var displayWay = {
                normal: function (arr) {
                    return arr;
                },
                reverse: function (arr) {
                    return arr.reverse;
                }
            }

            obj.imgArr.forEach((img) => {
                var _html;
                _html = _htmlTemplate.replace('{{img-url}}', img.img).replace('{{title}}', img.title);
                htmlArr.push(_html);
            })
            htmlArr = displayWay[obj.type](htmlArr);
            _htmlstring = htmlArr.join("");
            return "<div>" + _htmlstring + "</div>";
        },
        display: function (obj) {
            var _html = this.create(obj);
            obj.target.innerHTML = _html;
        }
    }

    return function excute(obj) {
        var _default = {
            imgArr: [{img: 'xxxx', title: 'default title'}],
            type: 'normal',
            target: document.body
        };
        for (var item in _default) {
            _default[item] = obj[item] || _default[item];
        }
        action.display(_default);
    }
})()
createImg({
    imgArr: [{img: 'xxxx', title: 'default title1'}, {img: 'xxxx', title: 'default title2'}],
    type: 'normal',
})

示例三

封装一系列的canvas绘图命令

var myCanvas = function () {}
myCanvas.prototype.drawCircle = function () {}
myCanvas.prototype.drawRect = function () {}

var canvasComand = (function () {
    var action = {
        drawCircle: function (config) {

        },
        drawRect: function (config) {

        }
    };
    return function excute(commander) {
        commander.forEach((item) => {
            action[item.command](item.config);
        })
    }
})()