js设计模式-桥接模式

桥接模式定义：桥梁模式的用意是"将抽象化(Abstraction)与实现化(Implementation)脱耦，使得二者可以独立地变化"。这句话有三个关键词，也就是抽象化、实现化和脱耦。

最简单的桥接模式例子：事件监听器

addEvent(element,"click",getResultByIdBridge);
    function getResultByIdBridge(e){
        getById(this.id, function(result){
            //TODO: this is operate result
        });
    }

 桥接模式复杂例子：构建XHR连接队列

var asyncRequest = (function(){
    
    function handleReadyState(o,callback){
        var poll = window.setInterval(function(){
            if(o && o.readyState ==4){
                window.clearInterval(poll);
                if(callback) callback(o);
            }
        },50);
    }
    
    var getXHR = function(){
        var http;
        try{
            http = new XMLHttpRequest();
            getXHR = function(){
                return new XMLHttpRequest();
            };
        }catch(e){
            var msxml = ["MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
            for(var i =0, len = msxml.length;i <len;i++){
                try{
                    http = new ActiveXObject(msxml[i]);
                    getXHR = function(){
                        return new ActiveXObject(msxml[i]);
                    };
                    break;
                }catch(e){}
            }
        }
        return http;
    }
    
    return function(method,url,callback,postData){
        var http = getXHR();
        console.log("send url is:" + url);
        http.open(method,url,true);
        handleReadyState(http,callback);
        http.send(postData || null);
    }
})();

Function.prototype.method = function(name,fn){
    this.prototype[name] = fn;
    return this;
}

if(!Array.prototype.forEach){
    Array.method("forEach",function(fn,thisObj){
        var scope = thisObj || window;
        for(var i = 0, len = this.length;i<len;i++){
            fn.call(scope,this[i],i,this);
        }
    })
}

if(!Array.prototype.filter){
    Array.method("filter",function(fn,thisObj){
        var scope = thisObj || window;
        var a  = [];
        for(var i = 0 , len = this.length;i<len;i++){
            if(fn.call(scope,this[i],i,this)){
                a.push(this[i]);
            }
        }
        return a;
    })
}


/******************************************/
window.DED = window.DED || {};
DED.util = DED.util || {};
DED.util.Observer = function(){
    this.fns = [];
}
DED.util.Observer.prototype = {
    subscribe:function(fn){ //签署
        this.fns.push(fn);
    },
    unsubscribe:function(fn){
        this.fns = this.fns.filter(function(item){
            if(item != fn){
                return item;
            }
        });
    },
    fire:function(o){
        this.fns.forEach(function(item){
            item(o);
        });
    }
}

DED.Queue = function(){
    this.queue = [];
    this.onComplete = new DED.util.Observer();
    this.onFailure = new DED.util.Observer();
    this.onFlush = new DED.util.Observer();
    
    this.retryCount = 3;
    this.currentRetry = 0;
    this.paused = false;
    this.timeout = 5000;
    this.conn = {};
    this.timer = {};
};

DED.Queue.method("flush",function(){
    if(!this.queue.length >0){
        return ;
    }
    if(this.paused){
        this.paused = false;
        return;
    }
    
    var that = this;
    this.currentRetry++;
    var abort = function(){
        that.conn.abort();
        if(that.currentRetry == that.retryCount){
            that.onFailure.fire();
            that.currentRetry = 0;
        }else{
            that.flush();
        }
    };
    
    this.timer = window.setTimeout(abort,this.timeout);
    var callback = function(o){
        window.clearTimeout(that.timer);
        that.currentRetry = 0;
        that.queue.shift();
        that.onFlush.fire(o.responseText);
        if(that.queue.length == 0){
            that.onComplete.fire();
            return;
        }
        that.flush();
    };
    
    this.conn = asyncRequest(this.queue[0]["method"],this.queue[0]["url"],callback,this.queue[0]["params"]);
    }).
    method("setRetryCount",function(count){
        this.retryCount = count;
    }).
    method("setTimeout",function(time){
        this.timeout = time;
    }).
    method("add",function(o){
        this.queue.push(o);
    }).
    method("pause",function(){
        this.paused = true;
    }).
    method("dequeue",function(){
        this.queue.pop();
    }).
    method("clear",function(){
        this.queue = [];
    });

对应的html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{font:100% georgia,times,serif}
            h1,h2{font-weight: normal;}
            #queue-items{height:1.5rem;}
            #add-stuff{padding:0.5rem; background:#ddd; border:1px solid #bbb;}
            #result-area{padding:0.5rem; border: 1px solid #bbb;}
        </style>
    </head>
    <body id="exmapl">
        <div id="doc">
            <h1>Ajax Conection Queue</h1>
            <div id="queue-items"></div>
            <div id="add-stuff">
                <h2>Add Requests to Queue</h2>
                <ul id="adders">
                    <li><a href="#" id="action-01">add 01 to Queue</a></li>
                    <li><a href="#" id="action-02">add 02 to Queue</a></li>
                    <li><a href="#" id="action-03">add 03 to Queue</a></li>
                    <li><a href="#" id="action-04">add 04 to Queue</a></li>
                </ul>
            </div>
            <h2>oTther Queue actions</h2>
            <ul id="items">
                <li><a href="#" id="flush">Flush</a></li>
                <li><a href="#" id="dequeue">dequeue</a></li>
                <li><a href="#" id="pause">pause</a></li>
                <li><a href="#" id="clear">clear</a></li>
            </ul>
            
            <div id="result-area">
                <h2>Results:</h2>
                <div id="results"></div>
            </div>
        </div>
    </body>
</html>
<script type="text/javascript" src="Bridge.js"></script>
<script>
    window.onload = function(){
        var q = new DED.Queue();
        q.setRetryCount(5);
        q.setTimeout(3000);
        
        
        var items = document.getElementById("items");
        var queue = document.getElementById("queue-items");
        var requests = [];
        q.onFlush.subscribe(function(data){
            results.innerHTML = data;
            requests.shift();
            queue.innerHTML = requests.toString();
        });
        q.onFailure.subscribe(function(){
            results.innerHTML += "<span style='color:red;'>Connection error</span>";
        });
        
        q.onComplete.subscribe(function(){
            results.innerHTML += "<span style='color:green;'>Completed!</span>";
        });
        
        var actionDispatcher = function(element){
            switch(element){
                case "flush":
                    q.flush();
                    break;
                case "dequeue":
                    requests.pop();
                    queue.innerHTML = requests.toString();
                    break;
                case "pause":
                    q.pause();
                    break;
                case "clear":
                    q.clear();
                    requests = [];
                    queue.innerHTML = "";
                    break;
            }
        };
        
        var addRequest = function(request){
            var data = request.split("-")[1];
            q.add({
                method:"GET",
                url:"http://127.0.0.1:8020/WS_WEB/JS%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/js/ajax.json?data=" + data,
                params:null
            });
            requests.push(data);
            queue.innerHTML = requests.toString();
        };
        
        items.onclick = function(e){
            var e = e || window.event;
            var src = e.target || e.srcElement;
            try{
                e.preventDefault();
            }catch(e){
                e.returnValue = false;
            }
            if(src.id){
                actionDispatcher(src.id);
            }
        };
        
        var adders = document.getElementById("adders");
        adders.onclick = function(){
            var e = e || window.event;
            var src = e.target || e.srcElement;
            if(e.preventDefault){
                e.preventDefault();
            }else{
                e.returnValue = false;
            }
            if(src.id)addRequest(src.id);
        }
        
    }
    
</script>