首页 > 代码库 > js---25桥模式

js---25桥模式

2024-09-23 20:12:49   214人阅读

桥接模式是一种既能把两个对象连接在一起，又能避免二者间的强耦合的方法。通过“桥”把彼此联系起来，同时又允许他们各自独立变化。
主要作用表现为将抽象与其实现隔离开来，以便二者独立化。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script type=text/javascript charset=utf-8 src=../commons/CommonUtil.js ></script>
        <script type=text/javascript charset=utf-8 src=../jquery/jquery-1.8.0.min.js ></script>
        <script>
        // 桥接模式: 把2部分分离开来，使他们可以完全独立使用，解耦，既能单独变化又能组织在一起。
         
              //$( function(){} )   $函数执行，并传入一个参数匿名function
        $(function(){
            var inp = document.getElementById(‘inp‘);
            //在元素上注册事件,inp.addEventListener(click,sendReq,false);
            BH.EventUtil.addHandler(inp,‘click‘,sendReq);
            //--------------------------------------------------
            // 后台业务逻辑
            function sendReq(){// 处理 后台的函数
                //$.post(‘URL‘,{msg:this.value},function(result){
                    // CallBack....
                //});
                alert(‘发送了指定的数据到后台：‘ + this.value);
            }
        });            
        
        
        
        // 利用桥模式 分开俩个业务逻辑单元
        $(function(){
            var inp = document.getElementById(‘inp‘);
            BH.EventUtil.addHandler(inp,‘click‘,bridgeHadler);
            
            function bridgeHadler(){
                var msg = this.value;
                sendReq(msg);
            }
            
            function sendReq(msg){// 处理后台的函数
                //$.post(‘URL‘,{msg:this.value},function(result){
                    // CallBack....
                //});
                alert(‘发送了指定的数据到后台：‘ + msg);
            }
            
            //单元测试的时候，后台可以直接做测试，不依赖于前台的输入，前面代码强依赖于前台的输入才能执行测试，前后台解耦。
            sendReq(‘我也是数据..‘);
        });                    
                
        </script>
    </head>
    <body>
        <input id=inp type=button value="我是数据.."  />
    </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script type=text/javascript charset=utf-8>
            // 桥模式：
            var PublicClass = function(){
                var name = ‘张三‘;//private variable
                // getter 访问私用成员变量 
                this.getName = function(){//原先变量只能在内部访问，现在可以在外部访问了，这就是桥模式
                    return name ; 
                };
            };
            var p1 = new PublicClass();
            alert(p1.getName());
            
            
            
            var PublicClass = function(){
                // 私用化的变量
                var privateMethod = function(){
                    alert(‘执行了一个很复杂的操作...‘);
                };
                // 单元测试这个很复杂的函数
                //privateMethod();
                this.bridgeMethod = function(){
                    return privateMethod();
                }
            };
            var p1 = new PublicClass();
            p1.bridgeMethod();
            
            
            
            // 桥模式： 使每个单元都能独立运行，又能组织在一起
            var Class1 = function(a,b,c){
                this.a = a ; 
                this.b = b ; 
                this.c = c ;
            };
            
            var Class2 = function(d,e){
                this.d = d ; 
                this.e = e ; 
            };
            
            var BridgeCalss = function(a,b,c,d,e){
                this.class1 = new Class1(a,b,c);
                this.class2 = new Class2(d,e);
            };
            //桥模式，可以起到桥的作用就可以了。整体分开或者组合在一起。
        </script>
    </head>
    <body>
    </body>
</html>

 

js---25桥模式


联系
我们