什么是桥接模式？
- 将 抽象部分 与他的 实现部分 分离，这样抽象化与实现化 解耦，使他们可以 独立的变化；
- 桥方可以通过 实现桥接口 进行单方面扩展，而另一方可以 继承抽象类 而 单方面扩展，而之间的调用就从 桥接口 来作为突破口，不会受到双方扩展的任何影响；
适用场景：
- 抽象实现灵活：抽象 和 具体实现 之间，需要 增加更多灵活性 的情况下，适合使用桥接模式；
- 独立变化维度： 实现系统 可能有 多个角度分类，每一种角度都可能变化；
- 不使用继承：不希望使用继承，或因 多层继承 导致系统类的个数增加；
优点：
- 分离抽象与实现：分离 抽象部分 和 具体实现部分；
- 提高扩展型：提高了系统的 可扩展性，解耦了 抽象 与 实现，二者可以继续进行扩展，不需要改变系统原有的功能；
- 符合开闭原则；
- 符合合成复用原则；
缺点：
- 系统复杂：增加了 系统的 理解 与 设计难度；
- 识别变化维度：需要正确地 识别出 系统中，两个独立变化的 维度；
类图
代码
class A {
constructor(bridge) {
this.bridge = bridge;
}
go() {
console.log(`从${this.from()}到${this.bridge.to()}`);
}
}
class A1 extends A {
from() {
return 'A1';
}
}
class A2 extends A {
from() {
return 'A2';
}
}
class A3 extends A {
from() {
return 'A3';
}
}
class B {
to() { }
}
class B1 extends B {
to() {
return 'B1';
}
}
class B2 extends B {
to() {
return 'B2';
}
}
class B3 extends B {
to() {
return 'B3';
}
}
let b = new B3();
let a = new A2(b);
a.go();
应用场景
事件监听
JS
HTML
// 服务端
let express = require('express');
let path = require('path');
let app = express();
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '4.html'));
});
app.get('/user/:id', function (req, res) {
let id = req.params.id;
res.json({ id, name: `${id}_name` });
});
app.listen(8888);
<!-- 客户端 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li data-id="1">1</li>
<li data-id="2">2</li>
</ul>
<p id="content">
</p>
<script>
let lis = document.querySelectorAll('li');
for (let i = 0; i < lis.length; i++) {
lis[i].addEventListener('click', addBridage);
}
/*
// bad
function getUserById(event) {
let id = this.dataset.id;
let xhr = new XMLHttpRequest;
xhr.open('GET', `/user/${id}`, true);
xhr.responseType = 'json';
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status == 200) {
let user = xhr.response;
document.getElementById('content').innerHTML = user.name;
}
}
xhr.send();
}
*/
function addBridage() {
let id = this.dataset.id;
getUserById(id, function (user) {
document.getElementById('content').innerHTML = user.name;
});
}
// good
function getUserById(id, callback) {
let xhr = new XMLHttpRequest;
xhr.open('GET', `/user/${id}`, true);
xhr.responseType = 'json';
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status == 200) {
let user = xhr.response;
callback(user);
}
}
xhr.send();
}
</script>
</body>
</html>
分离变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>html</title>
<style>
* {
margin: 0;
padding: 0;
}
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script>
// 分离多维变化，形状 颜色 坐标
function Position(x, y) {
this.x = x;
this.y = y;
}
function Color(color) {
this.color = color;
}
function Ball(x, y, color) {
this.position = new Position(x, y);
this.color = new Color(color);
}
Ball.prototype.draw = function () {
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(this.position.x, this.position.y, 100, 0, 2 * Math.PI);
ctx.fillStyle = this.color.color;
ctx.fill();
}
new Ball(300, 300, 'red').draw();
</script>
</body>
</html>
打赏作者
您的打赏是我前进的动力
微信
支付宝
原型模式
上一篇
评论
