JavaScript设计模式策略模式

最新推荐文章于 2024-11-12 09:25:54 发布

晚来听雨雪

最新推荐文章于 2024-11-12 09:25:54 发布

阅读量103

点赞数

分类专栏： JavaScript设计模式文章标签： js 设计模式

本文链接：https://blog.csdn.net/QT1218/article/details/112213099

版权

JavaScript设计模式专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

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

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

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

<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>