视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
javascript设计模式--策略模式之输入验证_javascript技巧
2020-11-27 21:46:21 责编:小采
文档

策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化于使用算饭的客户.

先定义一个简单的输入表单:


根据依赖倒置原则,高层次的模块不应该依赖于低层次的模块,因此不能让验证的调用方直接使用。

通过验证器的方式进行封装和抽象。

步骤2:

定义验证器,可以将所有验证策略导入其内,也可以单独添加验证策略函数。



步骤3:

添加验证方法,接受外部调用。

第一个参数rule,设置成验证规则,比如 "minLength:6",通过下面的代码会生成对具体策略函数的调用,调用会压到缓存中,等待一起调用。

":6"表示策略函数根据自身规则所定制的参数。



通过一个check函数来调用所有的验证。并将错误的结果进行返回。



步骤4:

在需要验证的地方,先new一个验证器对象。



将包含验证策略函数的对象导入,或者单独添加验证策略函数。



可以看出,不同的验证策略我们可以预先封装进策略对象中,也可以根据实际情况即时添加。

然后通过添加验证方法将需要验证的策略,被验证的dom元素,错误消息,被验证的值添加进验证器中,这样避免了直接调用策略对象,降低了耦合性。



调用验证器的check执行所有的验证。



check返回的是错误对象,我们可以在check后通过该对象统一地对DOM元素进行提示性操作,比如设置焦点,选中内容,或者为输入框外部包上一层红色的样式。

至此,可以看出通过策略模式的改在,输入验证时,我们只需要关心用哪个验证规则,采用什么样的提示性信息即可,不再暴露实现细节,方便调用,方便后续的扩展和组件化。

全部代码:

显示全文
专题