位置: 编程技术 - 正文
javascript设计模式--策略模式之输入验证(js设计模式有什么用)
发布时间：2024-02-27推荐整理分享javascript设计模式--策略模式之输入验证(js设计模式有什么用)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:js设计模式应用,javascript 设计,js设计模型,JAVASCRIPT设计模式与开发实践,js设计模式有什么用,js设计模式应用,js设计模型,js设计模型,内容如对您有帮助，希望把文章链接给更多的朋友！
策略模式定义了算法家族，分别封装起来，让他们之间可以互相替换，此模式让算法的变化独立于使用算饭的客户.
先定义一个简单的输入表单：
一般在页面上编辑信息后的提交动作中，都需要对输入的信息进行验证，会看到把很多负责check的代码写在提交函数中或者写在一个独立的check函数中。
比如像下面这样。
这样的写法功能上肯定能满足要求，但是，会存在几个问题：
1.如果我要在其他页面上使用，那就要将代码进行复制，所谓的复用就变成了复制，代码会存在大量重复。好一点的会把check代码分类整理封装，单还会存在较多的重复复制。
2.如果我要增加一个输入验证，那么就要直接修改提交函数，该函数会显的臃肿，并且是破坏“开闭”原则的。
3.如果修改了提交函数，就要将函数设计的测试全都覆盖一遍，因为，不知道何时就会发生误改或者未知的情况。
改造步骤：
1.将每个验证逻辑看成是一个验证策略并封装成每个验证策略函数，函数参数保持一致，可以接受dom元素，被验证的值，错误消息，定制参数。
2.定义验证器，可将验证策略函数导入，也可以添加。
3.验证器提供验证方法，用于验证时的调用，其内部调用具体的验证策略函数。
4.验证调用。
步骤1.
把每一个if都看成一种校验的业务规则，把每种业务规则作为一个单独的策略函数，将所有的策略函数封装成一个策略对象。
所有函数的参数的前3个都保持一致，而且是必须的，表示被验证的DOM元素，错误消息，被验证的值，第4个开始由函数自身的验证规则决定定制的参数，可有多个参数。
“buildInvalidObj”方法只是把前3个参数打成一个错误对象进行返回，只要验证不通过就会返回这个错误对象。
根据依赖倒置原则，高层次的模块不应该依赖于低层次的模块，因此不能让验证的调用方直接使用。
通过验证器的方式进行封装和抽象。
步骤2：
定义验证器，可以将所有验证策略导入其内，也可以单独添加验证策略函数。
步骤3：
添加验证方法，接受外部调用。
第一个参数rule，设置成验证规则，比如 "minLength:6"，通过下面的代码会生成对具体策略函数的调用，调用会压到缓存中，等待一起调用。
":6"表示策略函数根据自身规则所定制的参数。
通过一个check函数来调用所有的验证。并将错误的结果进行返回。
步骤4：
在需要验证的地方，先new一个验证器对象。
将包含验证策略函数的对象导入，或者单独添加验证策略函数。
可以看出，不同的验证策略我们可以预先封装进策略对象中，也可以根据实际情况即时添加。
然后通过添加验证方法将需要验证的策略，被验证的dom元素，错误消息，被验证的值添加进验证器中，这样避免了直接调用策略对象，降低了耦合性。
调用验证器的check执行所有的验证。
check返回的是错误对象，我们可以在check后通过该对象统一地对DOM元素进行提示性操作，比如设置焦点，选中内容，或者为输入框外部包上一层红色的样式。
至此，可以看出通过策略模式的改在，输入验证时，我们只需要关心用哪个验证规则，采用什么样的提示性信息即可，不再暴露实现细节，方便调用，方便后续的扩展和组件化。
全部代码：
以上所述是小编给大家介绍的javascript设计模式--策略模式之输入验证的全部内容，希望大家喜欢。
Bootstrap每天必学之导航条 1、导航条导航条（navbar）和上一节介绍的导航（nav），就相差一个字，多了一个条字。其实在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有
Bootstrap每天必学之标签与徽章 1、标签在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个new标签，来告诉用户
Bootstrap精简教程 Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。[1]它由Twitter的设计师MarkOtto
标签: js设计模式有什么用
本文链接地址:https://www.jiuchutong.com/biancheng/386304.html 转载请保留说明！上一篇：JS实现的表格行鼠标点击高亮效果代码(js写表格模板)
下一篇：Bootstrap每天必学之导航条(bootstrap需要学多久)
![[下载]微软发布Office 2016 for Mac预览版 内附下载(microsoft/微软)](https://www.jiuchutong.com/image/20240129/1706500346.jpg)
