原生js練習題-第一課

0x0關於這個系列

差很少把《js高級程序設計》刷完了，所謂實踐出真知，尤爲編程這種實踐和經驗至關重要的事情，不能光說不作。但以我如今的水平，直接上手那些大項目是仍是未入流的，仍是得一步步紮實好基礎再有能力去開拓新世界、遇上前端界風起雲涌的浪潮。

因而找來了前輩們留下的經典原生js練習題，以期把看過的內容用起來，加深本身對原生js的掌握。我是這麼安排的：

1. 每一題先按本身已有的知識水平快速實現出功能來，不追求過分優化；面向將來、儘可能使用標準ES5方法，不考慮兼容老舊和非標準瀏覽器。

2. 再經過查資料、對比他人的實現、按照前人代碼優化的經驗來對編程過程當中出現的問題和不足進行總結、優化。並以此進行一次重構，讓代碼質量更上一層樓的同時也使本身掌握那些最佳實踐。

3. 最後我要將本身作每道題的心得寫成一個系列的博文、每課一篇，並把實現好的代碼放到個人codepen演示。這樣一來起到內化、總結做用，二來至關一個打卡、監督我本身完成，三來也是爲了方便交流。

正是想到只閉門造車是不夠的，還要在與其餘開發者的長期交流中進一步提高本身、結交志同道合的夥伴，纔有寫這個系列博文的想法、纔有了這個開篇。但願借本身的努力幫到更多的人吧，若是交流交流還能讓hr收了小弟我，那也是極好的~

0x1控制div屬性

實現效果

簡單的樣式轉換，對div的style屬性修改樣式便可，不過怎麼優雅地修改就得好好想一想了。

我把新樣式存在一個對象裏，並保證其屬性名與style對象的屬性名一致，這樣既清楚又方便調用和維護。重置樣式則直接將style對象的cssText屬性清空便可，但我一開始還傻傻地用window.getComputedStyle()去獲取原來的樣式來替換。。。

這裏還借用了構造閉包技巧來獲取某次循環的循環變量值，原來cloudAi童鞋給的實現裏是將這些量逐個綁到按鈕上，但我仍是感受用上閉包這種利器更優雅。

最後，代碼要遵循解耦應用邏輯/事件處理程序的原則，點擊事件只負責提取獲取按鈕的索引便可，修改樣式的事交給獨立的應用程序去作。因而我在優化時把事件處理程序那一坨修改樣式挪到外面去變成獨立方法了。

更新：發現還能夠在幾個按鈕所在的容器上使用事件代理來實現，這樣就能夠把那個循環和裏面的複雜邏輯拋棄了，同時減小了事件處理程序的數目、提高了性能，也使程序更具拓展性。

順便也把changeStyle方法優化了一下，原來那種依靠下標來肯定功能、期望按鈕的位置能和樣式對象的屬性順序相同的方式太不靠譜了，並且實現起來複雜、代碼讀起來也不清晰。如今改成用id來肯定功能，同時使用switch-case語句，有效解決了上述問題。

0x2網頁換膚

實現效果

這題也是簡單的樣式轉換，卻是由於我只關注js久了，寫起頁面來反倒生疏了，連個基本的導航欄都要寫半天，因此說前端這種涉及面廣的工做仍是得常練常寫。

關鍵也就兩部分---皮膚的切換、三個皮膚選擇方塊的樣式切換。首先，仍是得給三個皮膚選擇方塊找個click事件代理，方便事件的響應，而後就能夠在響應裏實現切換了。

這裏把皮膚的樣式存於不一樣的css文件，再在js裏用個對象保存下各自的url，切換樣式也就只負責切換link元素的href值而已，這樣作既下降耦合，又添加、方便配置主題。

至於皮膚選擇方塊的樣式切換，js作的也只是的active類的增刪。爲增刪class還專門用正則實現了三個函數，也算練習了下正則。這裏要注意使用RegExp()構造正則表達式時傳的參數，只傳表達式的內容就行了，不要再傳個//；同時由於\用於字符串轉義了，故應使用\\實現正則裏的轉義。

此外，此次看起來簡單的開發過程當中還由於使用for-in遍歷children屬性出了點bug讓我摸索了很久，這裏先不展開，我會再另外寫篇文章好好分析這個問題。

0x03函數接收參數並彈出

實現效果

簡單的表單數據獲取。

0x04用循環將三個Div變成紅色

實現效果

簡單的樣式轉換，使用getElementsByClassName最方便XD。

0x05鼠標移入移出改變樣式

實現效果

繼續樣式轉換，雖然用css的hover僞類便能實現，但既然是js的練習題就得用用鼠標事件了。有兩組事件可供選擇，mouseenter和mouseleave、mouseover和mouseout，區別就在後者在鼠標移入移出子元素時還會再觸發一次，而前者不會。

0x06記住密碼提示框

實現效果

和上面一題一模一樣，仍是採用監聽鼠標事件mouseover和mouseout修改樣式。同時也複習一下label標籤的用法：除了用for屬性與指定的表單元素關聯外，直接把表單元素包含在label裏面也能實現關係。

這裏還有個樣式上的小問題，就是多選框的底部每每不會和同一label下的文字底部對齊的，爲了讓他們大體上對齊點，最好將多選框的vertical-align屬性設爲middle。

---第一課完---