設(shè)計(jì)模式是個(gè)抽象的東西渐尿，只是設(shè)計(jì)的指導(dǎo)思想，不要為了設(shè)計(jì)而設(shè)計(jì)，而是為了使用而設(shè)計(jì)
原型模式
概念
- clone自己哭靖，生成一個(gè)新對(duì)象（從新new一個(gè)對(duì)象，開銷相對(duì)較大）
- java默認(rèn)有clone接口侈离，不用自己實(shí)現(xiàn)
js代碼演示
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
// Object.create 用到了原型模式的思想（雖然不是Java中的clone）
// 基于一個(gè)原型創(chuàng)建一個(gè)對(duì)象
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>
橋接模式
概念
- 用于把抽象化和實(shí)現(xiàn)化解耦
- 使得二者可以獨(dú)立變化
js代碼演示
1试幽、要實(shí)現(xiàn)一個(gè)畫圖的方法
image.png
class ColorShape {
yellowCircle(){
console.log('yellow circle')
}
redCircle(){
console.log('red circle')
}
yellowTriangle(){
console.log('yellow triangle')
}
redTriangle(){
console.log('red triangle')
}
}
// 測(cè)試
let cs = new ColorShape()
cs.yellowCircle()
cs.redTriangle()
2、按照橋接模式卦碾，我們將其分離開抡草，畫圖是畫圖饰及，填充是填充，最后進(jìn)行結(jié)合康震，擴(kuò)展性比較高
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}`)
}
}
// 測(cè)試
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è)計(jì)原則驗(yàn)證
- 抽象和實(shí)現(xiàn)分離燎含，解耦
- 符合開放封閉原則
組合模式
概念
- 生成樹形結(jié)構(gòu)，表示"整體—部分"關(guān)系
-
讓整體和部分都具有一致的操作方式
image.png
設(shè)計(jì)原則驗(yàn)證
- 將整體和單個(gè)節(jié)點(diǎn)的操作抽象出來(lái)
- 符合開放封閉原則
享元模式
概念
- 共享內(nèi)存（主要考慮內(nèi)存腿短，而非效率）
-
相同數(shù)據(jù)屏箍，共享使用
image.png
設(shè)計(jì)原則驗(yàn)證
- 將相同的部分抽象出來(lái)
- 符合開放封閉原則
策略模式
概念
- 不同策略（執(zhí)行方式）分開處理
- 避免大量出現(xiàn)if...else
案例
1、不同用戶橘忱，權(quán)限不同赴魁，代碼冗余
image.png
2、把不同用戶封裝成類
image.png
模板方法模式
通過(guò)一個(gè)方法將其封住钝诚，調(diào)用時(shí)使用該方法即可
image.png
職責(zé)鏈模式
概念
- 一步操作可能分為多個(gè)職責(zé)角色來(lái)完成
- 把這些角色都分開颖御，然后用一個(gè)鏈串起來(lái)
- 將發(fā)起者和各個(gè)處理者進(jìn)行隔離
案例
image.png
設(shè)計(jì)原則驗(yàn)證
- 發(fā)起者于各個(gè)處理者進(jìn)行隔離
- 符合開放封閉原則
命令模式
概念
- 執(zhí)行命令時(shí)，發(fā)布者和執(zhí)行者分開
-
中間加入命令對(duì)象凝颇，作為中轉(zhuǎn)站
image.png
案例
image.png
設(shè)計(jì)原則驗(yàn)證
- 命令對(duì)象于執(zhí)行對(duì)象分開潘拱，解耦
- 符合開放封閉原則
備忘錄模式
概念
- 隨時(shí)記錄一個(gè)對(duì)象的狀態(tài)變化
- 隨時(shí)可以恢復(fù)之前的某個(gè)狀態(tài)（如撤銷功能）
- 類似富文本編輯器
中介者模式
概念
image.png
image.png
訪問者模式
概念
針對(duì)于對(duì)象結(jié)構(gòu)的元素，定義在不改變?cè)搶?duì)象的前提下訪問結(jié)構(gòu)中元素如的新方法拧略。
代碼實(shí)現(xiàn)（使用訪問者模式芦岂，使對(duì)象擁有像數(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)
