js中的一些常用设计模式总结

状态模式、中介模式、观察者模式、策略模式的思考：

共同点：　通过主函数返回一个对象，对象中包含需要执行的方法和需要传的参数，方法中会处理一个变量，这个变量为静态私有变量，必须用闭包的特性来声明，防止篡改。这个变量一般会是对象，对象的键是执行时传的参数，值是不同的处理函数。用来被返回的对象使用。

状态模式：在一个函数中声明一个状态对象Ａ，在对象A中添加不同状态下的执行函数，返回一个结果对象{A:A}，

代码实例：

var ResultState = function(){
    var state = {
        state0:function(){},
        state1:function(){}
    }
    function show(result){
        state["state"+result] && state["state"+result]()
    }
    return {show:show}
}

观察者模式：在对象中放置订阅函数和发送函数有时会有删除订阅函数，在主函数外面声明存储订阅函数的对象变量，声明注册函数，注册函数传入（type,function）两个参数，然后将function存入存储对象（闭包）的type中。

代码实例：

var Observer = (function(){
    var _messages = {};
    return {
        regist:function(type, fun){
            if(typeof _messages[type] === 'undefined'){
                _messages[type] = [fun]
            }else{
                _messages[type].push(fun);
            }
        },
        fire: function(type, args){
            if(!_messages[type]){
                return
            }
            var events = {
                type: type,
                argus: argus
            },
            i = 0;
            len = _message[type].length;
            for(var i=0; i<len; i++){
                _messages[type][i].call(this, events)
            }
        },
        remove: function(type, fun){
            if(_messages[type] instanceof Array){
                var i = _messages[type].length-1;
                for(;i>=0; i--){
                    _messages[type][i] === fun && _messages[type].splice(i,1);
                }
            }
        }
    }
})()

中介模式和观察者模式相似。可以忽略。

策略模式：定义一组方法，使其相互之间可以替换。

代码实例：

var PriceStrategy = function(){
    var stragety = {
        A:function(price){
            A策略
        }，
        B:function(price){}
    }
    return function(type,price){
        return stragety[type] && stragety[type](price)
    }
}

声明发送函数　发送函数遍历存储对象中的每个函数并执行该函数　注意：１　this的指向问题　２判断存储对象中注册函数是否存在。

备忘录模式：利用js中闭包的特性。将获得的数据存到闭包中，起到缓存的效果。

代码实例：

var page = function(){
    var cache = {};
    return function(page, fn){
        if(cache[page]){
            show(page,cache[page])
        }else{
            $.post('/getpage',{page:page},function(res){
                if(res.code == 200){
                    showpage(page, res.data);
                    cache[page] = res.data;
                }else{
                    处理异常
                }
            })
        }
    }
}

迭代器模式：在不暴露内部结构的同时，可以顺序的访问聚合对象内部的成员。例如：翻页

代码实例：

var Iterator = function(items, container){
    var container = container && document.getElementById(container) || document,
    items = container.getElementsByTagName(items),
    return{
        first: function(){return items[0]},
        last: function(){return items[items.length-1]},
        ...
    }
}

模板模式：在父类中定义一组操作方法，子类继承后在不改变父类方法的基础上方便开发自己的方法。

桥接模式：提取业务逻辑中的共同点，建立事件和业务之间的桥梁。或实现多元化的事件对象，每个业务可以添加其中的几个。

装饰者模式：在不改变原对象的基础上，对其进行功能包装：例如元素绑定相应的事件

代码实例：

var Decorator = function(input, fun){
    var input = document.getElementById(input);
    if(typeof input.onclick === 'function'){
        var oldClickFn = input.onclick;
        input.onclick = function(){
            oldClickFn();
            fun();
        }
    }else{
        input.onclick = fun;
    }
}

亨元模式：在有限的空间内展示过多的内容，避免空间拥有相同的内容造成多余的开销。广告轮播

代码实例：

var Flyweight = function(){
    var created = [];
    function create(){
        var dom = document.createElement('div');
        document.getElementById('container').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
            }
        }
    }
}