<!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. sql 批量操作（存在的更新，不存在的插入）

    标签: sql 2012-09-06 18:13 2408人阅读 评论(0) 收藏 举报 分类: Sql Server(123) 版权声明:本文为博主原创文章,未经博主允许不得转载. update A ...

  2. 理解C#系列 / 核心C# / 变量

    变量 变量? 变量是对一个东西指定一个名称,变量的功能和人的名字差不多,提到名字就知道指的是什么. 变量类型? 变量类型说明了变量的类型,声明变量是一个整数,还是小数,还是字符,或是图像,或是人类,或 ...

  3. C语言算法系列---1.队列和栈

    写在前面:在家玩了好久,实在是不知道干嘛了,突然想找些事做,现在是时候做些什么了.这些东西不见得多高深,也可能很简单,但很基础,也无法忽视.同时,也是自己学习走过的一条路. 这是开头,就写写C的队列和 ...

  4. mysql数据库的简单操作

    首先进入mysql:mysql -u root -p 1.建库: create database 库名称; 例如:create database mydata;(创建一个名为“mydata”的库): ...

  5. Javascript this 解析

    Javascript中,this是一个非常有用的关键字, this是在运行时基于函数的运行环境绑定的,但是,如果使用的时候不注意,很容易就出错了. ECMAScript Standard对this的定 ...

  6. silverlight 生成二维码

    MainPage.xaml <Grid x:Name="LayoutRoot" Background="White"> <Border Bor ...

  7. curl 报错记录，mark

    今天在做接口开发的时候,使用curl post ,请求返回数据为 null ,很纳闷,然后使用 curl_errno 打印出来的错误代码为 28 ,curl_error($ch) 打印出来的是Oper ...

  8. Debian7系统安装配置手册

    一.安装系统 系统版本:Debian7 参考资料:http://www.myhack58.com/Article/48/66/2013/39802.htm 二.配置源 vi /etc/apt/sour ...

  9. JS遇到的问题解决

    1.input 里使用onclick事件,整整花了1个半小时,onclick里面直接用Location.href不需要加<script></script> <?php / ...

  10. .Net码农学Android---系统架构和基本概念

    至此,你应该已经完成以下前期准备事情: 1.安装完JDK 2.安装完SDK(并在Manager中进行相关版本的更新) 3.相关IDE(如eclipse) 4.安装完ADT 5.安装完AVD(如果你是真 ...