javascript设计模式之策略模式

  相信有不少人在开发过程中都遇到一大串的if/else判断,代码又臭又长,而且随着需求的增加与产品的迭代,判断条件可能越来越长,越来越难以维护,有没有什么好的方式去解决这种弊端呢?答案是肯定的,策略模式是一种很好的解决办法,可以帮助我们重构规范业务代码,提高代码的可读性与可维护性。

  首先,策略模式什么?

    策略模式就是定义一系列的算法,把他们各自封装成策略类,算法被封装在策略类内部的方法里。在客户端对Context发起请求时,Context总是把请求委托给这些策略对象中间的某一个进行计算。

  其次,策略模式是符合软件设计中单一职责原则的,Context充当的是代理的角色,具体的业务业务逻辑是交给对应的策略类来实现的,策略类中的方法都是单独存在的个体,之间没有耦合,如下图所示:

  简而言之,客户端的每个请求,在策略类中都应该有一个对应的处理方法,属于一一对应关系。很多人可能会有疑问,明明“两点之间直线最短”,为什么还要绕一大圈,以此种方式去实现呢?需要维护一个中间件Context类确实是策略模式的一个局限性,但是与其优点相对,这个缺点可以暂时忽略不计。其主要优点是增加代码的健壮性与可扩展性。当我们新增一个处理逻辑时,不需要改动以前的逻辑,只需要新增一个策略类处理逻辑即可,在生产环境中,任何一个细小的改动都可能带来一系列意想不到的结果。除此之外,策略类中的实现方法时相互独立的,可以降低不同业务处理之间的业务耦合,以降低代码出错的风险,增加代码的容错能力

  在实际生产应用中,具有大量业务处理分支且可以归纳提炼为不同的业务流程的,都可以采用策略模式来设计代码,比较经典的案例就是表单验证,本文以表单验证为例,来介绍策略模式在实际开发中的使用。

  策略模式最起码由两部分组成:

    1、策略类

      封装某个策略的具体实现方法

    2、环境类Context

      接收客户端业务处理请求,根据请求参数,调用策略类中具体的实现方法,策略类中必须要有处理方法;

  以表单验证为例,其策略模式的实现过程如下:

function isFunction(fn) {
    return Object.prototype.toString.call(fn) === '[object Function]'
}

function isObject(obj) {
    return Object.prototype.toString.call(obj) === '[object Object]'
}
/**
 * 策略实现类
 */
const validateStrategies = {
    checkPattern: {
        mobileReg: /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(19[0-9]{1}))+\d{8})$/,
        numReg: /^[0-9]+(\.[0-9]{1,2})?$/
    },
    validateMobile(item) {
        let flag = true;
        if (item.data && !this.checkPattern.mobileReg.test(item.data)) {
            flag = false;
        }
        return flag;
    },
    validateNumber(item) {
        let flag = true;
        if (!this.checkPattern.numReg.test(item.data)) {
            flag = false;
        } else if (item.point) {
            let pattern = new RegExp(`^[0-9]+(\.[0-9]{1,${item.point}})?$`);
            if (!pattern.test(item.data)) {
                flag = false;
            }
        }
        return flag;
    },
    //校验字段是否必填
    validateRequired(item) {
        let flag = true;
        if (!item.data) {
            flag = false;
        } else {
            flag = true;
        }
        return flag;
    }
};


class ValidateForm {

    constructor() {
        this.cache = [];
    }

    add(rules) {
        if (Array.isArray(rules)) {
            this.cache = [...this.cache, ...rules];
        } else if (isObject(rules)) {
            this.cache = [...this.cache, rules];
        } else {
            messagee.error(`参数类型应该为Object或Array,但是却传入了${typeof rules}`, 2);
        }

    }

    remove(id) {
        let index = this.cache.findIndex(vv => vv.id && Object.is(vv.id, id));
        this.cache.splice(index, 1);
    }

    start() {
        for (let i = 0, len = this.cache.length; i < len; i++) {
            let item = this.cache[i];
            //传入的验证方法必须是一个function
            if (!isFunction(validateStrategies[item.validateFun])) {
                message.error('表单校验参数格式错误', 2);
                return false;
            } else {
                let flag = validateStrategies[item.validateFun](item);
                if (!flag) {
                    return flag;
                }
            }
        }
        return true;
    }
}

export default ValidateForm;

  上述代码,我们声明了一个ValidateForm类和一个validateStrategies策略对象,策略对象中封装了一些表单验证方法,在实例化Validate表单验证类的时候,需要往表单验证类中注入特定的表单校验规则,然后调用下启动方法,就能得到表单验证结果,以上代码使用过程如下:

 *  1、let validate = new ValidateForm();
 *  2、加入验证规则 validate.add(rules:Array<Object>)
 *  3、开始校验 validate.start()
 *  @param rules:Array<Object> {
 *    validateFun: '', //校验方法
 *    data: '',//校验的数据
 *    maxSize: '', //最大值
 *    ponit: '' //小数点
 *      ...
 *  }

  

posted @ 2019-06-20 20:20  Gerryli  阅读(563)  评论(0编辑  收藏  举报