JavaScript设计模式 策略模式

策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。

笔者以为,策略模式的思想在于将算法的使用与算法的实现分离开来。根据需求的不同,将各自的算法封装在一个函数中,不同的部分以入参形式传入函数,调用相应算法,利用多态性自由调用算法函数中的算法。表单验证便可借鉴策略模式的思想。

策略模式的实现并不复杂,关键是如何从策略模式的实现背后,找到封装变化、委托和多态性这些思想的价值。

以实现通用的一个表单验证为例:

<body>
    <form id="registerForm">
        请输入用户名:<input type="text" name="userName" />
        请输入密码:<input type="text" name="password" />
        请输入手机号码:<input type="text" name="phoneNumber" />
        <button>提交</button>
    </form>
    <script>
        /***********************策略对象**************************/
        var strategies = {
     
            isNonEmpty: function (value, errorMsg) {
     
                if (value === '') {
     
                    return errorMsg;
                }
            },
            minLength: function (value, length, errorMsg) {
     
                if (value.length < length) {
     
                    return errorMsg;
                }
            },
            isMobile: function (value, errorMsg) {
     
                if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
     
                    return errorMsg;
                }
            }
        };
        /***********************Validator 类**************************/
        var Validator = function () {
     
            this.cache = [];
        };
		//添加校验方法
        Validator.prototype.add = function (dom, rules) {
      
            var self = this;
			//一个输入框内有多个校验规则
            for (var i = 0, rule; rule = rules[i++];) {
     
                (function (rule) {
     
                    var strategyAry = rule.strategy.split(':');
                    var errorMsg = rule.errorMsg;
                    self.cache.push(function () {
     
                        var strategy = strategyAry.shift();//获取规则名
                        strategyAry.unshift(dom.value);//添加输入框值
                        strategyAry.push(errorMsg);//添加错误提示
                        return strategies[strategy].apply(dom, strategyAry);
                    });
                })(rule)
            }
        };
        Validator.prototype.start = function () {
     
            for (var i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
     
                var errorMsg = validatorFunc();
                if (errorMsg) {
     
                    return errorMsg;
                }
            }
        };
        /***********************客户调用代码**************************/
        var registerForm = document.getElementById('registerForm');
        var validataFunc = function () {
     
            var validator = new Validator();
            validator.add(registerForm.userName, [{
     
                strategy: 'isNonEmpty',
                errorMsg: '用户名不能为空'
            }, {
     
                strategy: 'minLength:6',
                errorMsg: '用户名长度不能小于 10 位'
            }]);
            validator.add(registerForm.password, [{
     
                strategy: 'minLength:6',
                errorMsg: '密码长度不能小于 6 位'
            }]);
            validator.add(registerForm.phoneNumber, [{
     
                strategy: 'isMobile',
                errorMsg: '手机号码格式不正确'
            }]);
            var errorMsg = validator.start();
            return errorMsg;
        }
        registerForm.onsubmit = function () {
     
            var errorMsg = validataFunc();
            if (errorMsg) {
     
                alert(errorMsg);
                return false;
            }
        };
    </script>
</body>

你可能感兴趣的:(JavaScript设计模式,js,设计模式)