设计模式学习：外观模式、桥接模式

「这是我参与2022首次更文挑战的第24天，活动详情查看：2022首次更文挑战」

外观模式

外观模式 是一种结构型设计模式，能为程序库、框架或其他复杂类提供一个简单的接口。
为子系统中的一组接口提供了一个一致的界面，此模块定义了一个高层接口，这个接口使得这一子系统更加容易使用。

例子：解决浏览器兼容性问题

// 统一事件监听
let addMyEvent = function (el, ev, fn) {
    if (el.addEventListener) {
        el.addEventListener(ev, fn, false)
    } else if (el.attachEvent) {
        el.attachEvent('on' + ev, fn)
    } else {
        el['on' + ev] = fn
    }
}; 

// <div id="isShow">show-hide</div> 统一控制显示隐藏
function setBox(){
    var getId = document.getElementById('isShow');
    return {
        show : function(){
            getId.style.display = 'block';
        },
        hide : function(){
            getId.style.display = 'none';
        }
    }
}

桥接模式

桥接模式是一种结构型设计模式， 可将一个大类或一系列紧密相关的类拆分为抽象和实现两个独立的层次结构， 从而能在开发时分别使用。
桥接（Bridge）是用于把抽象化与现实化解耦，使得二者可以独立变化，在系统沿着多个维度变化的同时，又不断增加其复杂度。不具体实现业务，但是却是业务必须的需求方。有时也被称为“双适配器模式”。

问题：假如你有一个几何形状Shape类， 从它能扩展出两个子类： 圆形Circle和 方形Square 。 你希望对这样的类层次结构进行扩展以使其包含颜色， 所以你打算创建名为 红色Red和 蓝色Blue的形状子类。 但是， 由于你已有两个子类， 所以总共需要创建四个类才能覆盖所有组合， 例如 蓝色圆形 Blue Circle和 红色方形Red Square 。

所以我们通过桥接模式将继承改为组合的方式来解决这个问题。

// 具体实现
var Fn1 = function(a) {
  // dosomething...  
}
var Fn2 = function(b) {
  // dosomething...
}
var Bridge = function(a, b){
  this.one = new Fn1(a)
  this.two = new Fn2(b)
}

通过组合现有接口的方式，去组成一个新的实现，对应新的需求，不必重新定义接口，再重新为新接口写一个实现。所以接口和实现是可以组合的，这种组合我们称之为桥接模式。