设计模式之策略模式

定义

策略模式是指对一系列的算法定义，并将每一个算法封装起来，而且使它们还可以互相替换。策略模式让算法独立于使用它的客户而独立变化。

策略模式的有点有：策略模式是提供管理相关的算法族的办法 ，策略模式提供了可以替换继承关系的办法，使用策略模式可以避免使用多重条件转移语句。

大家都清楚有些比较复杂的项目适合设计模式，而相对简单的项目，就这些功能，不会再加的话没有必要用设计模式，俗称反模式。比如，要做一个登陆页面，相对单一，就这几个功能，后续也不会添加，就没必要用设计模式；而如果一个登录页面，其中有很多校验规则，而且以后还会添加其它功能，这时你还是用之前的老方法，if，else判断再发送请求，那如果校验规则一多就会使代码复杂化，而且看着都恶心，那么这是就要用到设计模式了。

这里使用策略模式封装了一个简单的库，前端校验规则，直接上代码

        btn.onclick = function () {
            ProxyRequest()
        }
        function Request() {
            console.log('发送请求')
        }


        // 构造函数 => 对象实例
        function Validator() {
            this.cache = []
            this.warn = []
        }

        // 策略方案
        Validator.prototype.strategies = {
            isNoEmpty(value, error) {
                if (value == '') {
                    return error
                }
                return true
            },
            maxLength(value, length, error) {
                if (value != '' && value.length > length) {
                    return error
                }
                return true
            },
            minLength(value, length, error) {
                if (value != '' && value.length < length) {
                    return error
                }
                return true
            }
        }

        Validator.prototype.add = function (dom, errorDom, strategyArr) {
            var self = this
            this.warn.push(errorDom)
            strategyArr.forEach(function (ele, index) {
                self.cache.push(function () {
                    var arr = ele.strategy.split(':')
                    var type = arr.shift();
                    arr.unshift(dom.value)
                    arr.push(ele.error)
                    var msg = self.strategies[type].apply(self, arr)
                    if (msg != true) {
                        errorDom.innerText = msg
                    }
                    return msg
                })
            })
        } // 添加校验规则

        Validator.prototype.start = function () {
            var flag = true
            this.warn.forEach((ele) => {
                ele.innerText = ''
            })
            this.cache.forEach((ele) => {
                if (ele() !== true) {
                    flag = false
                }
            })
            return flag
        } // 验证开始

        Validator.prototype.extend = function (config) {
            for (var prop in config) {
                Validator.prototype.strategies[prop] = config[prop]
            }
        } // 添加验证方法

        var validator = new Validator() //实例化

        validator.extend({
            isEmail(value, error) {
                if (value != '' && value.indexOf('@') == -1) {
                    return error
                }
                return true
            }
        }) // 添加邮箱验证

        // 创建一个代理
        var ProxyRequest = (function () {
            // 参数：1.dom; 2.显示错误信息dom; 3.校验规则
            validator.add(
                user,
                uerror,
                [
                    { strategy: 'isNoEmpty', error: '用户名不能为空' },
                    { strategy: 'maxLength:5', error: '长度不能超过5' },
                ]
            )
            validator.add(
                pass,
                perror,
                [
                    { strategy: 'isNoEmpty', error: '用户名不能为空' },
                    { strategy: 'minLength:6', error: '长度不能少于6' },
                ]
            )
            validator.add(
                email,
                eerror,
                [
                    { strategy: 'isNoEmpty', error: '邮箱不能为空' },
                    { strategy: 'isEmail', error: '邮箱不符' },
                ]
            )
            return function () {
                if (validator.start() == true) {
                    Request()
                }
            }
        })()