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

主要作用表现为将抽象与其实现隔离开来，以便二者独立化。
<!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. Unity C# 设计模式（四）抽象工厂模式

    定义: 提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类. 工厂方法模式针对的是一个产品等级结构:而抽象工厂模式针对的是多个产品等级结构. 抽象工厂模式使用同一个 工厂等级结构负责这 ...

  2. 【Codeforces Round #465 (Div. 2) C】Fifa and Fafa

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 这个x2,y2和圆心(x1,y1)相连.形成的直线和圆交于点(x3,y3) 则(x2,y2)和(x3,y3)的中点就是所求圆的圆心. ...

  3. 《Java并发编程实战》第五章 同步容器类 读书笔记

    一.同步容器类 1. 同步容器类的问题 线程容器类都是线程安全的.可是当在其上进行符合操作则须要而外加锁保护其安全性. 常见符合操作包括: . 迭代 . 跳转(依据指定顺序找到当前元素的下一个元素) ...

  4. Ext4.0 经常使用代码整理（一）

    一:经常使用工具条上的定义 // 工具条 var toolbar = Ext.create("Ext.Toolbar", {             items : [ yearC ...

  5. JsonRequestBehavior.AllowGet 方便浏览器调试

    [HttpGet] public ActionResult getCoversationList(int CustomerId) { // 获取用户相关的聊天数据,包括个人,群,系统(可以单独获取) ...

  6. Codeforces 344C Rational Resistance

    Description Mad scientist Mike is building a time machine in his spare time. To finish the work, he ...

  7. Android 设置屏幕不待机

    本文转载于:http://blog.csdn.net/yudajun/article/details/7748760 androidnullservice 目录(?)[+] 最近做项目时正好用到,进行 ...

  8. 织梦(dedecms)彩色标签云(tag)随机颜色和字体大小

    1.选择你所要加页面的模板,一般是在首页index.htm 加上如下代码 01 <!-- /下面开始tag标签云 --> 02 <dl class="tbox light& ...

  9. Vim插件使用技巧（转）

    在 IDEA Intellij小技巧和插件 一文中简单介绍了一下IdeaVim插件.在这里详细总结一下这个插件在日常编程中的一些常用小技巧.供有兴趣使用这个插件,但对Vim还不十分熟悉的朋友参考.当然 ...

  10. C#中一些字符串操作的经常使用使用方法

    概述 本篇主要解说,字符串string的基本操作知识 倒序输出 string str = Console.ReadLine(); for (int i = str.Length - 1; i > ...