任務描述

1.用戶輸入城市名稱和空氣質量指數后，點擊“確認添加”按鈕后，就會將用戶的輸入在進行驗證后，添加到下面的表格中，新增一行進行顯示

2.用戶輸入的城市名必須為中英文字符，空氣質量指數必須為整數

3.用戶輸入的城市名字和空氣質量指數需要進行前后去空格及空字符處理（trim）

4.用戶輸入不合規(guī)格時，需要給出提示（允許用alert，也可以自行定義提示方式）

5.用戶可以點擊表格列中的“刪除”按鈕，刪掉那一行的數據

實現界面

雖然滿足了這次任務的需求，但是看了前輩們高分作品的源碼后，發(fā)現他們的代碼卻非常的簡潔。大約只用了我的一半，而且一些實現方式也是我沒見過的，著實讓我get到很多點。所以這次重新改了下代碼，并總結下其中的知識點和一些自己犯過的錯誤。

一.表單驗證

1.正則表達式

表單驗證

2.作用域問題

錯誤點

開始在click事件處理函數中調用trim函數，卻沒能實現去空格的效果，究其原因是作用域的問題。

需要注意的是：

1.在某個執(zhí)行環(huán)境中所有代碼執(zhí)行完畢后，該環(huán)境被銷毀，保存在其中的所有變量（局部變量）和函數定義也隨之銷毀，而全局變量則是直到應用程序退出（例如網頁或瀏覽器關閉）時才會被銷毀。

2.作用域鏈：內部環(huán)境可以通過作用域鏈訪問所有的外部環(huán)境，但外部環(huán)境不能訪問內部環(huán)境中的任何變量和函數。

這里的錯誤即，click時間處理函數本身就是個局部環(huán)境，其中定義的變量均是局部變量（很長一段時間內我都忽略了這點）。故在trim函數中的str num其實是另外重新定義的變量，無法接收來自click函數里的的str和num。

改正后

改正的方法即把trim函數放在click事件處理函數里面，因為作用域鏈機制，可以訪問到函數外面環(huán)境中的str和num。

3.拓展-如何實現非模態(tài)的錯誤反饋

用alert實現的模態(tài)反饋

用alert方式實現的錯誤反饋是模態(tài)的，即要求用戶離開原來的操作流，這樣的體驗必然是不佳的。

非模態(tài)反饋

keyup事件

利用keyup事件，在用戶輸入的過程中就提醒用戶輸入錯誤，并且置灰確認按鈕。

二.表格渲染

1.插入表格項的簡單方式

動態(tài)插入表格數據

原來我的實現方式是用節(jié)點生成（createElement）,節(jié)點插入（appendChild）等DOM操作來實現，但是代碼卻非常繁瑣。以字符串形式把標簽和內容一起插入到父級table的innerHTML，這種實現方式非常簡潔。

2.事件委托

點擊span 刪除當前行

什么是事件委托？

對“事件處理程序過多”問題的解決方案就是事件委托。事件委托利用了事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。

為什么要用事件委托？

因為在JS中，添加到頁面上的事件處理程序數量將直接關系到頁面的整體性能。

如何運用事件委托？

暫時理解的是 給父級（或更高的層次）添加事件處理函數+用標簽名判斷哪個子級會執(zhí)行。

注意點：標簽名在JS中是以大寫形式獲取到的，所以在判斷時要用toLowerCase()轉化成小寫。

3.其它未能運用的知識點-dataset

關于javascript中dataset的問題小結