js的36个设计模式：结构型模式

1.外观模式

（1）在对页面dom绑定原生点击事件的时候，dom2级会覆盖dom0级的操作；IE9不兼容addEventListener，而不支持dom2级的浏览器，又只能用dom0级的onclick。外观模式可以把一些兼容方法或者复杂的方法简化。

function addEvent(dom,type,fn){
    //dom2
    if(dom.addEventListener){
        dom.addEventListener(type,fn,false);
        //不支持dom2的浏览器
    }else if(dom.attachEvent){
        dom.attachEvent("on" + type,fn);
        //都不支持的老浏览器
    }else{
        dom["on" + type] = fn;
    }
};

(2)把复杂的方法简化

var A = {
    css:function(id,key,value){
        document.getElementById(id).style[key] = value;
    },
    attr:function(id,key,value){
        document.getElementById(id)[key] = value;
    }
};
A.css("box","color","#fff");

2.适配器模式

（1）框架适配器
比如说。。window.A = A = jQuery;
简单的适配了jQuery框架和A框架，可以同时用A来使用两个框架的方法。如果A框架有重写jQuery的方法的话，则会执行A框架。
（2）参数适配,数据适配，其实就是把一个数据格式通过函数转化成另一种格式。。

var arr = ["js模式","2016-12-13","baishiup"];
function arrToINeed(arr){
    retirn {
        title:arr[0],
        date:arr[1],
        username:arr[2]
    }
}

3.代理模式

跨域这方面的吧。。这个先不细看

4.装饰者模式

装饰旧方法。修改历史代码的时候，可以用装饰者模式，在不修改原有代码的基础上，对旧代码的事件进行修改。

var con = document.getElementById("con");
    con.onclick = function () {
        console.log("old fun");
    };

    var de = function (id, fn) {
        var dom = document.getElementById(id);
        //如果该DOM已有绑定事件
        if (typeof dom.onclick === "function") {
            var oldFun = dom.onclick;
            //绑定新事件
            dom.onclick = function(){
                //执行老事件
                oldFun();
                //执行新绑定事件
                fn();
            }
        }else{
            //如果该DOM没有绑定事件，直接为dom添加事件
            dom.onclick = fn;
        }
    };
    de("con", function () {
        console.log("new fun");
    })

5.桥接模式

类似中间件函数。

function change(dom,color,gb){
    dom.style.color = color;
    dom.style.background = db;
};

var spans = document.getElementByTagName('span');
spans[0].onclick = function(){
    change(this,"#333","#f4f4f4");
}

6.组合模式

跳过

7.享元模式

实现类似分页的效果

var fw = function(){
    var created = [];
    function create(){
        var dom = document.createElement('div');
        document.getElementById("con").appendChild(dom);
        created.push(dom);
        return dom;
    };
    return {
        getDiv:function(){
            if(created.length > 5){
                return create();
            }else{
                var div = created.shift();
                created.push(div);
                return div;
            }
        }
    }
}