一、原型模式
概念：clone自己，生成一个新对象；Java默认有clone接口，不用自己实现
UML类图
JS中的应用
// `Object.create` 用到了原型模式的思想（虽然不是Java中的clone）
// 基于一个原型创建一个对象
var prototype = {
getName: function () {
return this.first + ' ' + this.last
},
say: function () {
console.log('hello')
}
}
// 基于原型创建X
var x = Object.create(prototype)
x.first = 'A'
x.last = 'B'
console.log(x.getName())
x.say()
二、桥接模式
概念：用于把抽象画与实现化解耦，使得二者可以独立变化
UML类图
image.png
实现：
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()
设计原则验证
- 抽象和实现分离，解耦
- 符合开放封闭原则
三、组合模式
概念：生成树形结构，表示"整体-部分"关系
JS应用：虚拟DOM中的VNode是这种形式，但数据类型简单
四、享元模式
- 共享内存（主要考虑没内存，而非效率）
- 相同的数据，共享使用
- (Js中未找到经典应用场景)
五、策略模式
概念：
- 不同策略分开处理
- 避免出现大量if...else 或者 switch case
演示
class User {
constructor (type) {
this.type = type
}
buy() {
if(this.type === 'ordinary') {
console.log('普通用户购买')
} else if(this.type === 'member') {
console.log('会员用户购买')
} else if (this.type === 'vip'){
console.log('vip 用户购买')
}
}
}
// 测试代码
var u1 = new User('ordinary')
u1.buy()
var u2 = new User('member')
u2.buy()
// 策略模式改写
class OrdinaryUser{
buy () {
console.log('普通用户购买')
}
}
class MemberUser {
buy() {
console.log('会员用户购买')
}
}
class VipUser{
buy(){
console.log('vip用户购买')
}
}
var u1 = new OrdinaryUser()
u1.buy()
六、模板方法模式
class Action {
handle() {
handle1()
handle2()
handle3()
}
handle1(){
console.log('1')
}
handle2(){
console.log('2')
}
handle3(){
console.log('3')
}
}
七、职责链模式
概念：
- 一步操作可能分为多个职责角色来完成
- 把这些角色都分开，然后用一个链串起来
代码演示：
// 请假需要蹭蹭审批
class Action {
constructor(name) {
this.name = name
this.nextAction = null
}
setNextAction(action) {
this.nextAction = action
}
handle() {
console.log(`${this.name} 审批`)
if (this.nextAction !== null){
this.nextAction.handle()
}
}
}
let a1 = new Action('组长')
let a2 = new Action('经理')
let a3 = new Action('总监')
a1.setNextAction(a2)
a2.setNextAction(a3)
a1.handle()
JS中的应用
- 职责链模式和业务结合较多，JS中能联想到链式操作
- jQuery的链式操作，Promise.then的链式操作
八、命令模式
概念：
- 执行命令时，发布者和执行者分开
JS代码演示
// 接收者
class Receiver{
exec() {
console.log('执行')
}
}
// 命令者
class Command {
constructor(receiver){
this.receiver = receiver
}
cmd() {
console.log('触发命令')
this.receiver.exec()
}
}
// 触发者
class Invoker {
constructor(command){
this.command = command
}
invoke() {
console.log('开始')
this.command.cmd()
}
}
// 士兵
let soldier = new Receiver()
// 小号手
let trumpeter = new Command(soldier)
let general = new Invoker(trumpeter)
general.invoke()
JS中的应用
- 网页富文本编辑器操作，浏览器封装了一个命令对象
- document.execCommand('bold')
- document.execCommand('undo')
九、备忘录模式
概念：
- 随时记录一个对象的状态变化
- 随时可以恢复之前的某个状态(如撤销功能)
- 未找到JS中经典应用，除了一些工具（如编辑器）
JS代码演示
// 备忘对象
class Memento{
constructor(content){
this.content = content
}
getContent(){
return this.content
}
}
// 备忘列表
class CareTaker{
constructor(){
this.list = []
}
add(memento){
this.list.push(memento)
}
get(index){
return this.list[index]
}
}
// 编辑器
class Editor{
constructor() {
this.content = null
}
setContent(content){
this.content = content
}
getContent(){
return this.content
}
saveContentToMemento(){
return new Memento(this.content)
}
getContentFromMemento(memento){
this.content = memento.getContent()
}
}
// 测试代码
let editor = new Editor()
let careTaker = new CareTaker()
editor.setContent('111')
editor.setContent('222')
careTaker.add(editor.saveContentToMemento()) // 将当前内容备份
editor.setContent('333')
careTaker.add(editor.saveContentToMemento()) // 将当前内容备份
editor.setContent('444')
console.log(editor.getContent()) // 444
editor.getContentFromMemento(careTaker.get(1)) // 撤销
console.log(editor.getContent()) // 333
设计原则验证
- 状态对象与使用者分开，解耦
- 符合开放封闭原则
十、中介者模式
概念：对象和对象之间的访问都通过一个中介者
十一、访问者模式
概念：
- 将数据操作和数据结构进行分离，使用场景不多
十二、解释器模式
概念：
- 描述语言语法如何定义，如何解释和编译
- 用于专业场景
十三、关于面试
- 观察者模式
- 单例模式
网友评论