面试官:策略模式有使用过吗?我:没有......(下)

简介: 面试官:策略模式有使用过吗?我:没有......(下)
  • • 使用策略模式重构后,我们后续仅需配置的方式来完成。
  • • 扩展题目:那如果想给用户名还想再添加一个规则,那如何完成呢?
  • • 添加规则方式如下:
validator.add(username, [
    {
        strategy: "isEmpty",
        msg: "用户名不能为空"
    },
    {
        strategy: 'minLength:6',
        msg: '密码不能少于 6 位'
    }
]);
  • • 实现:
let infoForm = {
    username: "阿斯顿发生的",
    password: "ss1sdf",
    tel: 15829485647,
};
var strategies = {
    isEmpty: function (val, msg) {
        if (!val) return msg;
    },
    minLength: function (val, length, msg) {
        if (val.length < length) return msg;
    },
    isTel: function (val, msg) {
        if (!/(^1[3|5|8][0-9]{9}$)/.test(val)) return msg;
    },
};
var validFn = function () {
    var validator = new Validator();
    let { username, password, tel } = infoForm;
    validator.add(username, [
        {
            strategy: "isEmpty",
            msg: "用户名不能为空",
        },
        {
            strategy: "minLength:6",
            msg: "密码不能少于 6 位",
        },
    ]);
    validator.add(password, [
        {
            strategy: "minLength:6",
            msg: "密码不能少于 6 位",
        },
    ]);
    validator.add(tel, [
        {
            strategy: "isTel",
            msg: "手机号码格式不正确",
        },
    ]);
    var msg = validator.start();
    return msg;
};
class Validator {
    constructor() {
        this.cache = [];
    }
    add(attr, rules) {
        for (let i = 0; i < rules.length; i++) {
            var rule = rules[i];
            var ruleArr = rule.strategy.split(":");
            var msg = rule.msg;
            var cacheItem = this.createCacheItem(ruleArr, attr, msg);
            this.cache.push(cacheItem);
        }
    }
    start() {
        for (let i = 0; i < this.cache.length; i++) {
            var msg = this.cache[i]();
            if (msg) return msg;
        }
    }
    createCacheItem(ruleArr, attr, msg) {
        return function () {
            var strategy = ruleArr.shift();
            ruleArr.unshift(attr);
            ruleArr.push(msg);
            return strategies[strategy].apply(attr, ruleArr);
        };
    }
}
function submit() {
    let msg = validFn();
    if (msg) {
        Toast(msg);
        return false;
    }
    console.log("verify success");
    // .....
}
submit();

策略模式的优缺点

  • • 优点:
  1. 1. 利用组合,委托,多态等技术有效避免了多重条件语句
  2. 2. 提供了对开封-封闭原则的完美支持
  3. 3. 复用性较强,避免许多重复的 C,V 工作
  • • 缺点:
  1. 1. 客户端比如了解所有的策略类,并选择合适的策略类。

策略模式的角色

  1. 1. Context(环境类):持有一个 Strategy 类的引用,用一个 ConcreteStrategy 对象来配置
  2. 2. Strategy(环境策略类):定义了所有支持的算法的公共接口,通常是以一个接口或抽象来实现。Context 使用这个接口来调用其 ConcreteStrategy 定义的算法。
  3. 3. ConcreteStrategy(具体策略类):以 Strategy 接口实现某种算法
  • • 比如以上的例子算法:

策略模式的应用场景

  1. 1. 想使用对象中各种不同算法变体来在运行时切换算法时
  2. 2. 拥有很多在执行某些行为时有着不同的规则时

Tip: 文章部分内容参考于曾探大佬的《JavaScript 设计模式与开发实践》。文章仅做个人学习总结

特殊字符描述

问题标注 Q:(question)答案标注 R:(result)注意事项标准:A:(attention matters)详情描述标注:D:(detail info)总结标注:S:(summary)分析标注:Ana:(analysis)提示标注:T:(tips)

目录
相关文章
|
前端开发
仿新浪sina轻个人微博html静态网页模板
一款最新的仿新浪sina个人微博html静态网页模板(轻博客/轻微博/贴吧主页、qq社交空间主题),模板清新简洁、新颖,包含关注、粉丝、人气、个人资料、文章、视频等。
167 0
|
10月前
|
存储 XML 开发工具
探索安卓应用开发:从基础到进阶
在这篇文章中,我们将一起踏上安卓应用开发的旅程。不论你是编程新手还是希望提升技能的开发者,这里都有你需要的东西。我们会从最基础的概念开始,逐步深入到更复杂的主题。文章将涵盖开发环境设置、用户界面设计、数据处理以及性能优化等方面。通过理论与实践的结合,你将能够构建出既美观又高效的安卓应用。让我们一起开启这段技术之旅吧!
|
10月前
|
敏捷开发 存储 数据可视化
无纸化办公用什么软件能够最快提高工作效率!
无纸化办公(Paperless Office)是现代办公的重要趋势,旨在减少纸张使用,保护环境,提高效率,降低成本。通过电子文件管理,无纸化办公实现了快速查找、即时共享和远程协作,大幅提升了工作效率。文章推荐了五款高效无纸化办公软件:板栗看板、Jira、Wrike、Basecamp 和 Monday.com,这些工具在任务管理、项目协作和数据统计等方面表现出色,助力企业实现无纸化转型。
|
机器学习/深度学习 存储 PyTorch
还没了解MIGraphX推理框架?试试这篇让你快速入门
MIGraphX是一款用于DCU上的深度学习推理引擎,它的目的是为了简化和优化端到端的模型部署流程,包括模型优化、代码生成和推理。MIGraphX能够处理多种来源的模型,如TensorFlow和Pytorch,并提供用户友好的编程界面和工具,使得用户可以集中精力在业务推理开发上,而不需要深入了解底层硬件细节。
465 0
selenium.common.exceptions.InvalidElementStateException Message Unable to perform W3C actions
selenium.common.exceptions.InvalidElementStateException Message Unable to perform W3C actions
195 0
|
存储 Oracle 关系型数据库
|
测试技术
华为OD:IPv4地址转换成整数
华为OD:IPv4地址转换成整数
223 0
|
JavaScript
Vue使用v-model和提交组件实现数据的双向绑定
前段时间有一个朋友在使用vue的时候遇到了一点问题,当时在进行期末答辩所以没找到时间整理代码,今天在整理电脑文件的时候刚好看到了发给朋友的代码,整理下思路和代码顺手发个文章,希望能帮助到更多的人
353 0
|
前端开发 JavaScript
div在网页中四周留个等宽“包边”的办法
div在网页中四周留个等宽“包边”的办法
122 0
div在网页中四周留个等宽“包边”的办法