单例模式

描述： 保证一个特定类仅有一个实例。

var single = (function () {
    var unique;

    function getInstance() {
        // 如果该实例存在，则直接返回，否则就对其实例化
        if (unique === undefined) {
            unique = new Construct();
        }
        return unique;
    }

    function Construct() {
        // ... 生成单例的构造函数的代码
    }
    return {
        getInstance: getInstance
    }
})();

工厂模式

var XMLHttpFactory = function () {}; //这是一个简单工厂模式
XMLHttpFactory.createXMLHttp = function () {
    var XMLHttp = null;
    if (window.XMLHttpRequest) {
        XMLHttp = new XMLHttpRequest()
    } else if (window.ActiveXObject) {
        XMLHttp = new ActiveXObject("Microsoft.XMLHTTP")
    }
    return XMLHttp;
}
//XMLHttpFactory.createXMLHttp()这个方法根据当前环境的具体情况返回一个XHR对象。
var AjaxHander = function () {
    var XMLHttp = XMLHttpFactory.createXMLHttp();
}

观察者模式（ 发布订阅模式）

参考自定义事件

策略模式（ 将算法的使用与算法的实现分离开来）

var strategies = {
    "S": function (salary) {
        return salary * 4;
    },
    "A": function (salary) {
        return salary * 3;
    },
    "B": function (salary) {
        return salary * 2;
    }
};

var calculateBonus = function (level, salary) {
    return strategies[level](salary);
};
calculateBonus('S', 20000)

外观模式

将大型逻辑片段简化为一个简单的函数调用操作

var N = window.N || {};
N.tools = {
    stopPropagation: function (e) {
        if (e.stopPropagation) {
            e.stopPropagation();
        } else {
            e.cancelBubble = true;
        }
    },

    preventDefault: function (e) {
        if (e.preventDefault) {
            e.preventDefault();
        } else {
            e.returnValue = false;
        }
    },

    stopEvent: function (e) {
        N.tools.stopPropagation(e);
        N.tools.preventDefault(e);
    }
}

装饰者模式

装饰器模式能够动态地为对象添加功能， 是从一个对象外部来给对象添加功能， 相当于改变了对象的外观。

代理模式

为其他对象提供一种代理以控制对这个对象的访问

function myImage = (function () {
    var imgNode = document.createElement('img');
    document.body.appendChild(imgNode);

    return {
        setImg: function (src) {
            imgNode.src = src;
        }
    }
})()
var proxyImg = (function () {
    var img = new Image();
    img.onload = function () {
        myImage.setImg(this.src);
    };

    return {
        setSrc: function (src) {
            myImage.setImg('img/1.gif');
            img.src = src;
        }
    }
})();

中介者模式

解除对象与对象之间的紧耦合关系

// 库存量
var goods = {
    "roseGold|16G": 10,
    "roseGold|32G": 10,
    "luxuryGold|16G": 10,
    "luxuryGold|32G": 10
};

var colorSelect = document.getElementById("selColor"),
    memorySelect = document.getElementById("selMemory"),
    numberInput = document.getElementById("selNum"),
    colorInfo = document.getElementById("conColor"),
    memeryInfo = document.getElementById("conMemory"),
    numberInfo = document.getElementById("conNum"),
    nextBtn = document.getElementById("nextBtn");

var mediator = (function () {
    return {
        changed: function (obj) {
            var color = colorSelect.value, // 颜色
                memory = memorySelect.value, // 内存
                number = +numberInput.value, // 数量
                stock = goods[color + '|' + memory]; // 对应颜色的库存量

            if (obj === colorSelect) {
                colorInfo.innerHTML = color;
            } else if (obj === memorySelect) {
                memeryInfo.innerHTML = memory;
            } else if (obj === numberInput) {
                numberInfo.innerHTML = number;
            }

            if (!color) {
                nextBtn.disabled = true;
                nextBtn.innerHTML = "请选择手机颜色";
                return;
            }

            if (!memory) {
                nextBtn.disabled = true;
                nextBtn.innerHTML = "请选择手机内存";
                return;
            }

            if (!number || (((number - 0) | 0) !== (number - 0))) {
                nextBtn.disabled = true;
                nextBtn.innerHTML = "请选择手机数量";
                return;
            }

            if (number > stock) {
                nextBtn.disabled = true;
                nextBtn.innerHTML = "库存不足";
                return;
            }

            nextBtn.disabled = false;
            nextBtn.innerHTML = "加入购物车";
        }
    };
})();
// 事件函数
colorSelect.onchange = function () {
    mediator.changed(this);
};
memorySelect.onchange = function () {
    mediator.changed(this);
};
numberInput.oninput = function () {
    mediator.changed(this);
}