桥接(bridge)模式

 

 

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>3桥接(bridge)模式</title>
    </head>
    <body>
        <div id='div1'>asdasf</div>
        <button id='myTime'>点击开始加载ajax</button>
        <script type="text/javascript">
/*
 * 桥梁模式可以用来弱化它与使用它的类和对象之间的耦合,就是将抽象与其实现隔离开来,以便二者独立变化;
 * 这种模式对于JavaScript中常见的时间驱动的编程有很大益处,桥梁模式最常见和实际的应用场合之一是时间监听器回调函数。先分析一个不好的示例:
 */
            var element = document.getElementById('div1');
            element.onclick = function(){
                new setLogFunc();
            }
/*
 * 为什么说这个示例不好,因为从这段代码中无法看出那个LogFunc方法要显示在什么地方,它有什么可配置的选项以及应该怎么去修改它。
 * 换一种说法就是,桥梁模式的要诀就是让接口“可桥梁”,实际上也就是可配置。把页面中一个个功能都想象成模块,接口可以使得模块之间的耦合降低。
 * 掌握桥梁模式的正确使用收益的不只是你,还有那些负责维护你代码的人。把抽象于其实现隔离开,可独立地管理软件的各个部分,bug也因此更容易查找。
 * 桥梁模式目的就是让API更加健壮,提高组件的模块化程度,促成更简洁的实现,并提高抽象的灵活性。一个好的示例:
 */
            element.onclick = function(){  //API可控制性提高了,使得这个API更加健壮
                new someFunction(element,param,callback);
            }
/*
 * 注:桥梁模式还可以用于连接公开的API代码和私有的实现代码,还可以把多个类连接在一起。
 * 在文章封装介绍的部分提到过特权方法,也是桥梁模式的一种特例。《JS设计模式》上找的示例,加深大家对这个模式的理解:
 *  1   //错误的方式
 2   //这个API根据事件监听器回调函数的工作机制,事件对象被作为参数传递给这个函数。本例中并没有使用这个参数,而只是从this对象获取ID。
 3   addEvent(element,'click',getBeerById);
 4   function getBeerById(e){
 5      var id = this.id;
 6      asyncRequest('GET','beer.url?id=' + id,function(resp){
 7         //Callback response
 8         console.log('Requested Beer: ' + resp.responseText);
 9      });
10  }
 */            
            //补全stz+:
            var XMLHttpFactory = function(){};
            XMLHttpFactory.prototype = {
                createFactory:function(){
                    throw new Error('This is an abstract class');
                }
            }
            var XHRHandler = function(){
                XMLHttpFactory.call(this);
            }
            XHRHandler.prototype = new XMLHttpFactory();
            XHRHandler.prototype.constructor = XHRHandler;
            XHRHandler.prototype.createFactory = function(){
                var XMLHttp = null;
                if (window.XMLHttpRequest){
                    XMLHttp = new XMLHttpRequest();
                }else if (window.ActiveXObject){
                    XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                return XMLHttp;
            }
            XHRHandler.prototype.successful = function(req){
                if(req.readystate==4){//请求状态为4表示成功
                    if(req.status == 200)//http状态200表示OK
                    {
                        alert("返回成功: "+req.statusText);
                        Dispaly();
                        handle(req);
                        //所有状态成功,执行此函数,显示数据
                    } else //http返回状态失败
                    {
                        alert("服务端返回状态" + req.statusText);
                    }
                }
                else //请求状态还没有成功,页面等待 
                {
                    document.getElementById("myTime").innerHTML ="数据加载中"; 
                }
            }

            var asyncRequest = function(method, url, callback) {
                var insXHRHandler = new XHRHandler();
                var req = new XMLHttpRequest(); //insXHRHandler.createFactory();
                req.open(method, url+ '&_dc=' + new Date().getTime(), true); // + '&_dc=' + new Date().getTime():去ajax缓存
                req.onreadystatechange = function(){
                    if(req.readyState==4){//请求状态为4表示成功  // 居然错在 readyState。 s是大写!!!!!!!!
                        if(req.status == 200)//http状态200表示OK
                        {
                            //alert("返回成功: "+req.statusText);
                            Dispaly(req);
                            callback(req.responseText);
                            console.log("返回成功: "+req.responseText);
                            console.log("eval(req.responseText).responseText1: "+ eval(req.responseText).responseText1);
                            //所有状态成功,执行此函数,显示数据
                        } else //http返回状态失败
                        {
                            alert("服务端返回状态" + req.statusText);
                        }
                    }
                    else //请求状态还没有成功,页面等待 
                    {
                        document.getElementById("myTime").innerHTML ="数据加载中"; 
                    }
                }
                req.send(null); //发送请求 
            }
            function Dispaly(req) //接受服务端返回的数据,对其进行显示 
            {
                document.getElementById("myTime").innerHTML = req.responseText;
            }

            var addEvent = function(el,method,handle,bubble){
                if(el.addEvent){
                    el.addEvent('on'+method, handle);
                }else{
                    el.addEventListener(method, handle, !bubble?false:true);
                }
            }

            //好的方式
            //从逻辑上分析,把id传给getBeerById函数式合情理的,且回应结果总是通过一个回调函数返回。这么理解,我们现在做的是针对接口而不是实现进行编程,用桥梁模式把抽象隔离开来。
            // var xhr = new Ajax('response.js', 'GET', '', function(resp) {
                // document.getElementById('myTime').innerHTML =  eval(resp).responseText1; //typeof(eval(resp));
            // });
            // xhr.callServer();

            function getBeerById(id,callback){
                asyncRequest('GET','http://localhost:8082/jsTest2/designMode/response.js?id=' + id,function(resp1){
                    console.log('resp1 in getBeerById: ' + resp1);
                    callback(resp1);
                });

            }
            addEvent(document.getElementById('myTime'),'click',getBeerByIdBridge);
            function getBeerByIdBridge(e){
                getBeerById(this.id,function(beer){
                    console.log('Requested Beer: ' + beer);
                    console.log('Requested Beer2: ' + eval(beer).responseText1);
                });
            }
            /*
             * 自己总结: getBeerByIdBridge就是接口,通过这个接口作为桥梁,调用真正的实现:getBeerById
             * 且传入回调函数,这函数还有个特点:参数就是真正实现函数里的返回结果的一个封装resp.responseText
             * 不难看出 asyncRequest也是个真正的实现函数,这时getBeerById就是桥了。。。桥接。
             * 为了补全上面的例子:补全stz+:
             */

            //
        </script>
    </body>
</html>
 

 

 

 

response.js:

 

 

({responseText1:"测试1234adwf........."})
 

参考:

http://download.csdn.net/detail/nanlinfeixue/4203989#comment

http://blog.csdn.net/andy_sue/article/details/6739068

http://blog.csdn.net/sunxing007/article/category/534077

 

 

计划修改:

ajax改成jsonp跨域的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值