<!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. 实例介绍Cocos2d-x开关菜单

    开关菜单是MenuItemToggle类实现的,它是一种可以进行两种状态切换的菜单.它可以通过下面的函数创建: static MenuItemToggle*createWithCallback  ( ...

  2. 10款免费CSS编辑器应对于Linux和Ubuntu

    您是否在使用Linux和Ubuntu的,不知道在哪里可以找到一些优秀且免费的CSS编辑器用于Linux和Ubuntu的?如果你的答案是肯定的,然后停止幻想,开始浏览这个帖子里,我们展示了前10名,并免 ...

  3. 7款震撼人心的HTML5CSS3文字特效

    1.HTML5像素文字爆炸重组动画特效 今天我们要分享一款基于HTML5技术的文字像素爆炸重组动画特效,我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式 ...

  4. bzoj 1042 HAOI2008 硬币购物

    这道题思路是在是神. 先dp出没有限制时候的方案数. dp的时候注意 先循环 1..4 再循环 1..maxs 防止重复.边界是f[0] = 1. 这么基础的背包都忘记了=_= 接下来处理有重复的问题 ...

  5. 字节的高低位知识，Ascii,GB2312,UNICODE等编码的关系与来历

    很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同的状态,以表示世界上的万物.他们看到8个开关状态是好的,于是他们把这称为"字节". 再后来,他们又做了一些可以处理 ...

  6. [大牛翻译系列]Hadoop（13）MapReduce 性能调优：优化洗牌（shuffle）和排序阶段

    6.4.3 优化洗牌(shuffle)和排序阶段 洗牌和排序阶段都很耗费资源.洗牌需要在map和reduce任务之间传输数据,会导致过大的网络消耗.排序和合并操作的消耗也是很显著的.这一节将介绍一系列 ...

  7. QA如何增强网站建设公司竞争力

    在上一篇文章<QA在网站建设公司中的作用>中我们已经详细说了QA的作用,不过有一点没有明确说明,也就是只有在超高速发展的网站建设公司中才会充分体现QA的价值.这并不是说在发展稳定的公司或低 ...

  8. 亚马逊左侧导航（jquery.menuaim.js）

    jquery.menuaim.js     主菜单 <div class="active"> <ul class="dropdown-menu" ...

  9. js学习笔记一-语法结构

    js是区分大小写的,关键字.变量.函数名和所有的标识符都必须采取统一一致的大小写形式. js定义了unicode转义序列,以\u开头,其后跟随四个十六进制数,可以在字符串直接量.正则表达式直接量和标识 ...

  10. jdbc连接数据库使用sid和service_name的区别

    问题描述: ORA-12505, TNS:listener does not currently know of SID given in connect descriptor The Connect ...