zoukankan      html  css  js  c++  java
  • js---25桥模式

    桥接模式是一种既能把两个对象连接在一起,又能避免二者间的强耦合的方法。通过“桥”把彼此联系起来,同时又允许他们各自独立变化。
    主要作用表现为将抽象与其实现隔离开来,以便二者独立化。
    <!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>
  • 相关阅读:
    LeetCode:387字符串中唯一出现一一次的字符
    LeetCode-79. 单词搜索
    LeetCode-75. 颜色分类
    LeetCode-121. 买卖股票的最佳时机
    LeetCode-58. 最后一个单词的长度
    LeetCode-1103. 分糖果 II
    LeetCode:283. 移动零
    LeetCode:38. 外观数列
    LeetCode:70. 爬楼梯
    获取美拍视频的链接--JS分析
  • 原文地址:https://www.cnblogs.com/yaowen/p/6883639.html
Copyright © 2011-2022 走看看