外观模式-前端设计模式

龙马啊

于 2022-05-06 22:28:10 发布

阅读量259

点赞数

CC 4.0 BY-SA版权

分类专栏：学习过程文章标签：前端外观模式设计模式

本文链接：https://blog.youkuaiyun.com/qq_43853213/article/details/124620281

学习过程专栏收录该内容

67 篇文章

订阅专栏

这篇博客介绍了外观模式（Facade Pattern），通过西瓜和樱桃的例子生动阐述了其将多个组件组合并提供简洁接口的原理。作者指出，外观模式并不完全符合单一职责原则和开放封闭原则，使用时需谨慎。文中还展示了JavaScript代码示例，包括一个阻止事件传播和默认行为的类实现，并提醒开发者在日常编码中常会运用到外观模式。

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

理解这个名字

外观模式，又称为门面模式
比如说有一盘西瓜一盘樱桃，他们的分开来卖的话，不是很好，如果他们放在一个盘子里装饰一下
是不是有一个很好的外观。

官方一点的话

外观模式为子系统中的一组接口提供了一个高层接口
使用者使用这个高层接口
这个高层接口相当于下面的getInfo 函数

外观模式的设计原则验证

不符合单一职责原则和开放封闭原则，使用时，需谨慎，不可以滥用

		function getName() {
            return 'zs'
        }
        function getAge() {
            return 18
        }
        let getInfo = function (a, b) {
            let info = a() + b()
            return info
        }
        console.log(getInfo(getName, getAge));

在写代码中大家都会使用一个外观模式
我写了一个class来实现这个

		var stopEvent = function( e ){  //同时阻止事件默认行为和冒泡
		 e.stopPropagation();
		 e.preventDefault();
		}

 		class E {
            stopPropagation() {
                console.log('阻止冒泡事件');
            }
            preventDefault() {
                console.log('阻止默认行为');
            }
        }

        var stopEvent = function (e) {  //同时阻止事件默认行为和冒泡
            e.stopPropagation();
            e.preventDefault();
        }
        stopEvent(new E())