Question

有哪些利于前端新手练习，理解JS的独立小项目

Answer 1

我给你个例子吧：编写一个注册页。
简而言之就是个 form 表单，从上到下分别是用户名、密码、昵称、注册邮箱等文本框，最下面是个提交按钮。
简单吧？我们加个小需求：给文本框加上数据校验功能。
校验方式总共有三种：
1，通过正则表达式限制能输入的字符和长度，比如用户名不能超过 15 字符，只能输入英语数字下划线。输别的输不进去。
2，同步校验。在文本框的 blur 事件中执行，用来校验数据格式，比如邮箱是否合法，或者任意字段不能为空。如果不合法，文本框右端打叉并写明原因。
3，异步校验，通过 ajax 向后台校验数据合法性，比如用户名、昵称和邮箱不能重复（你可以用setTimeout模拟）。如果不合法，文本框右端同样右端打叉写明原因。
各种校验有先后顺序，比如同步校验先执行，验证通过再执行异步校验。
注意两种情况：
第一，当用户点击提交的时候，由于某些字段文本框可能根本没有 focus 过，所以 blur 事件也没有，于是没被校验过。此时需要补充校验，通过之后方可提交。
第二，当用户点击提交的时候，异步校验可能还在执行没得到结果，此时你有两种选择，要么需要等待结果，通过之后方可提交。要么直接提交接收后台错误信息，弹框显示。我建议你试试第一种，以及，校验超时怎么办？
其实就是一个普通的简化版注册页，各个网站都有这么一套流程。老掉牙的东西。
你如果能用 jquery 把这套逻辑非常清晰的实现出来，清晰到看到代码就能口述出我刚才讲的这些需求，分门别类，条理清楚，扔给谁都可以随时维护，并且没有 bug。
那么你可以说基本具备了编写网站前端的基本功了。