JavaScript设计模式(八)【适配器模式】

最新推荐文章于 2025-01-11 21:44:24 发布

转载最新推荐文章于 2025-01-11 21:44:24 发布 · 173 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/WuLex

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

37 篇文章

订阅专栏

本文介绍了一个jQuery适配器的实现，用于在不同框架间进行事件绑定操作。通过适配器，可以使用统一的接口在原生JavaScript、jQuery或其他框架中添加事件监听器，实现了跨框架的事件处理。

jquery适配器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery适配器</title>
</head>
<body>
<script>
    //定义框架
    var A = A || {};
    //通过id获取元素
    A.g = function(id) {
        return document.getElementById(id);
    }
    //为元素绑定事件
    A.on = function(id, type, fn) {
        //如果传递参数是字符串，则以id处理，否则以元素对象处理
        var dom = typeof id === 'String' ? this.g(id) : id;
        //标准DOM2级添加事件方式、
        if (dom.addEventListener) {
            dom.addEventListener();
        }
    }
</script>
</body>
</html>

适配异类框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>适配异类框架</title>
</head>
<body>
<script>
    //定义框架
    var A = A || {};
    //通过id获取元素
    A.g = function(id) {
        return document.getElementById(id);
    }

    //为元素绑定事件
    A.on = function(id, type, fn) {
        //如果传递参数是字符串则以id处理，否则以元素对象处理
        var dom = typeof id === 'string' ? this.g(id) : id;
        //标准DOM2级添加事件方式
        if (dom.addEventListener) {
            dom.addEventListener(type, fn, false);
        }
        //IE DOM2级添加事件方式
        else if (dom.attachEvent) {
            dom.attachEvent('on' + type, fn);
        } //简易添加事件方式
        else {
            dom['on' + type] = fn;
        }
    }

    window.onload = function() {
        A.on('myButton',
            'click',
            function() {
                console.log('点击了！');
            });
    };

    //适配器
    A.g = function(id) {
        //通过jQuery获取Jquery对象，然后返回第一个成员
        return $(id).get(0);
    }

    A.on = function(id, type, fn) {
        //如果穿递的参数是字符串，则以id处理，否则以元素对象处理
        var dom = typeof id === 'string' ? $('#' + id) : $(id);
        dom.on(type, fn);
    }
</script>

<button id="myButton">点击我</button>
</body>
</html>