js---25桥模式

桥接模式是一种既能把两个对象连接在一起,又能避免二者间的强耦合的方法。通过“桥”把彼此联系起来,同时又允许他们各自独立变化。
主要作用表现为将抽象与其实现隔离开来,以便二者独立化。
<!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>
时间: 2024-08-04 03:33:49

js---25桥模式的相关文章

c++ 设计模式7 (Bridge 桥模式)

4.2 Bridge 桥模式 动机: 由于某些类型的固有的实现逻辑,使得它们具有两个变化的维度,乃至多个变化的维度. 代码示例: 实现一个Messager,含有基本功能PlaySound,Connect等,并有PC.Mobile不同的平台实现 和 精简.完美等不同业务功能的版本 实现方法1: Bridge1.cpp 类的个数:1 + n + m*n,数量巨大且不同类之中有大量重复 重构见方法2 1 class Messager{ 2 public: 3 virtual void Login(st

Java设计模式——桥模式

概述 桥模式(Bridge)是为了解决将抽象部分与实现部分分离,好让他们都在自己的维度上有多维度地变化.这句话是好理解的,只是我在学习完桥模式之后,存在一些疑问,还好现在想通了.现在我就桥模式的设计思想和我的疑问一并发出,希望于你有益. 版权说明 著作权归作者所有. 商业转载请联系作者获得授权,非商业转载请注明出处. 本文作者:Coding-Naga 发表日期: 2016年3月31日 本文链接:http://blog.csdn.net/lemon_tree12138/article/detail

js设计模式——桥接模式

定义:将抽象化(Abstraction)与实现化(Implementation)脱耦,使得二者可以独立地变化. 常用场景:在js中,桥接模式常用于事件监听器和ajax请求的解耦,以便于进行单元测试. 举个栗子 普通方法. var btn=$('#btn'); btn.on('click',function () { $.ajax({ url:'test.html', data:{ id:this.id }, dataType:'html', success:function(data){ con

图文详解AO打印(端桥模式)

一.概述 AO打印是英文Active-Online Print的简称,也称主动在线打印.打印前支持AO通讯协议的AO打印机首先通过普通网络与C-Lodop服务保持在线链接,网页程序利用JavaScript语句向打印机输出复杂内容. 相比于传统网络打印,打印机由被动链接变为主动链接,这种部署的优势很明显,既可以外网异地打印,也可以内外网本地打印,对打印两端的网络位置无要求,从而轻松实现广域网远程打印,手机.平板打印问题也一举搞定.鉴于当前宽带普及,加之云服务器租金越来越便宜,这都为AO打印的流行创

【node.js】本地模式安装express:&#39;express&#39; 不是内部或外部命令,也不是可运行的程序或批处理文件。

今天闲来无事想起了node.js,因此到网上下载了一个node.js的安装程序进行安装.其中: 安装程序:node-v0.11.13-x64.msi PC系统:Windows 7 自定义安装路径:D:\TOOLS\NodeJs 安装完成后,执行: D:\TOOLS\NodeJs>node -v v0.11.13 安装框架express,从网站上下载了一个安装文档,说安装express可分全局模式和本地模式,个人觉得全局模式就是默认的没什么意思,就选择本地模式进行安装,执行: D:\TOOLS\N

【转】EXT JS MVC开发模式

原文链接:EXT JS MVC开发模式 在app(亦即根目录)文件夹下面创建controller.model.store和view文件夹,从名称上就知道他们该放置什么代码了吧.然后创建Application.js作为我们程序的入口文件,并在mvc.html中引用Application.js文件.目录结构-->app(根目录)------>controller------>model------>store------>view------>application.js(

Bridge Design Pattern (桥模式)

桥模式的核心思想在于:抽象和行为分离. 在JDON里面,板桥里人举的例子是咖啡(抽象)与加奶(行为)的关系.原文(http://www.jdon.com/designpatterns/bridge.htm) 意思比较清晰,比如说,按照排列组合关系,大杯咖啡,小杯咖啡,和是否加奶,能够组成四种组合:大杯加奶,小杯加奶,大杯不加奶,小杯不加奶,如果再加一种行为进去,比如加巧克力,或者加方糖什么的,势必会出现更多的组合.如果为每一种组合创造一种对象,会造成对象过多代码混乱的状况. 还有很多例子阐述类似

Java桥模式(Bridge模式)

Bridge定义:将抽象和行为划分开来,各自独立,但能动态的结合. 为什么使用桥模式 通常,当一个抽象类或接口有多个具体实现(concrete subclass),这些concrete之间关系可能有以下两种: 这多个具体实现之间恰好是并列的,如前面举例,打桩,有两个concrete class:方形桩和圆形桩:这两个形状上的桩是并列的,没有概念上的重复,那么我们只要使用继承就可以了. 实际应用上,常常有可能在这多个concrete class之间有概念上重叠.那么需要我们把抽象共同部分和行为共同

js中State模式的解析及运用

 状态模式,在大的范畴中的定义为当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类.每种编程语言有不同的实现方式,运用的范围也多用于游戏之中. 这里我用javascript来模拟状态模式,主要思想是通过事件监听的效果来控制一个主要对象的状态.那么何为事件监听的效果呢?在其他语言中,可以通过多个对象的协作来完成状态模式,而我在javascript中可以通过对DOM节点进行事件操控来传递消息,使主要对象接收消息(当然不同状态接收到的消息所产生的反应是不一样的).而在javascr