JavaScript高级---桥模式设计

<!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高级---桥模式设计

相关文章
