外观模式Facade Pattern
又称为门面模式,它是一种对象结构型模式,外部与一个子系统的通信必须通过一个统一的外观对象进行,为子系统中的一组接口提供一个一致的界面,外观模式定义了一个高层接口,这个接口使得这一子系统更加容易使用,外观模式在Js
中常常用于解决浏览器兼容性问题。
根据单一职责原则,在软件中将一个系统划分为若干个子系统有利于降低整个系统的复杂性,一个常见的设计目标是使子系统间的通信和相互依赖关系达到最小,而达到该目标的途径之一就是引入一个外观对象,其为子系统的访问提供了一个简单而单一的入口。外观模式也是迪米特法则的体现,通过引入一个新的外观类可以降低原有系统的复杂度,同时降低客户类与子系统类的耦合度。外观模式还要求一个子系统的外部与其内部的通信通过一个统一的外观对象进行,外观类将客户端与子系统的内部复杂性分隔开,使得客户端只需要与外观对象打交道,而不需要与子系统内部的很多对象打交道,能够降低系统的复杂程度。
Facade
: 外观角色。SubSystem
: 子系统角色。/*
* 注册元素事件 addEvent函数即为外观角色 将各种浏览器作为子系统角色
* @param element [必填] 要绑定的元素
* @param type [必填] 事件类型
* @param fn [必填] 回调函数
*/
function addEvent(element, type, fn) {
if (element.addEventListener) { // DOM2级事件支持addEventListener方法
element.addEventListener(type, fn, false)
} else if (element.attachEvent) { // 支持attachEvent方法
element.attachEvent("on" + type, fn)
} else {
element["on" + type] = fn // 都不支持的浏览器以DOM0级事件绑定
}
}
https://github.com/WindrunnerMax/EveryDay
https://segmentfault.com/a/1190000014132789
https://www.runoob.com/design-pattern/facade-pattern.html
https://design-patterns.readthedocs.io/zh_CN/latest/structural_patterns/facade.html