其他設(shè)計模式系列開始介紹前端不常用的設(shè)計模式
有哪些設(shè)計模式？
- 創(chuàng)建性模式
原型模式 - 結(jié)構(gòu)型模式
橋接模式 組合模式 享元模式 - 行為型模式
策略模式 模板方法模式 職責(zé)鏈模式 命令模式 備忘錄模式 中介者模式 訪問者模式 解釋器模式
原型模式
概念
clone自己幌绍，生成一個新對象
java默認有clone接口，不用自己實現(xiàn)河哑。
JS中的應(yīng)用 Object.create()
// 一個原型 對象
let prototype = {
getName: function () {
return this.first + " " + this.last;
},
say: function () {
alert("hello")
}
}
// 基于原型創(chuàng)建x
let x = Object.create(prototype);
x.first = "A";
x.last = "B";
alert(x.getName());
x.say();
// 基于原型創(chuàng)建y
let y = Object.create(prototype);
y.first = "C";
y.last = "D";
alert(y.getName());
y.say();
對比JS中的原型prototype
- prototype 可以理解為ES6 class 的一種底層原理實現(xiàn)
- 而class是實現(xiàn)面向?qū)ο蟮幕A(chǔ)野来，并不是服務(wù)于某個模式
- 若干年后ES6全面普及厕鹃，大家可能會忽略掉prototype
- 但是Object.create卻會長久存在
橋接模式
概念
- 用于把抽象化與實現(xiàn)化解耦
- 使得二中可以獨立變化
-（未找到JS中的經(jīng)典應(yīng)用）
demo
比如我們要畫這樣一幅圖
image.png
黃色圓圈 紅色圓圈 黃色三角 紅色三角 這樣四個圖形
代碼實現(xiàn)如果混合在一起一般是這個樣子的
class ColorShape {
yellowCircle() {
console.log("yellow circle")
}
redCircle() {
console.log("red circle")
}
yellowTriangle() {
console.log("yellow triangle")
}
redTriangle() {
console.log("red triangle")
}
}
// 測試
let cs = new ColorShape();
cs.yellowCircle()
cs.redCircle()
cs.yellowTriangle()
cs.redTriangle()
但是從前端模式來說芬位，我們一般是分離開的无拗，大概是這樣的
image.png
畫圖是畫圖，填充顏色是填充顏色昧碉，比較適合一些復(fù)雜性比較大的業(yè)務(wù)英染。
代碼實現(xiàn)是這個樣子的
class Color {
constructor(name){
this.name = name;
}
}
class Shape {
constructor(name, color){
this.name = name;
this.color = color;
}
draw(){
console.log(`${this.color.name} ${this.name}`)
}
}
// 測試代碼
let red = new Color("red");
let yellow = new Color("yellow");
let circle = new Shape("circle", red);
circle.draw();
let triangle = new Shape("triangle", yellow);
triangle.draw();
設(shè)計原則驗證
- 抽象和實現(xiàn)分離
- 符合開放封閉原則
本文資料來自慕課網(wǎng)-雙越老師-Javascript 設(shè)計模式系統(tǒng)講解與應(yīng)用視頻課程
