桥接模式是一种既能把两个对象连接在一起，又能避免二者间的强耦合的方法。通过“桥”把彼此联系起来，同时又允许他们各自独立变化。

主要作用表现为将抽象与其实现隔离开来，以便二者独立化。
<!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桥模式的更多相关文章

  1. JavaScript高级---桥模式设计

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. 图文详解AO打印（端桥模式）

    一.概述   AO打印是英文Active-Online Print的简称,也称主动在线打印.打印前支持AO通讯协议的AO打印机首先通过普通网络与C-Lodop服务保持在线链接,网页程序利用JavaSc ...

  3. 图文详解AO打印（端桥模式）(转)

    一.概述   AO打印是英文Active-Online Print的简称,也称主动在线打印.打印前支持AO通讯协议的AO打印机首先通过普通网络与C-Lodop服务保持在线链接,网页程序利用JavaSc ...

  4. JavaScript---正则使用,日期Date的使用,Math的使用,JS面向对象(工厂模式,元模型创建对象,Object添加方法)

    JavaScript---正则使用,日期Date的使用,Math的使用,JS面向对象(工厂模式,元模型创建对象,Object添加方法) 一丶正则的用法 创建正则对象: 方式一: var reg=new ...

  5. 设计模式 - Bridge 桥模式

    Bridge桥模式也属于"的单一职责"模式中的典型模式.问题描述:我们绘制图形时,图形可以有不同形状以及不同颜色,比如圆形可以是红的,绿的,方形可以是红的绿的,如果用代码来描绘这些 ...

  6. Js 职责链模式 简单理解

    js 职责链模式 的简单理解.大叔的代码太高深了,不好理解. function Handler(s) { this.successor = s || null; this.handle = funct ...

  7. Bridge 桥模式

    之前一直以为桥是简单地沟通几个不同接口,使之能够按照一定流程工作.但重新查了一下解释,才有新解. 对于同一个产品的不同影响因子,如果使用继承的话,则这些影响因子则会按照M1*M2* ... Mn的数量 ...

  8. c++ 设计模式7 （Bridge 桥模式）

    4.2 Bridge 桥模式 动机: 由于某些类型的固有的实现逻辑,使得它们具有两个变化的维度,乃至多个变化的维度. 代码示例: 实现一个Messager,含有基本功能PlaySound,Connec ...

  9. 【转】EXT JS MVC开发模式

    原文链接:EXT JS MVC开发模式 在app(亦即根目录)文件夹下面创建controller.model.store和view文件夹,从名称上就知道他们该放置什么代码了吧.然后创建Applicat ...

随机推荐

  1. ECNUOJ 2573 Hub Connection plan

    Hub Connection plan Time Limit:1000MS Memory Limit:65536KB Total Submit:743 Accepted:180 Description ...

  2. ArcGIS api for javascript——合并两个ArcGIS Online服务

    描述 这个示例创建一个地图并ArcGIS Online增加连个图层到地图.ArcGIS Online是由ESRI体提供的一组切片地图服务,可以用来通过高质量的地图和数据增强应用.这个示例增加影像和运输 ...

  3. 目标跟踪--CamShift

    转载请注明出处! !! http://blog.csdn.net/zhonghuan1992 目标跟踪--CamShift CamShift全称是ContinuouslyAdaptive Mean S ...

  4. LVDS原理及设计指南

    LVDS是一种低摆幅的差分信号技术,它使得信号能在差分PCB 线对或平衡电缆上以 几百Mbps的速率传输,其低压幅和低电流驱动输出实现了低噪声和低功耗.       IEEE 在两个标准中对LVDS ...

  5. C++包含头文件时尖括号和双引号区别

    原文链接:http://c.biancheng.net/cpp/biancheng/view/66.html 如果你还看一些别的C++教程,那么你可能很早就发现了,有些书上的#include命令写作# ...

  6. SQL函数-str()

    1 str()函数用于将数值类型数据转换未字符类型. 2 str()函数语法 select str(数字类型的表达式[,表达式总长度][,小数点后面的位数]) 表达式总长度和小数点后面的位数为可选择参 ...

  7. 遇到的兼容性bug

    1.(IE6):ie6环境下,通过设置z-index:999:无效果: 原因:IE6下,决定层级高低的不是当前的父标签,而是整个DOM tree(节点树)的第一个relative属性的父标签. 解决办 ...

  8. 紫书 例题 9-1 UVa 1025 ( DAG的动态规划）

    影响到状态的只有时间和在哪个车站(空间),所以可以设f[i][j]是时刻i的时候在第j个车站的最少等待时间 因为题目中的等待时间显然是在0时刻1车站,所以答案为f[0][1],那么就提醒我们从大推到小 ...

  9. 今日SGU 5.13

    SGU 146 题意:就是给你一个长度为l的圈,然后你跑步,每一段给你时间t和速度v,问你最后离起点多远 收获:就是把浮点数转为整数,然后但是会出现精度误差,比如l最多四位小数,那你就加0.00001 ...

  10. XML解析——DOM解析

    XML:可扩展性标记语言,主要用来传输和存储数据,相对于HTML的各种标签规范,XML的标签可以让用户根据语义自己进行定义,适用于web传输. JSON和XML的区别: (1).XML定义 扩展标记语 ...