IFE-JS-task总结（1）—表单验证和表格渲染的实现

1.用户输入城市名称和空气质量指数后，点击“确认添加”按钮后，就会将用户的输入在进行验证后，添加到下面的表格中，新增一行进行显示

2.用户输入的城市名必须为中英文字符，空气质量指数必须为整数

3.用户输入的城市名字和空气质量指数需要进行前后去空格及空字符处理（trim）

4.用户输入不合规格时，需要给出提示（允许用alert，也可以自行定义提示方式）

5.用户可以点击表格列中的“删除”按钮，删掉那一行的数据

实现界面

虽然满足了这次任务的需求，但是看了前辈们高分作品的源码后，发现他们的代码却非常的简洁。大约只用了我的一半，而且一些实现方式也是我没见过的，着实让我get到很多点。所以这次重新改了下代码，并总结下其中的知识点和一些自己犯过的错误。

1.正则表达式

表单验证

2.作用域问题

错误点

开始在click事件处理函数中调用trim函数，却没能实现去空格的效果，究其原因是作用域的问题。

需要注意的是：

1.在某个执行环境中所有代码执行完毕后，该环境被销毁，保存在其中的所有变量（局部变量）和函数定义也随之销毁，而全局变量则是直到应用程序退出（例如网页或浏览器关闭）时才会被销毁。

2.作用域链：内部环境可以通过作用域链访问所有的外部环境，但外部环境不能访问内部环境中的任何变量和函数。

这里的错误即，click时间处理函数本身就是个局部环境，其中定义的变量均是局部变量（很长一段时间内我都忽略了这点）。故在trim函数中的str num其实是另外重新定义的变量，无法接收来自click函数里的的str和num。

改正后

改正的方法即把trim函数放在click事件处理函数里面，因为作用域链机制，可以访问到函数外面环境中的str和num。

3.拓展-如何实现非模态的错误反馈

用alert实现的模态反馈

用alert方式实现的错误反馈是模态的，即要求用户离开原来的操作流，这样的体验必然是不佳的。

非模态反馈

keyup事件

利用keyup事件，在用户输入的过程中就提醒用户输入错误，并且置灰确认按钮。

1.插入表格项的简单方式

动态插入表格数据

原来我的实现方式是用节点生成（createElement）,节点插入（appendChild）等DOM操作来实现，但是代码却非常繁琐。以字符串形式把标签和内容一起插入到父级table的innerHTML，这种实现方式非常简洁。

2.事件委托

点击span 删除当前行

什么是事件委托？

对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

为什么要用事件委托？

因为在JS中，添加到页面上的事件处理程序数量将直接关系到页面的整体性能。

如何运用事件委托？

暂时理解的是给父级（或更高的层次）添加事件处理函数+用标签名判断哪个子级会执行。

注意点：标签名在JS中是以大写形式获取到的，所以在判断时要用toLowerCase()转化成小写。

3.其它未能运用的知识点-dataset

关于javascript中dataset的问题小结