設(shè)計模式是個抽象的東西，只是設(shè)計的指導(dǎo)思想，不要為了設(shè)計而設(shè)計，而是為了使用而設(shè)計
原型模式
概念
- clone自己，生成一個新對象（從新new一個對象，開銷相對較大）
- java默認(rèn)有clone接口，不用自己實現(xiàn)
js代碼演示
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
// Object.create 用到了原型模式的思想（雖然不是Java中的clone）
// 基于一個原型創(chuàng)建一個對象
const prototype = {
getName(){
return this.first + this.last
},
say(){
alert('hello')
}
}
// 基于原型創(chuàng)建x
let x = Object.create(prototype)
x.first = "a"
x.last = "b"
console.log(x.getName())
x.say()
// 基于原型創(chuàng)建y
let y = Object.create(prototype)
y.first = "c"
y.last = "b"
console.log(y.getName())
y.say()
</script>
</body>
</html>
橋接模式
概念
- 用于把抽象化和實現(xiàn)化解耦
- 使得二者可以獨立變化
js代碼演示
1、要實現(xiàn)一個畫圖的方法
image.png
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.redTriangle()
2、按照橋接模式，我們將其分離開，畫圖是畫圖，填充是填充，最后進行結(jié)合，擴展性比較高
image.png
// 顏色
class Color {
constructor(colorName) {
this.colorName = colorName
}
}
// 形狀
class Shape {
constructor(shapeName, color) {
this.shapeName = shapeName
this.color = color
}
draw() {
console.log(`${this.color.colorName}--${this.shapeName}`)
}
}
// 測試
let red = new Color('red')
let yellow = new Color('yellow')
let redCircle = new Shape('circle', red)
let yellowTriangle = new Shape('triangle', yellow)
redCircle.draw()
yellowTriangle.draw()
設(shè)計原則驗證
- 抽象和實現(xiàn)分離，解耦
- 符合開放封閉原則
組合模式
概念
- 生成樹形結(jié)構(gòu)，表示"整體—部分"關(guān)系
-
讓整體和部分都具有一致的操作方式
image.png
設(shè)計原則驗證
- 將整體和單個節(jié)點的操作抽象出來
- 符合開放封閉原則
享元模式
概念
- 共享內(nèi)存（主要考慮內(nèi)存，而非效率）
-
相同數(shù)據(jù)，共享使用
image.png
設(shè)計原則驗證
- 將相同的部分抽象出來
- 符合開放封閉原則
策略模式
概念
- 不同策略（執(zhí)行方式）分開處理
- 避免大量出現(xiàn)if...else
案例
1、不同用戶，權(quán)限不同，代碼冗余
image.png
2、把不同用戶封裝成類
image.png
模板方法模式
通過一個方法將其封住，調(diào)用時使用該方法即可
image.png
職責(zé)鏈模式
概念
- 一步操作可能分為多個職責(zé)角色來完成
- 把這些角色都分開，然后用一個鏈串起來
- 將發(fā)起者和各個處理者進行隔離
案例
image.png
設(shè)計原則驗證
- 發(fā)起者于各個處理者進行隔離
- 符合開放封閉原則
命令模式
概念
- 執(zhí)行命令時，發(fā)布者和執(zhí)行者分開
-
中間加入命令對象，作為中轉(zhuǎn)站
image.png
案例
image.png
設(shè)計原則驗證
- 命令對象于執(zhí)行對象分開，解耦
- 符合開放封閉原則
備忘錄模式
概念
- 隨時記錄一個對象的狀態(tài)變化
- 隨時可以恢復(fù)之前的某個狀態(tài)（如撤銷功能）
- 類似富文本編輯器
中介者模式
概念
image.png
image.png
訪問者模式
概念
針對于對象結(jié)構(gòu)的元素，定義在不改變該對象的前提下訪問結(jié)構(gòu)中元素如的新方法。
代碼實現(xiàn)（使用訪問者模式，使對象擁有像數(shù)組的push pop和splice方法。）
var Visitor = (function() {
return {
splice: function(){
var args = Array.prototype.splice.call(arguments, 1)
return Array.prototype.splice.apply(arguments[0], args)
},
push: function(){
var len = arguments[0].length || 0
var args = this.splice(arguments, 1)
arguments[0].length = len + arguments.length - 1
return Array.prototype.push.apply(arguments[0], args)
},
pop: function(){
return Array.prototype.pop.apply(arguments[0])
}
}
})()
var a = new Object()
console.log(a.length)
Visitor.push(a, 1, 2, 3, 4)
console.log(a.length)
Visitor.push(a, 4, 5, 6)
console.log(a.length)
Visitor.pop(a)
console.log(a)
console.log(a.length)
Visitor.splice(a, 2)
console.log(a)
