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

主要作用表现为将抽象与其实现隔离开来，以便二者独立化。
<!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. 2014 CodingTrip - 携程编程大赛 （预赛第一场）

    1001: 可以证明(扩展欧几里得),只要卡片中有两个卡片互素,旁边点就是可达的. 因此只需要算出所有卡片不互素的情况有多少种,可用容斥原理. #include <cstdio> #inc ...

  2. MyBatis学习总结（17）——Mybatis分页插件PageHelper

    如果你也在用Mybatis,建议尝试该分页插件,这一定是最方便使用的分页插件. 分页插件支持任何复杂的单表.多表分页,部分特殊情况请看重要提示. 想要使用分页插件?请看如何使用分页插件. 物理分页 该 ...

  3. 配置TL-WVR45G企业路由动态地址

    1.打开浏览器,在地址栏输入http://192.168.1.1. 2.输入默认用户名密码:admin,登录. 3.[基本设置]->[lan设置]->[lan设置]  ip地址改成:192 ...

  4. ubuntu下安装RemixOS双系统(Android x86)

    这篇文章主要讲在怎样在ubuntu下安装RemixOS pc版(Android x86版本号),下面两种做法的思路都适合安装不论什么版本号的Android x86版本号到ubuntu系统上,仅仅须要改 ...

  5. QThread 爬坑之旅（三种办法解决QObject: Cannot create children for a parent that is in a different thread）

    Cannot create children for a parent that is in a different thread. 在Qt的官方文档,大家知道有两种方式使用QThread. You ...

  6. lightoj--1043-- Triangle Partitioning （水题）

    Triangle Partitioning Time Limit: 500MS   Memory Limit: 32768KB   64bit IO Format: %lld & %llu S ...

  7. P1824 进击的奶牛

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

  8. WCF项目启动时错误处理

    1. 原因:启动有wcf服务的项目时,报错,是因为wcf的服务没有启动. 解决办法:启动wcf的服务端口,127.0.0:4000,错误消失.

  9. excel导入数据的

    .aspx 文件 <form id="form1" runat="server"> <div> <asp:FileUpload I ...

  10. DEDECMS教程：列表页缩略图随机调用

    如果用过DEDECMS的朋友应该都知道,有些模板列表页面需要用到缩略图,调用内容中的缩略图可以使用系统自带的脚本调用第一张图片.但是,并不是我们所有的内容里都有图片,有时候第一张图片也不一定是适合尺寸 ...