探索两种优雅的表单验证——策略设计模式和ES6的Proxy代理模式 about blog HOT 32 OPEN

只要我还在学习和摸索，我就把自己学到的记录下来，分享给大家

from blog.

受教
好喜欢这种文章~~
希望作者高产~~

from blog.

大哥....第一个html的提交按钮改成type ='submit'.

from blog.

策略模式没有留出口吧，所有条件检验成功后，再次点击提交this.cache会报错，

from blog.

什么错误，能看一下截图吗，确保在chrome浏览器下测试，我这边测试都没问题的。@BiYuqi

from blog.

实在抱歉，是我的问题，我没有用es6写。导致用普通for循环条件判断结束后出错，现在已经修正，向您学习

from blog.

大神，还缺基友么。

from blog.

原生JS看起来就是很舒服

from blog.

火钳刘明

from blog.

手脚了

from blog.

学习了！

（最后 Refs 放的居然不是豆瓣读书的链接...）
JavaScript设计模式与开发实践

from blog.

赞，个人最近在看一本关于JavaScript设计模式的书，将设计模式结合在工作与实践中，对代码的整体结构和设计都有很大的帮助，有利于梳理逻辑和后续的维护工作。

from blog.

我运行了原始的验证方法，就好多if 那个，但是发现在验证未通过情况下点击提交之后，依然会提交。后来加了preventDefault之后才阻止了提交。请问博主你那是这样的吗？

from blog.

好像是的啊，不过影响不大，知道思路就行 @Goldbeener

from blog.

最喜欢这种结合设计模式编写的代码了，看着就舒服，最近也在看js设计模式的书，获益良多

from blog.

按照上面的代码 校验不通过控制台会报错

'set' on proxy: trap returned falsish for property 'passwd'

from blog.

es6结合设计模式简直太清晰强大了！

from blog.

这样最后提交的时候验证只需要实例化一次，要是每个表单元素都实时验证那不是要实例化多个？

from blog.

为什么后面还要用 generator函数，多余了

from blog.

Proxy部分有点生硬的，同样思路不用Proxy感觉反而会更好

from blog.

Proxy部分很强大很简洁～～～～谢谢

from blog.

好文，逻辑看起来清晰明了！

from blog.

不错

from blog.

严格模式下return false会报错

from blog.

赞，个人最近在看一本关于JavaScript设计模式的书，将设计模式结合在工作与实践中，对代码的整体结构和设计都有很大的帮助，有利于梳理逻辑和后续的维护工作。

@TopGrd 请问看的哪一本呀

from blog.

转载了，前端读者 公众号，让更多人学习学习 ^_^

from blog.

赞，个人最近在看一本关于JavaScript设计模式的书，将设计模式结合在工作与实践中，对代码的整体结构和设计都有很大的帮助，有利于梳理逻辑和后续的维护工作。

@TopGrd 请问看的哪一本呀

JavaScript设计模式与开发实践我觉得腾讯大佬的这本不错，感觉这篇文章的作者应该也看过，因为举的例子差不多~

from blog.

大兄弟，你第一个策略模式的例子, 至少放一下参考的出处吧 JavaScript设计模式与开发实践, 也算是对别人著作的尊重

from blog.

策略模式那部分的例子很不错，但我想的是在某些情况下策略模式是否可以简化成一种hash map的形式，我们将算法定义在一个hashMap中，然后通过match的方式，调用这些方法，这样是否也能称之为策略模式？
例如这样：

const matchMap = {
  handleSomeThing: () => {
    console.log('got control');
  },
}

matchMap['handleSomeThing']()

from blog.

大佬，策略模式的那个例子里的validator.add 和validator.start我可不可理解为使用了职责链模式？add方法相当于指定了职责链的链条顺序，start方法则是开始是执行链条？

from blog.

第一种验证方式中，isMoblie拼写错误，应该是isMobile

from blog.

真的很棒！！感觉最后一段用async await 改一下会更易读一点。

from blog.