状态与策略函数

REF：让你的 JS 代码变得更加优雅且可维护、这样优化 if-else 更易读

策略模式

维基百科：策略模式作为一种软件设计模式，指对象有某个行为，但是在不同的场景中，该行为有不同的实现算法。

设计原则

1. 定义一种算法或业务规则
2. 封装每一个函数
3. 函数或算法可互换代替

业界协同

1. 常量使用大写，分词使用_
2. 变量用小写，使用驼峰命名法

状态语义化

有限状态机（finite-state machine，缩写：FSM）简称状态机

是表示有限个状态以及在这些状态之间的转移和动作等行为的数学计算模型。

ES6 Promise 状态集：PENDING 、 FULFILLED 、 REJECTED 之间单向流转的有限状态机。

为何没有放一起管理

1. 状态只应包含状态码、回调函数、错误信息、其他除函数的数据
2. 实行信息与函数分开管理，有可能多个状态同时使用一个回调函数

const RECHARGE_STATUS = {
	'undefined': {
		code: 0,
		func: 'errorTips',
		message: '健康钱包充值失败，请稍后再试!'
	},
	'noNumber': {
		code: 1,
		func: 'errorTips',
		message: '请选择充值金额！'
	},
	'overfull': {
		code: 2,
		func: 'overfull',
		message: '抱歉，为符合政策要求...'
	},
	'success': {
		code: 200,
		func: 'success',
		message: '成功！'
	}
}
const RECHARGE_METHOD = {
	'errorTips': function (obj) {console.log(obj.message)},
  'success': function(){...}
}

通过函数返回值执行回调

function verify(){
  try{
    if(...){
       return RECHARGE_STATUS['noNumber']
  	}
  	return RECHARGE_STATUS['success']
  	//...
  }catch{
    return RECHARGE_STATUS['undefined']
  }
}

function oncilck(obj) {
	let result = verify()
	RECHARGE_METHOD[result.func](result)
}

迭代器与代理模式

利用Proxy重构表单验证，虽然迭代器可以一步步的执行验证，不过用户验证通过后又返回改了数据，结果

利用proxy拦截

function validator(target, validator, errorMsg) {
    return new Proxy(target, {
        _validator: validator,
        set(target, key, value, proxy) {
            let errMsg = errorMsg
            if (value == '') {
                alert(`${errMsg[key]}不能为空！`)
                return target[key] = false
            }
            let va = this._validator[key]
            if (!!va(value)) {
                return Reflect.set(target, key, value, proxy)
            } else {
                alert(`${errMsg[key]}格式不正确`)
                return target[key] = false
            }
        }
    })
}

负责校验的逻辑代码

const validators = {
        name(value) {
            return value.length > 6
        },
        passwd(value) {
            return value.length > 6
        },
        moblie(value) {
            return /^1(3|5|7|8|9)[0-9]{9}$/.test(value)
        },
        email(value) {
            return /^\w+([+-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)
        }
    }

客户端调用代码

const errorMsg = { name: '用户名', passwd: '密码', moblie: '手机号码', email: '邮箱地址' }
const vali = validator({}, validators, errorMsg)
let registerForm = document.querySelector('#registerForm')
registerForm.addEventListener('submit', function() {
        let validatorNext = function*() {
            yield vali.name = registerForm.userName.value
            yield vali.passwd = registerForm.passWord.value
            yield vali.moblie = registerForm.phoneNumber.value
            yield vali.email = registerForm.emailAddress.value
        }
        let validator = validatorNext()
        validator.next();
        !vali.name || validator.next(); //上一步的校验通过才执行下一步
        !vali.passwd || validator.next();
        !vali.moblie || validator.next();
    }, false)