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

主要作用表现为将抽象与其实现隔离开来，以便二者独立化。
<!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. 一个Web报表项目的性能分析和优化实践(三) :提高Web应用服务器Tomcat的内存配置，并确认配置正确

    摘要 上一篇,一个Web报表项目的性能分析和优化实践(一):小试牛刀,统一显示SQL语句执行时间 ,讲述了项目优化的整体背景,重点讲述了统一显示了Web项目SQL语句的执行时间. 本篇,将重点介绍提高 ...

  2. Apache CXF实战之二 集成Sping与Web容器

    本文链接:http://blog.csdn.net/kongxx/article/details/7525481 Apache CXF实战之一 Hello World Web Service 书接上文 ...

  3. sql server 2000 自动收缩数据库大小

    转载.......http://mars968.blog.163.com/blog/static/7400033200941642356258/ SQLServer2000压缩日志及数据库文件     ...

  4. 洛谷 P1604 B进制星球

    P1604 B进制星球 题目背景 进制题目,而且还是个计算器~~ 题目描述 话说有一天,小Z乘坐宇宙飞船,飞到一个美丽的星球.因为历史的原因,科技在这个美丽的星球上并不很发达,星球上人们普遍采用B(2 ...

  5. 洛谷 P1824 进击的奶牛

    P1824 进击的奶牛 题目描述 Farmer John建造了一个有N(2<=N<=100,000)个隔间的牛棚,这些隔间分布在一条直线上,坐标是x1,...,xN (0<=xi&l ...

  6. 23 HBase 存储架构。

    个 Region,Region会下线,新Split出的2个子Region会被HMaster分配到相应的HRegionServer 上,使得原先1个Region的压力得以分流到2个Region上由此过程 ...

  7. swust oj 2516 教练我想学算术 dp+组合计数

    #include<stdio.h> #include<string.h> #include<iostream> #include<string> #in ...

  8. LVDS原理及设计指南

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

  9. vim 基础学习之文件跳转

    1. ''-当前文件上次跳转之前的位置2. '.-当前文件上次修改的位置,只要是发生了可能导致变化的命令操作就会被标记,哪怕实际结果没有变化3. '^-当前文件上次插入的位置,只要是发生了插入操作命令 ...

  10. 18. IDEA 添加 persistence 时没有 sessionFactory

    转自:http://www.voidcn.com/article/p-rryjfhwi-e.html IDEA 添加 persistence 时没有 sessionFactory 点击项目,然后F4 ...