外观模式-前端设计模式

最新推荐文章于 2023-12-11 10:38:47 发布

原创最新推荐文章于 2023-12-11 10:38:47 发布 · 278 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #外观模式 #设计模式

学习过程专栏收录该内容

67 篇文章

订阅专栏

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

理解这个名字

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

官方一点的话

外观模式为子系统中的一组接口提供了一个高层接口
使用者使用这个高层接口
这个高层接口相当于下面的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())