什么是桥接模式
把事物对象和其具体行为、具体特征分离开来，使它们可以各自独立的变化。
案例
男生 女生
钢琴 吉他
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()
网友评论