策略模式
2020/11/18 8:25:31
本文主要是介绍策略模式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
策略模式
定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换,就叫做策略模式。
策略模式与状态模式非常相似,都是为了避免大量堆砌条件语句,但在使用意图上却迥然不同:策略模式中的各个策略对象是没有任何关联的平行语句,使用者可以随心所欲选择某一种或某几种来达到不同的效果。
应用场景
比如我们现在需要编写一个表单校验的功能,以往的代码可能是下面这样:
例子:
价格:<input type="text" /> <script> const Input = document.querySelector('input'); Input.addEventListener('focusout', (e) => { if (Object.is(e.target.value, '')) { console.log('不能为空!'); } else if (typeof e.target.value !== 'number') { console.log('必须是数字!'); } }); </script>
上面这种比较常见的代码编写方式有几个缺点,首先是堆砌了过多的条件语句,其次是扩展性与复用性很低。针对这些问题,我们使用策略模式重构代码:
例子:
价格:<input type="text" /> <script> const CheckFrom = (() => { // 校验规则 const strategies = { isNotEmpty(value, errMsg) { if (Object.is(value, '')) { return errMsg; } }, isNumber(value, errMsg) { for (let n of String(value)) if (!'0123456789'.includes(n)) { return errMsg; } }, }; // 添加并启动校验规则的方法 const add = ({ element, rules = [] } = {}) => { for (let item of rules) { // 如果校验中有返回值,说明校验没有通过 const err = strategies[item.rule](element.value, item.errMsg); if (err) { console.log(err); } } }; return { add, }; })(); // 测试策略模式函数 const Input = document.querySelector('input'); Input.addEventListener('focusout', (e) => { CheckFrom.add({ element: e.target, rules: [ { rule: 'isNotEmpty', errMsg: '不能为空!' }, { rule: 'isNumber', errMsg: '必须是数字!' }, ], }); }); </script>
使用策略模式重构后的代码,仅仅通过配置就可以完成一个表单的校验,而且这些校验规则可以复用到任何地方。
如有错误,欢迎指正,本人不胜感激。
这篇关于策略模式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-06小米11i印度快充版ROM合集:极致体验,超越期待
- 2024-10-06【ROM下载】小米11i 5G 印度版系统, 疾速跃迁,定义新速度
- 2024-10-06【ROM下载】小米 11 青春活力版,青春无极限,活力全开
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求