Vue1+源码-深入解析Vue的path状态机

function StateMechine () {
	this.currentState = 'on'; // 当前状态
}

// 状态列表，每个状态有对应的可转换状态以及动作
StateMechine.prototype.states = {
	'on': {
		to: 'off',
		action: 'turnOff'
	},
	'off': {
		to: 'on',
		action: 'turnOn'
	}
}

StateMechine.prototype.turn = function () {
	var old_status = this.currentState;
	console.log('当前状态是' + old_status + '，之后将状态切换为' + this.states[old_status].to)
	this.currentState = this.states[old_status].to;
	this[this.states[old_status].action]();
}

StateMechine.prototype.turnOn = function () {
	console.log('执行turn on transition');
}

StateMechine.prototype.turnOff = function () {
	console.log('执行turn off transition');
}

var my_state = new StateMechine();

my_state.turn(); // 先把开关关闭
setTimeout(() => { // 1s后重新打开开关
	my_state.turn();
}, 1000)

var parse = new Function('a', 'return a.b.c;')
parse(a) // 可以直接得到a.b.c

// actions
var APPEND = 0 // 字符串还没结束时拼接到前一个字符串之后作为新的属性名，如:hello.world在解析第一个字符h后解析e，发现这个属性名还未结束，将e拼接在h之后成为一个新的属性名he,以此类推
var PUSH = 1 // 将每个阶段解析的结果添加到keys中，如hello.world解析到第一个.时，hello当做一个完整的属性名，push到keys中，如keys = ['hello']
var INC_SUB_PATH_DEPTH = 2 // 解析下一级属性，如.[这两个字符串代表进入下一级属性
var PUSH_SUB_PATH = 3 // 将下一级解析的属性名添加到keys中

// states
var BEFORE_PATH = 0 // path解析前的初始状态
var IN_PATH = 1 // 路径解析状态
var BEFORE_IDENT = 2 // 遇到.字符时进入该状态，表示在合法字符之前
var IN_IDENT = 3 // 解析合法字符中
var IN_SUB_PATH = 4 // 在下一级属性解析的状态
var IN_SINGLE_QUOTE = 5 // 单引号状态
var IN_DOUBLE_QUOTE = 6 // 双引号状态
var AFTER_PATH = 7 // 解析完成
var ERROR = 8 // 错误状态

pathStateMachine[BEFORE_PATH] = {
  'ws': [BEFORE_PATH],
  'ident': [IN_IDENT, APPEND],
  '[': [IN_SUB_PATH],
  'eof': [AFTER_PATH]
}

/**
 * Parse a string path into an array of segments
 *
 * @param {String} path
 * @return {Array|undefined}
 */
function parse (path) {
	var keys = [] // 存放各个层次属性的数组，也是最后的返回结果
	var index = -1 // 路径字符串的索引
	var mode = BEFORE_PATH // 当前状态
	var subPathDepth = 0
	var c, newChar, key, type, transition, action, typeMap
    
    var actions = [] // actions是具体的执行动作

	actions[APPEND] = function () { // APPEND操作是连接字符串
	    if (key === undefined) {
	      key = newChar
	    } else {
	      key += newChar
	    }
	}
    // 其他actions就不摘抄了
    
    // 开始循环遍历path
    while (mode != null) {
		index++
		c = path[index]

		type = getPathCharType(c) // 获取当前字符的类型，如'ws','indent'等
		typeMap = pathStateMachine[mode] // 通过mode（当前状态）获取对应的状态模型
		transition = typeMap[type] || typeMap['else'] || ERROR // 从状态机模型取响相应的状态和动作，如[IN_IDENT, APPEND]

		if (transition === ERROR) {
			console.log('非法字符')
			return
		}

		mode = transition[0]  // 下一个状态，在这里完成了状态的转换
		action = actions[transition[1]] // 转换状态的action
		if (action) {
			newChar = transition[2]
			newChar = newChar === undefined ? c : newChar
			if (action() === false){
				return
			}
		}

		if (mode === AFTER_PATH) {
			keys.raw = path
			return keys
		}
	}
}