web前端进阶之js设计模式篇——下
2018-08-06 本文已影响0人
jia林
设计模式是个抽象的东西，只是设计的指导思想，不要为了设计而设计，而是为了使用而设计
原型模式
概念
- clone自己，生成一个新对象（从新new一个对象，开销相对较大）
- java默认有clone接口，不用自己实现
js代码演示
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
// Object.create 用到了原型模式的思想（虽然不是Java中的clone）
// 基于一个原型创建一个对象
const prototype = {
getName(){
return this.first + this.last
},
say(){
alert('hello')
}
}
// 基于原型创建x
let x = Object.create(prototype)
x.first = "a"
x.last = "b"
console.log(x.getName())
x.say()
// 基于原型创建y
let y = Object.create(prototype)
y.first = "c"
y.last = "b"
console.log(y.getName())
y.say()
</script>
</body>
</html>
桥接模式
概念
- 用于把抽象化和实现化解耦
- 使得二者可以独立变化
js代码演示
1、要实现一个画图的方法
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、按照桥接模式，我们将其分离开，画图是画图，填充是填充，最后进行结合，扩展性比较高
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()
设计原则验证
- 抽象和实现分离，解耦
- 符合开放封闭原则
组合模式
概念
- 生成树形结构，表示"整体—部分"关系
-
让整体和部分都具有一致的操作方式
image.png
设计原则验证
- 将整体和单个节点的操作抽象出来
- 符合开放封闭原则
享元模式
概念
- 共享内存（主要考虑内存，而非效率）
-
相同数据，共享使用
image.png
设计原则验证
- 将相同的部分抽象出来
- 符合开放封闭原则
策略模式
概念
- 不同策略（执行方式）分开处理
- 避免大量出现if...else
案例
1、不同用户，权限不同，代码冗余
image.png
2、把不同用户封装成类
image.png
模板方法模式
通过一个方法将其封住，调用时使用该方法即可
image.png
职责链模式
概念
- 一步操作可能分为多个职责角色来完成
- 把这些角色都分开，然后用一个链串起来
- 将发起者和各个处理者进行隔离
案例
image.png
设计原则验证
- 发起者于各个处理者进行隔离
- 符合开放封闭原则
命令模式
概念
- 执行命令时，发布者和执行者分开
-
中间加入命令对象，作为中转站
image.png
案例
image.png
设计原则验证
- 命令对象于执行对象分开，解耦
- 符合开放封闭原则
备忘录模式
概念
- 随时记录一个对象的状态变化
- 随时可以恢复之前的某个状态（如撤销功能）
- 类似富文本编辑器
中介者模式
概念
image.png
image.png
访问者模式
概念
针对于对象结构的元素，定义在不改变该对象的前提下访问结构中元素如的新方法。
代码实现（使用访问者模式，使对象拥有像数组的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)
