JavaScript设计模式之外观模式

TyrionJ

于 2020-02-17 22:15:12 发布

阅读量180

点赞数

分类专栏： js设计模式

本文链接：https://blog.youkuaiyun.com/TyrionJ/article/details/104366101

版权

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

9 篇文章

订阅专栏

本文介绍JS中的外观模式，一种解决兼容性问题的设计模式。通过封装统一接口，如事件绑定方法bindEvent，使不同浏览器间代码调用保持一致，提高代码可维护性和复用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

外观模式

外观模式，顾名思义，外表看起来相同，但实际可能不一致。在JS中外观模式通常用于处理兼容性问题。比如封装了一个bindEvent事件绑定方法，不同的浏览器会调用bindEvent内部封装的浏览器所支持的方法。

外观模式封装示例


 myEvent = {
        stop: function (e) {
            if (typeof e.preventDefault() === "function") {
                return e.preventDefault();
            }
            if (typeof e.stopPropagation() === "function") {
                return e.stopPropagation();
            }
            //for IE
            if (typeof e.returnValue === "boolean") {
                return (e.returnValue = false);
            }
            if (typeof e.cancelBubble === "boolean") {
                return (e.cancelBubble = true);
            }
        },
        bindEvent(dom, type, fn) {
            if (dom.addEventListener) {
                dom.addEventListener(type, fn, false);
            } else if (dom.attachEvent) {
                dom.attachEvent('on' + type, fn);
            } else {
                dom['on' + type] = fn;
            }
        }
    }
    myEvent.bindEvent(document.querySelector('button'), 
    	'click', () => console.log('button clicked'))