JavaScript design pattern-state pattern

1. State mode

1.1 Introduction to State Mode

• 一个对象有状态变化
• 每次状态变化都会触发一个逻辑
• 不能总是用 if...else 来控制
• 示例
  • 交通信号灯不同颜色的变化

1.2 State pattern class diagram

• 传统 UML 类图
  
• 简化后的 UML 类图
  

1.3 State mode demonstration

// 状态（红、黄、绿）
class State {
    
    
	constrator(color) {
    
    
		this.color = color
	}
	handle(context) {
    
    
		console.log(`turn to ${
      
      this.color} light`)
		// 设置状态
		context.setState(this)
	}
}

// 主体
class Context {
    
    
	constructor() {
    
    
		this.state = null
	}
	// 获取状态
	getState() {
    
    
		return this.state
	}
	setState() {
    
    
		this.state = state
	}
}

// test
let context = new Context()

let green = new State('green')
let yellow = new State('yellow')
let red = new State('red')

// 绿灯亮了
green.handle(context)
console.log(context.getState()) // 打印状态

// 黄灯亮了
yellow.handle(context)
console.log(context.getState())

// 红灯亮了
red.handle(context)
console.log(context.getState())

1.4 State mode scene

1.4.1 Finite State Machine

• 有限个状态、以及在这些状态之间的变化
• Such as traffic lights
• Use open source lib: javascript-state-machine
• github.com/jakesgordon/javascript-state-machine

·有限状态机 - 收藏/取消

// 状态机模型
var fsm = new StateMachine({
    
    
	init: '收藏', // 初始状态,待收藏
	transitions: [
		{
    
    
			name: 'doStore',
			from: '收藏',
			to: '取消收藏'
		},
		{
    
    
			name: 'deleteStore',
			from: '取消收藏',
			to: '收藏'
		}
	],
	methods: {
    
    
		// 执行收藏
		onDoStore: function () {
    
    
			alert('收藏成功') // 可以post请求
			updateText()
		},
		// 取消收藏
		onDeleteStore: function () {
    
    
			alert('已取消收藏')
			updateText()
		}
	}
})


var $btn = $('#btn')

// 点击事件
$btn.click(function () {
    
    
	if (fsm.is('收藏')) {
    
    
		fsm.doStore()
	} else {
    
    
		fsm.deleteStore()
	}
})

// 更新文案
function updateText() {
    
    
	$btn.text(fsm.state)
}

// 初始化文案
updateText()

1.4.2 Write a simple Promise

• 回顾 Promise 的语法

function loadImg(src) {
    
    
	const promise = new Promise(function (resolve, reject) {
    
    
		var img = document.createElement('img')
		img.onload = function () {
    
    
			resolve(img)
		}
		img.onerror = function () {
    
    
			reject()
		}
		img.src = src
	})
	return promise
}

var src = 'http://www.imooc.com/static/img/index/logo_new.png'
var result = loadImg(src)

result.then(function (img) {
    
    
	console.log('success 1')
}, function () {
    
    
	console.log('failed 1')
})
result.then(function (img) {
    
    
	console.log('success 2')
}, function () {
    
    
	console.log('failed 2')
})

• analysis: Promise 就是一个有限状态机
  • Promise 三种状态: pending fulfilled rejected
  • pending -> fulfilled 或者 pending -> rejected
  • 不能逆向变化

// 模型
var fsm = new StateMachine({
    
    
	init: 'pending', // 初始化状态
	transitions: [
		{
    
    
			name: 'resolve', // 事件名称
			from: 'pending',
			to: 'fullfilled'
		},
		{
    
    
			name: 'reject',
			from: 'pending',
			to: 'rejected'
		}
	],
	methods: {
    
    
		// 成功 监听 resolve
		onResolve: function (state, data) {
    
    
			// 参数: state - 当前状态示例: data - fsm.resolve(xxx) 执行时传递过来的参数
			data.successList.forEach(fn => fn())
		},
		// 失败
		onReject: function (state, data) {
    
    
			// 参数: state - 当前状态示例: data - fsm.reject(xxx) 执行时传递过来的参数
			data.failList.forEach(fn => fn())
		}
	}
})

// 定义 Promise
class MyPromise {
    
    
	constructor(fn) {
    
    
		this.successList = []
		this.failList = []

		fn(() => {
    
    
			// resolve 函数
			fsm.resolve(this)
		}, () => {
    
    
			// reject 函数
			fsm.reject(this)
		})
	}
	then(successFn, failFn) {
    
    
		this.successList.push(successFn)
		this.failList.push(failFn)
	}
}

// 测试
function loadImg(src) {
    
    
	const promise = new Promise(function (resolve, reject) {
    
    
		let img = document.createElement('img')
		img.onload = function () {
    
    
			resolve(img)
		}
		img.onerror = function () [
			reject()
		}
		img.src = src
	})
	return promise
}
let src = 'xxx'
let result = loadImg(src)

result.then(function () {
    
    
	console.log('ok1')
}, function () {
    
    
	console.log('fail1')
})
result.then(function () {
    
    
	console.log('ok2')
}, function () {
    
    
	console.log('fail2')
})

1.5 Verification of the Design Principles of State Mode

• 将状态对象和主题对象分离，状态的变化逻辑单独处理
• 符合开放封闭原则