JS设计模式--桥模式

桥模式:主要作用就是把抽象和现实分离开来，使他们可以完全独立变化

下面用三个应用实例来实现桥模式：

应用场景一：事件监听回调机制（用户点击一个按钮，向服务器端发送信息）(开头要先链接CommonUtil.js和jquery-1.8.0.min.js这两个文件)

   // classic 传统模式  前台和后台耦合在一起 一定要前台点击了才会调用后台
        // $(function(){   //jQuery方法 
        //     //  1.前台业务逻辑：这一段代码处理前台的事件注册和绑定的
        //     var inp=document.getElementById('inp');  
        //     //   用事件注册的方式 像元素上添加事件
        //     BH.EventUtil.addHandler(inp,'click',sendReq);//直接调用后台函数


        //     // 2.后台业务逻辑：这一段代码处理后台发送请求的
        //     //  处理后台的函数
        //     function sendReq(){
        //         //ajax  //向服务器发送异步的post请求
        //         // 参数：后台服务器的地址，是一个对象或者一个字符串(参数),回调函数
        //         // $.post('URL',{msg:this.value},function(result){ //this指 inp
        //         //      //CallBack......处理
        //         // });  
        //         alert('发送了指定的数据到后台： '+this.value);
        //     }
        // });



       // 利用桥模式 把前台和后台这两个逻辑分开
        // $(function(){   //jQuery方法
        //     //  1.前台业务逻辑
        //     var inp=document.getElementById('inp');  
        //     //   用事件注册的方式 像元素上添加事件
        //     BH.EventUtil.addHandler(inp,'click',bridgeHandler); //把函数换成中转函数

        //     // 利用桥模式 分开（中转函数）
        //     function bridgeHandler(){
        //         var msg=this.value;  //把前台的数据获取到传给后台
        //         sendReq(msg);

        //     }


        //     // 2.后台业务逻辑
        //     //  处理后台的函数
        //     function sendReq(msg){
        //         //ajax  //向服务器发送异步的post请求
        //         // 参数：后台服务器的地址，是一个对象或者一个字符串(参数),回调函数
        //         // $.post('URL',{msg:this.value},function(result){ //this指 inp
        //         //      //CallBack......处理
        //         // });  
        //         alert('发送了指定的数据到后台： '+msg);
        //     }

        //     // 单元测试(不用通过前台就可以直接调用测试)，前后台就分离开了
        //     sendReq('我也是数据。。');

        // });

应用实例二：特权函数

       // 桥模式：应用实例二：特权函数
        // var PuplicClass=function(){
        //     // private variable
        //     var name='张三';  //私有变量
        //     // getName 访问私有变量
        //     this.getName=function(){   //对外方法==> 就是一个特权函数
        //         return name;
        //     };
        // };
        // var p1=new PuplicClass();
        // alert(p1.getName());


        // 所以说桥模式，就是可以独立开来 ，通过中转函数进行连接
        // var PuplicClass=function(){
        //     var privateMethod=function(){  //私有的方法
        //         alert('自己实行了一个很复杂的操作。。。');
        //     };

        //     // 单元测试 这个很复杂的函数
        //     privateMethod();//可以直接独立调用，与外界隔离开来

        //     //外部通过 特权函数 访问私有的方法
        //     this.brigeMethod=function(){
        //         return privateMethod();
        //     };
        // };
        // var p1=new PuplicClass();
        // p1.brigeMethod();

应用实例三：用桥把多个单体组织在一起

 // // 使每个单元度可以独立化，可以实现自己的变化
        // 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;
        // };
        // // 利用桥模式把Class1和Class2组织起来，并且他们也可以独立实现开发
        // var BrigeClass=function(a,b,c,d,e){
        //         this.class1=new Class1(a,b,c);
        //         this.class2=new Class2(d,e);
        // };

总结设计模式：不是说代码一定很复杂，主要逻辑，看思路。