美文网首页
JavaScript策略模式

JavaScript策略模式

作者: 西麦smile | 来源:发表于2018-11-25 23:10 被阅读13次

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

  • 策略模式至少要由一个策略类和一个环境类Context构成,Context需要维持对某个策略对象的引用。
  • 策略模式有效避免了多重条件选择语句
  • 策略模式利用组合、委托和多态等思想
  • 符合开放-封闭原则,将算法封装在独立的策略类中
/**
 * 策略模式:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换
 * 以下是基于ES6表单校验的策略模式示例
 * 1. 定义策略类,封装一系列算法
 * 2. 定义环境类Context,把请求委托给策略类,Context需要维持对某个策略对象的引用
 */
class Strategies {
    isNonEmpty(value, errorMsg) {
        if (!value) {
            return errorMsg
        }
    }

    minLength(value, length, errorMsg) {
        if (value.length < length) {
            return errorMsg
        }
    }
}

class Validator extends Strategies {
    constructor() {
        super()
        this.cache = []
    }

    add(value, rules) {
        for (let i = 0, rule; rule = rules[i++];) {
            let strategyArr = rule.strategy.split(':')
            const errorMsg = rule.errorMsg
            const strategy = strategyArr.shift()
            strategyArr.unshift(value)
            strategyArr.push(errorMsg)
            this.cache.push(() => this[strategy](...strategyArr))
        }
    }

    exec() {
        for (let i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
            const errorMsg = validatorFunc()
            if (errorMsg) {
                return errorMsg
            }
        }
    }
}

function validate(data) {
    const validator = new Validator()

    validator.add(data.username, [{
        strategy: 'isNonEmpty',
        errorMsg: '用户名不能为空'
    }])
    
    validator.add(data.password, [{
        strategy: 'isNonEmpty',
        errorMsg: '密码不能为空'
    }, {
        strategy: 'minLength:6',
        errorMsg: '密码不能小于6位'
    }])


    const errorMsg = validator.exec()
    return errorMsg
}

function submit(data) {
    const errorMsg = validate(data)
    if (errorMsg) {
        console.error(errorMsg)
    } else {
        console.log('passed')
    }
}

const data = {
    username: 'shirmy',
    password: '12345'
}

submit(data)

参考资料:《JavaScript设计模式与开发实践》曾探.

相关文章

  • 设计模式之策略模式

    @(前端)[设计模式,JavaScript,TypeScript] 策略模式解决的问题:策略模式要解决的问题是,代...

  • JavaScript 策略模式

    策略模式的定义:定义一系列的算法,把它们意义封装起来,并且使他们可以相互替换。 策略模式计算奖金 奖金发放的场景:...

  • JavaScript策略模式

    策略模式:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换 策略模式至少要由一个策略类和一个环境类C...

  • JavaScript策略模式

    策略模式的定义:定义一系列的算法,把它们一个个封装起来,并且使它们可以互相替换。 一个基于策略模式的程序至少由两部...

  • JavaScript设计模式——策略模式

    策略模式是JavaScript设计模式中行为型的设计模式;定义: 定义一系列算法,并将这些算法各自封装成策略类(方...

  • javascript设计模式——策略模式

    策略模式:将定义的一组算法封装起来,使其互相之间可以替换。封装的算法具有一定独立性,不会随客户端变化而变化。 使用...

  • 策略模式【javascript设计模式】

    胡居仁:苟有恒,何必三更眠、五更起;最无益,莫过一日曝、十日寒 俗话说,条条大路通罗马,当我们想要成功完成一件事情...

  • JavaScript设计模式——策略模式

    策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。 俗话说,条条大路通罗马。在美剧...

  • JavaScript设计模式三(策略模式)

    JavaScript设计模式三(策略模式) 策略模式定义 定义一系列算法,把他们一个个封装起来,并且使他们相互替换...

  • javascript策略者模式

    转载:https://www.cnblogs.com/tugenhua0707/p/4722696.html理解j...

网友评论

      本文标题:JavaScript策略模式

      本文链接:https://www.haomeiwen.com/subject/rpnmqqtx.html