js代理模式的web场景运用

场景: 在web开发中，我们做表单提交操作的时候，需要做两步。

1. 对表单进行校验
2. 校验通过之后调用接口保存 下面写一段常规代码

// 校验并保存表单
async function submit(){
    // 1、校验数据
    const {name, age, school, time} = this.params
    let msg = ''
    if(!name) {
        msg = '请输入姓名'
    } else if(!age) {
        msg = '请选择年龄'
    } else if(!school) {
        msg = '请选择初中学校'
    } else if(!time) {
        msg = '请选择入学时间'
    }
    if(msg) {return alert(msg)}
    // 2、接口请求
    const res = await this.$post('/xxx', {id:1})
    if(res) { alert('新增学生成功') }
}

上面的代码，展示了一个基本的逻辑。就是先对用户填写的数据进行校验必填。如果都填好了。调用接口进行数据保存。

• 当我们的表单比较小的时候，这样的处理不是问题。
• 但是一旦我们的表单很大，校验逻辑就需要比如说300行代码
• 之后对接口进行处理还有不少逻辑的话，上述的代码就立马可读性严重下降了
• 为了解决这种问题，可以引入一个代理模式
• 下面给出示例

function checkForm(){
    // 1、校验数据
    const {name, age, school, time} = this.params
    let msg = ''
    if(!name) {
        msg = '请输入姓名'
    } else if(!age) {
        msg = '请选择年龄'
    } else if(!school) {
        msg = '请选择初中学校'
    } else if(!time) {
        msg = '请选择入学时间'
    }
    return msg
}
async function submit(){
    // 1、数据校验
    const msg = checkForm()
    if(msg) { return alert(msg) }
    // 2、接口请求
    const res = await this.$post('/xxx', {id:1})
    if(res) { alert('新增学生成功') }
}

说明

• 上述的代码在submit函数中把数据校验的逻辑拆分成一个单独的函数出去处理。在实际项目中，这样能把这个submit函数的复杂度一分为二。数据校验和数据保存分割开来互不干扰。
• checkForm函数相当于是submit函数请的一个代理，帮助他去做校验的功能
• 这样处理的好处在于。submit函数清晰可读性上升，而且后续，如果排查校验问题，会直接定位到checkForm函数，如果是接口请求问题。会直接跳过checkForm函数查看，排查的成本会降低