设计模式知识连载（19）---外观模式:

来源：互联网发布：软件企业认证年限编辑：程序博客网时间：2024/05/17 01:11
<body><h3>设计模式知识连载（19）---外观模式:</h3><p>    外观模式：为一族复杂的子系统接口提供一个更高级的统一接口，    通过这个接口使得对子系统接口的访问更容易。</p><div id = 'myinput' style="border: 1px solid red">测试点击</div><br><hr><br><div id = 'box'></div><script type="text/javascript">    /**    *   案例，方式一：初始    */    // //点击事件    // document.onclick = function (e) {    //  e.preventDefault() ;    //  if(e.target !== document.getElementById('myinput')) {    //      hidePageAlert() ;    //  }    // } ;    // function hidePageAlert(){    //  // 隐藏提示框    //  console.log('执行了hidePageAlert函数') ;    // } ;    /**    *   案例，方式二：外观模式    */    // 外观模式实现    var addEvent = function(dom, type, fn) {        // 对于支持DOM2级事件处理程序addEventListener方法的浏览器        if(dom.addEventListener){            dom.addEventListener(type, fn, false) ;        // 对于不支持addEventListener方法但支持attachEvent方法的浏览器          }else if(dom.attachEvent) {            dom.attachEvent('on' + type, fn) ;        // 对于不支持addEventListener方法也不支持attachEvent方法，        // 但支持on+'事件名'的浏览器        }else{            dom['on' + type] = fn ;        }    } ;    // 获取事件对象    var getEvent = function(event) {        // 标准浏览器返回event,IE返回window.event        return event || window.event ;    } ;    // 获取元素    var getTarget = function(event) {        var event = getEvent(event) ;        // 标准浏览器下event.target,IE下event.srcElement        return event.target || event.srcElement ;    } ;    // 阻止默认行为    var preventDefault = function(event) {        var event = getEvent(event) ;        // 标准浏览器        if(event.preventDefault) {            event.preventDefault() ;        // IE浏览器        }else{            event.returnValue = false ;        }    }    // 测试用例：    var myInput = document.getElementById('myinput') ;    addEvent(myInput, 'click', function() {        console.log('绑定的第一个事件') ;    }) ;    addEvent(myInput, 'click', function() {        console.log('绑定的第二个事件') ;    }) ;    addEvent(myInput, 'click', function() {        console.log('绑定的第三个事件') ;    }) ;    addEvent(document, 'click', function(e) {        // 阻止默认行为        preventDefault(e) ;        // 获取事件源目标对象        if(getTarget(e) !== myinput) {            hidePageAlert() ;        }    }) ;    function hidePageAlert(){        // 隐藏提示框        console.log('执行了hidePageAlert函数') ;    } ;    /******    *   小型代码库    *   【简约版属性样式方法库】        ******/    var GP = {        // 通过id获取元素        g : function(id) {            return document.getElementById(id) ;        },        // 设置元素css属性        css : function(id, key, value) {            this.g(id).style[key] = value ;        },        // 设置元素的属性        attr : function(id, key, value) {            this.g(id)[key] = value ;        },        html : function(id, html) {            this.g(id).innerHTML = html ;         },        // 为元素绑定事件        on : function(id, type, fn){            this.g(id)['on' + type] = fn ;        }     } ;    var box = GP.g('box') ;    // 测试方法库    GP.css('box', 'background', 'red') ;    GP.attr('box', 'className', 'box') ;    GP.html('box', '这是通过方法库添加的内容') ;    GP.on('box', 'click', function() {        GP.css('box', 'width', '500px') ;    }) ;    box.className += ' box2' ;  //在原来的基础上新增</script>   </body>
阅读全文
0 0