JS 中如何实现策略模式

来举个验证表单的例子，通常会这么写：

var regForm = document.getElementById('regForm');
regForm.onsubmit = function () {
    if (regForm.userName.value === '') {
        alert('用户名不能为空');
        return false;
    }
    if (regForm.password.value.length < 6) {
        alert('密码长度不能少于 6 位');
        return false;
    }
    if (!/(^1[3|5|8][0-9]{9}$)/.test(regForm.phoneNumber.value)) {
        alert('手机号码格式不正确'); 
        return false;
    }
}

这种写法唯一的缺点是有很多 if 语句，而且可能会越来越多的 if 语句。有没有好的方法来避免这种写法，最近学了「JS中如何使用策略模式」，这种方法对于优化「具有一定规则的代码」很用帮助。

JS 中实现策略模式比较简单，使用一个对象来保存一个 key 对应的处理函数即可，比如：

var strategies = {
    xxx: function() {},
    aaa: function() {},
    bbb: function() {},
}

对上面的例子可以使用策略模式改造一下，先定义一组策略，每一个属性对应一个函数，这个函数表示一个指定的功能：

var strategies = {
    isEmpty: function (value, errMsg) {
        if (!value) {
            return errMsg;
        }
    },
    isPwdValid: function (value, errMsg) {
        if (value.length < 6) {
            return errMsg;
        }
    },
    isTelphone: function (value, errMsg) {
        if (!/(^1[3|5|7|8][0-9]{9}$)/.test(value)) {
            return errMsg;
        }
    }
}

定义一个验证类：

var Validator = function () {
    this.cache = [];
}
Validator.prototype.add = function(rule, dom, errMsg) {
    this.cache.push(function() {
        let args = [dom.value, errMsg];
        return strategies[rule].apply(dom, args);
    });
}
Validator.prototype.start = function() {
    for(let i = 0; i < this.cache.length; i++) {
        let fn = this.cache[i];
        let msg = fn();
        if (msg) {
            return msg;
        }
    }
}

校验函数：

var validFun = function () {
    let validator = new Validator();
    var regForm = document.getElementById('regForm');
    validator.add('isEmpty', regForm.userName, '用户名不能为空');
    validator.add('isPwdValid', regForm.password, '密码长度不能少于 6 位');
    validator.add('isTelphone', regForm.phoneNumber, '手机号码格式不正确');
    return validator.start();
}

最终，直接调用这个函数进行验证。

这种方法看似避免了大量的 if 语言，但是却使代码量增加了将近一半，感觉是多次一举。但是在某些复杂的验证场景下，这种方式能够让代码更系统，职责更明确。

---

推荐阅读：

精心画了一张 vim 壁纸