JavaScript 设计模式（二）：策略模式

JavaScript 设计模式（二）：策略模式

一、基本模式

1、定义：

  封装好算法，根据需要来切换使用。

2、核心：

  封装算法，提供使用。

3、实现：

// 封装的算法
const info = {
    'cat': function () {
        return '猫'
    },
    'dog': function () {
        return '狗'
    },
    'fish': function () {
        return '鱼'
    },
}

// 调用算法的入口
function printInfo(animal) {
    const fn = info[animal]
    console.log(fn())
}

// 执行入口函数
printInfo('cat')    // 猫
printInfo('dog')    // 狗
printInfo('fish')   // 鱼

二、扩展模式

  策略模式运用在很多方面，平常我们自己封装各种函数来使用未尝不是一种体现。接下来，作者将实现一个简单的表单校验，可以添加自定义规则，并校验。

// 校验规则
var rules = {
    // 基本数据类型校验
    'number': function (n, isCheck, errorMsg) {
        if (isCheck !== 'true') return 'pass'
        if (typeof n === 'number') return 'pass'
        return errorMsg || '[请填写number格式]'
    },
    'min': function (n, limit, errorMsg) {
        limit = parseInt(limit)
        if (n < limit) return errorMsg || `最小请输入${limit}`
        return 'pass'
    },
    'required': function (n, isRequired, errorMsg) {
        if (isRequired !== 'true') return 'pass'
        if (n) return 'pass'
        return errorMsg || '[必填项]'
    }
}

// 验证器
function Validator() {}
Validator.prototype.test = function (v, rule, errorMsg) {
    // 格式化。例如：'required' => 'requried: true'
    if (rule.indexOf(':') < 0) {
        rule += ':true'
    }

    // 获取规则属性和对应值。如：'required: true' => ['required', 'true']
    const [ruleName, ruleValue] = rule.split(':')
    const fn = rules[ruleName]
    console.log(fn(v, ruleValue, errorMsg))
}

// 开始校验数据。
// 参数依次为：校验值、校验规则参数、错误提示
var validator = new Validator()
validator.test('1111', 'number', '请填写数字!') // 请填写数字!
validator.test(9, 'min:10', '最小填入10!') // 最小填入10!
validator.test(null, 'required', '必填项!') // 必填项!
validator.test(111, 'number', '请填写数字!') // pass
validator.test(111, 'min:10', '最小填入10!') // pass
validator.test(111, 'required', '必填项!') // pass

参考资料：
  1、JavaScript中常见的十五种设计模式

<<< 上一篇：JavaScript 设计模式（一）：单例模式