《JavaScript设计模式》笔记之外观模式

最新推荐文章于 2024-02-09 11:07:39 发布

Posden

最新推荐文章于 2024-02-09 11:07:39 发布

阅读量93

点赞数

分类专栏： JavaScript设计模式文章标签： JavaScript JavaScript 设计模式外观模式

本文链接：https://blog.csdn.net/weixin_44420276/article/details/99002040

版权

JavaScript设计模式专栏收录该内容

10 篇文章 0 订阅

订阅专栏

外观模式：为一组复杂子系统接口提供一个更高级的同一接口，通过这个接口使得对子系统接口的访问更容易。

添加一个点击事件

为页面文案document对象绑定了一个click文件事件来实现隐藏提示框的交互功能

document.onclick = function(e){
    e.preventDefault();
    if(e.target !== document.getElementById('xxx')){
        hidePageAlert()
    }
}

function hidePageAlert(){
    
}

DOM0就是直接通过 onclick写在html里面的事件
DOM2是通过addEventListener绑定的事件, 还有IE下的DOM2事件通过attachEvent绑定;

不足：如果说有别的程序员写了类似的方法，可能会覆盖，导致不起作用，加上可能浏览器兼容性问题。

兼容方式

定义一个统一接口方法，简化我们对复杂的底层接口不统一的使用需求。

封装方法和使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button id="mybtn">
        测试
    </button>
    <script>
        function addEvent(dom, type, fn) {
            if (dom.addEventListener) {
                dom.addEventListener(type, fn, false);//false- false- 默认。事件句柄在冒泡阶段执行
            } else if (dom.addEvent) {
                dom.attachEvent('on' + type, fn) //ie
            } else {
                dom['on' + type] = fn;
            }
        }

        var myDom = document.getElementById('mybtn')
        addEvent(myDom, 'click', function () {
            alert(1)
        })
    </script>
</body>

</html>

同样的e.preventDefault和e.target的问题

// 获取事件对象
var getEvent= function(event){
    return event || window.event  //ie返回window.event
}

//获取元素
var getTarget = function(event){
    var event = getEvent(event);
    return event.target || event.srcElement;
}

//阻止默认行为

var preventDefault = function(event){
    var event = getEvent(event);
    if(event.preventDefault){
        event.preventDefault()
    }else{
        event.returnValue = false
    }
}

document.onclick = function(e){
    preventDefault(e);
    if(getTarget(e) !== document.getElementById("xx")){
        //...
    }
}

小型代码库

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <p id="p">sssss</p>
    <script>
        var A = {
            g: function (id) {
                return document.getElementById(id)
            },
            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
            }
        }
        A.css("p","color",'red');
        A.attr("p","className",'box');
        A.on('p','click',function(){
            A.css('p','width','200px')
        })

    </script>
</body>

</html>