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

主要作用表现为将抽象与其实现隔离开来，以便二者独立化。
<!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. STM32的Flash

    STM32中存储区分为:随机存取存储器RAM和只读存储器ROM. 其中: RAM为常说的内存,比如手机的2G内存4G内存等,就是程序跑起来的时候所占用的存储空间,特点是掉电数据丢失. ROM为常说的硬 ...

  2. easyui combobox 设置值 顺序放在最后

    easyui combobox 设置值 顺序放在最后 如果设置函数.又设置选中的值,注意顺序, 设置值需要放到最后,否则会设置了之后又没有了: $('#spanId'+i).combobox(res) ...

  3. ReactNative之Flux框架的使用

    概述 流程图 项目结构 View Components actions Dispatcher Stores 感谢 概述 React Native 能够说非常火,非常多bat的项目都在使用.不用发版就能 ...

  4. Ubuntu系统下的Mysql安装与使用

    摘要 在本篇博文中.笔者将从基础出发.介绍Mysql在Linux环境下的安装和基本使用命令,仅适用于Mysql刚開始学习的人.大牛请绕道-- 安装Mysql数据库 这里介绍最最简单的安装方式,至于编译 ...

  5. vue9 计算属性 computed

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. SOAPUI使用

    简介:在开发接口的时候每次验证接口是否正确都需要手动写测试DEMO来验证,使用SOAPUI可以大大减少测试时间. 目录 1.SOPUI介绍... 1 2.SOAPUI使用... 1 2.1新建SOAP ...

  7. AtCoder Beginner Contest 067 C - Splitting Pi

    C - Splitting Pile Time limit : 2sec / Memory limit : 256MB Score : 300 points Problem Statement Snu ...

  8. C# DevExpress GridControl使用方法

    一.如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 二.如何新增一条记录 ().gridView.AddNe ...

  9. js预编译和函数执行

    javascript 执行过程 1.语法检测(有没有基本的语法错误,例如中文,关键字错误...)2.词法分析(预编译) (1)创建全局GO(global object)对象 (2)对var声明的变量进 ...

  10. BZOJ2636: crisis(可持久化线段树)

    传送门: 解题思路: 题目描述是一大坑点,cancel后面是直接加ask或者redo的. 那么就可以愉快地可持久化了. 注意需要支持区间修改,那么就只需要在再次更新这个点的时候将标记储存在新的儿子中. ...