<!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. 【学习笔记】虚拟机安装Mac系统

    参考了这篇装的虚拟机 http://jingyan.baidu.com/article/ff411625b9011212e48237b4.html 系统的话可以到远景去找找 安装用工具: http:/ ...

  2. CSS3/jQuery创意盒子动画菜单

    作为前端开发者,各种各样的jQuery菜单见过不少,这款jQuery/CSS3菜单却是别具一格,菜单项嵌入到九宫格中,像小盒子一样,加上温馨的背景,菜单整体外观十分可爱.点击菜单项,盒子就会展开,展示 ...

  3. Azure + vsftpd + ubntu14 + 虚拟用户 遇到的问题：从网上摘抄

    :在Azure安装好ubuntu虚拟机,安装包选择ubuntu14.04 LTS,选择LTS,以便微软对其以后的更好支持,不选就可能技术支持不会很久,现只开一台,端口默认选择22 :打开虚拟机,进入端 ...

  4. [Apache] 2.2与2.4版本在设置虚拟域名时的小差别

    Apache服务器配置虚拟步骤: 1.在httpd.conf中将附加配置文件httpd-vhosts.conf包含进来,接着在httpd-vhosts.conf中写入如下配置: #LoadModule ...

  5. 锋利的jquery-DOM操作

    1 查找节点 ① 可根据jquery选择器来完成节点查找 ② 可用.text()获取节点的文本内容 ③ 可用.attr("attr")获取属性value 2 创建节点 ① 可用jq ...

  6. ros-Qt代码环境的搭建

    1 建立package catkin_create_pkg beginner_tutorials roscpp 2 导入Qt Qt中打开整个工作空间的src/CMakeLists.txt 在倒数第二行 ...

  7. 用户登录密码RSA加密后传输的实现，非明文密码传输

    在用户登录页面,用户输入密码后,在传送到服务器端时,为防止在密码传送过程中,被如360这种东东给拦截到, 需要在传送前对密码进行加密,然后再传送! 利用RSA加密,在客户端使用公钥对密码进行加密,在服 ...

  8. mac os去除去除.DS_Store文件--使用python和go（原创）

    .DS_Store (英文全称 Desktop Services Store)是一种由苹果公司的Mac OS X操作系统所创造的隐藏文件,目的在于存贮文件夹的自定义属性,例如文件们的图标位置或者是背景 ...

  9. WPF学习笔记1——XAML之1

    参考文献: http://msdn.microsoft.com/zh-cn/library/ms752059(v=vs.110).aspx <Pro WPF 4.5 in C# > 一.X ...

  10. Java eclipse export jar包 包括第三方引入的jar

    1.安装fatjar插件 2.export jar 说明:安装后,操作说明以官网为准,不同的版本会有不同的右键菜单,我的版本(Eclipse Java EE IDE for Web Developer ...