<!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>桥设计模式</title>
        <!--
        @theme: javascript高级 桥模式设计
        @autor：EthanCoco
        @date：2015-11-21
        @email：lijianlin0204@163.com
        -->

        <!-- 引入的核心js公共文件 -->
        <script type=text/javascript charset=utf-8 src="jquery-1.8.0.min.js"></script>
        <script type=text/javascript charset=utf-8>
            //命名空间
            var LJL = {};
            //单体模式 跨浏览器事件处理
            LJL.EventHandler = {
                addHandler : function(element,type,handle){
                    if(element.addEventListener){        //狐火
                        element.addEventListener(type,handle,false);
                    }else if(element.attachEvent){        //IE
                        element.attachEvent('on'+type,handle,false);
                    }
                },
                removeHandler : function(element,type,handle){
                    if(element.addEventListener){
                        element.addEventListener(type,handle,false);
                    }else if(element.attachEvent){
                        element.attachEvent('on'+type,handle,false);
                    }
                }

            };

            // 桥接模式: 主要作用就是把抽象和现实分离开来，使他们可以完全独立变化

            // 应用场景：事件监听回调机制 (用户点击一个按钮,向服务器端发送信息)

            // 当页面加载完毕之后执行函数体
            /*
            //经典
            $(function(){
                // 1前台业务逻辑
                var ipn = document.getElementById('ipn');
                // 用事件注册的方式 在元素上添加事件
                LJL.EventHandler.addHandler(ipn,'click',sendMsg);

                //--------------------------------------------------
                // 2后台业务逻辑
                function sendMsg(){//处理后台的函数
                    alert(this.value);
                }

            })
            */

            // 利用桥模式 分开俩个业务逻辑单元
            $(function(){
                // 1前台业务逻辑 : 这一段代码处理前台的事件注册和绑定的
                var ipn = document.getElementById('ipn');
                // 用事件注册的方式 在元素上添加事件
                LJL.EventHandler.addHandler(ipn,'click',bridgeHandler);

                //--------------------------------------------------
                // 利用桥模式分开
                function bridgeHandler(msg){
                    var msg = this.value;
                    sendMsg(msg);
                }
                //--------------------------------------------------

                // 2后台业务逻辑  ：这一段代码处理后台发送请求的
                function sendMsg(msg){//处理后台的函数
                    alert(msg);
                }

                //单元测试
                sendMsg("I have getVlaue");

            });

            // 桥模式：特权函数
            var PublicClass = function(){
                //private variable
                var name = '张三';
                // 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>
    <input id=ipn type=button value="getValue"/>
    </body>
</html>

JavaScript高级---桥模式设计的更多相关文章

  1. JavaScript高级---组合模式设计

    一.设计模式 javascript里面给我们提供了很多种设计模式: 工厂.桥.组合.门面.适配器.装饰者.享元.代理.观察者.命令.责任链 在前面我们实现了工厂模式和桥模式 工厂模式 : 核心:为了生 ...

  2. JavaScript高级---门面模式设计

    门面模式 两个作用: 1.简化类的接口 2.消除类与使用它的客户代码之间的耦合 门面模式常常是开发人员最亲密的朋友.它几乎是所有javascript库的核心原则 门面模式的目的是为了让开发人员用更简单 ...

  3. JavaScript高级---装饰者模式设计

    一.设计模式 javascript里面给我们提供了很多种设计模式: 工厂.桥.组合.门面.适配器.装饰者.享元.代理.观察者.命令.责任链 在前面我们实现了工厂模式和桥模式 工厂模式 : 核心:为了生 ...

  4. javascript闭包(Module模式)的用途和高级使用方式

    javascript闭包(Module模式)的用途和高级使用方式 javascript闭包的用途:1. 匿名自执行函数:或者可以理解为,避免污染全局变量2. 缓存:源于闭包的核心特性便是保存状态,应用 ...

  5. JavaScript高级---适配器模式

    一.设计模式 javascript里面给我们提供了很多种设计模式: 工厂.桥.组合.门面.适配器.装饰者.享元.代理.观察者.命令.责任链 在前面我们实现了工厂模式和桥模式 工厂模式 : 核心:为了生 ...

  6. 《JavaScript高级程序设计》学习笔记(4)——引用类型

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第五章内容. 在ECMAScript中, ...

  7. javascript高级编程笔记01(基本概念)

    1.在html中使用JavaScript 1.  <script> 元素 <script>定义了下列6个属性: async:可选,异步下载外部脚本文件. charset:可选, ...

  8. 《Javascript高级程序设计》阅读记录（三）：第五章 上

    这个系列以往文字地址: <Javascript高级程序设计>阅读记录(一):第二.三章 <Javascript高级程序设计>阅读记录(二):第四章 这个系列,我会把阅读< ...

  9. JavaScript高级程序设计第三版.CHM【带实例】

    从驱动全球商业.贸易及管理领域不计其数的复杂应用程序的角度来看,说 JavaScript 已经成为当今世界上最流行的编程语言一点儿都不为过. JavaScript 是一种非常松散的面向对象语言,也是 ...

随机推荐

  1. spark写入Oracle 报错 java.lang.ArrayIndexOutOfBoundsException: -32423

    原因: oracle 10g的驱动执行的批量提交只支持32768个参数,如果表的字段多于32个,就会出现该异常 解决办法: 升级oracle的驱动版本,换成ojdbc6.jar

  2. jquery 和 js 对象转换

    核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S(’#id’ ...

  3. COM包装(COM Wrappers)

    为了实现传统的COM程序与.NET程序之间的相互调用,.NET提供了两个包装类:运行时可调用包装(runtime callable wrapper,RCW)和COM可调用包装(COM callable ...

  4. 基类和派生类--this

    基类指针在程序运行的时候的确指向的是一个派生类的对象,但指针的类型仍然是基类指针.C++是一种强类型语言,因此不能用基类指针类型的指针直接调用派生类:而且,同一个类可能有多种不同的派生类,因此不知道实 ...

  5. WEB-INF简介

    WEB-INF简介 WEB-INF是Java的WEB应用的安全目录.所谓安全就是客户端无法访问,只有服务端可以访问的目录. 如果想在页面中直接访问其中的文件,必须通过web.xml文件对要访问的文件进 ...

  6. CentOS学习笔记--基本命令--目录的相关操作

    Linux基本命令--目录的相关操作 常见的处理目录的命令吧: cd:变换目录 pwd:显示目前的目录 mkdir:创建一个新的目录 rmdir:删除一个空的目录 cd (变换目录) cd是Chang ...

  7. 学习CentOS7笔记(一)

    说明: 1.这是我第一次接触CentOS7,从基础学起. 2.最终目的是为了在CentOS上面部ngix+php+mysql+naxsi环境,进行安全测试. 第一部分 认识CentOS 7 有时候我在 ...

  8. css解决IE6、Chrome、ff 浏览器position:fixed;和闪动问题

    首先说下开发模式,刚刚开始接触,基本沿用web端开发方式,目前开发模式上没有找到的适合的,现在基本这样:1,电脑nginx配置服务器3,电脑和手机连同一个局域网,2,android root 和 ip ...

  9. WinForm 实现验证码

    private void CheckIdentifyingCode() { Random r = new Random(); string str = ""; for (int i ...

  10. 2013-07-23 IT 要闻速记快想

    ### ========================= ###苹果的新动向今天华尔街日报称,苹果正在测试13英寸的大号iPad,以及更大屏幕的iPhone.而早在五月份,韩国资讯网站 ET New ...