JS设计模式— 桥接模式（Bridge Pattern）

什么是桥接模式

把事物对象和其具体行为、具体特征分离开来，使它们可以各自独立的变化。

案例

男生   女生

钢琴    吉他

1、钢琴能演奏，吉他能演奏

2、男生能让乐器演奏，女生能让乐器演奏

3、钢琴是乐器, 吉他是乐器

需要一种方式让对象和行为分离，便于随意拼接

function Boy(instrument) {

    this.sayHi = function() {

        console.log('hi, 我是男生')

    }

    this.playInstrument = function() {

        instrument.play()

    }

}

function Girl(instrument) {

    this.sayHi = function() {

        console.log('hi, 我是女生')

    }

    this.playInstrument = function() {

        instrument.play()

    }

}

function Piano() {

    this.play = function() {

        console.log('钢琴开始演奏')

    }

}

function Guitar() {

    this.play = function() {

        console.log('吉他开始演奏')

    }

}

let piano = new Piano()

let guitar = new Guitar()

let pianoBoy = new Boy(piano)

pianoBoy.playInstrument()

let guitarGirl = new Girl(guitar)

guitarGirl.playInstrument()

实际一点的案例

页面有 Toast、Message 两种形态的弹窗，弹窗都有出现和隐藏等行为，这些行为可以使用不同风格的动画。

function Toast(node, animation) {

    this.node = node

    this.animation = animation

}

Toast.prototype.show = function() {

    this.animation.show(this.node) 

}

Toast.prototype.hide = function() {

    this.animation.hide(this.node) 

}

function Message(node, animation) {

    this.node = node

    this.animation = animation

}

Message.prototype.show = function() {

    this.animation.show(this.node) 

}

Message.prototype.hide = function() {

    this.animation.hide(this.node) 

}

const Animations = {

    bounce: {

        show: function(node) { console.log(node + '弹跳着出现') }

        hide: function(node) { console.log(node + '弹跳着消失') }

    },

    slide: {

        show: function(node) { console.log(node + '滑着出现') }

        hide: function(node) { console.log(node + '滑着消失') }       

    }

}

let toast = new Toast('元素1', Animations.bounce )

toast.show()

let messageBox = new Message('元素2', Animations.slide)

messageBox.hide()