資訊專欄INFORMATION COLUMN
摘要：于是找來了前輩們留下的經(jīng)典原生練習(xí)題，以期把看過的內(nèi)容用起來，加深自己對原生的掌握。鼠標(biāo)移入移出改變樣式實現(xiàn)效果繼續(xù)樣式轉(zhuǎn)換，雖然用的偽類便能實現(xiàn)，但既然是的練習(xí)題就得用用鼠標(biāo)事件了。
0x0關(guān)于這個系列
差不多把《js高級程序設(shè)計》刷完了，所謂實踐出真知，尤其編程這種實踐和經(jīng)驗相當(dāng)重要的事情，不能光說不做。但以我現(xiàn)在的水平，直接上手那些大項目是還是不夠格的，還是得一步步扎實好基礎(chǔ)再有能力去開拓新世界、趕上前端界風(fēng)起云涌的浪潮。
于是找來了前輩們留下的經(jīng)典原生js練習(xí)題，以期把看過的內(nèi)容用起來，加深自己對原生js的掌握。我是這么安排的：
每一題先按自己已有的知識水平快速實現(xiàn)出功能來，不追求過度優(yōu)化；面向未來、盡量使用標(biāo)準(zhǔn)ES5方法，不考慮兼容老舊和非標(biāo)準(zhǔn)瀏覽器。
再通過查資料、對比他人的實現(xiàn)、按照前人代碼優(yōu)化的經(jīng)驗來對編程過程中出現(xiàn)的問題和不足進(jìn)行總結(jié)、優(yōu)化。并以此進(jìn)行一次重構(gòu)，讓代碼質(zhì)量更上一層樓的同時也使自己掌握那些最佳實踐。
最后我要將自己做每道題的心得寫成一個系列的博文、每課一篇，并把實現(xiàn)好的代碼放到我的codepen演示。這樣一來起到內(nèi)化、總結(jié)作用，二來相當(dāng)一個打卡、監(jiān)督我自己完成，三來也是為了方便交流。
正是想到只閉門造車是不夠的，還要在與其他開發(fā)者的長期交流中進(jìn)一步提升自己、結(jié)交志同道合的伙伴，才有寫這個系列博文的想法、才有了這個開篇。希望借自己的努力幫到更多的人吧，如果交流交流還能讓hr收了小弟我，那也是極好的~
0x1控制div屬性實現(xiàn)效果
簡單的樣式轉(zhuǎn)換，對div的style屬性修改樣式即可，不過怎么優(yōu)雅地修改就得好好想想了。
我把新樣式存在一個對象里，并保證其屬性名與style對象的屬性名一致，這樣既清楚又方便調(diào)用和維護(hù)。重置樣式則直接將style對象的cssText屬性清空即可，但我一開始還傻傻地用window.getComputedStyle()去獲取原來的樣式來替換。。。
這里還借用了構(gòu)造閉包技巧來獲取某次循環(huán)的循環(huán)變量值，原來cloudAi童鞋給的實現(xiàn)里是將這些量逐個綁到按鈕上，但我還是感覺用上閉包這種利器更優(yōu)雅。
最后，代碼要遵循解耦應(yīng)用邏輯/事件處理程序的原則，點擊事件只負(fù)責(zé)提取獲取按鈕的索引即可，修改樣式的事交給獨立的應(yīng)用程序去做。于是我在優(yōu)化時把事件處理程序那一坨修改樣式挪到外面去變成獨立方法了。
更新：發(fā)現(xiàn)還可以在幾個按鈕所在的容器上使用事件代理來實現(xiàn)，這樣就可以把那個循環(huán)和里面的復(fù)雜邏輯拋棄了，同時減少了事件處理程序的數(shù)目、提升了性能，也使程序更具拓展性。
順便也把changeStyle方法優(yōu)化了一下，原來那種依靠下標(biāo)來確定功能、指望按鈕的位置能和樣式對象的屬性順序相同的方式太不靠譜了，而且實現(xiàn)起來復(fù)雜、代碼讀起來也不清晰。現(xiàn)在改為用id來確定功能，同時使用switch-case語句，有效解決了上述問題。
0x2網(wǎng)頁換膚實現(xiàn)效果
這題也是簡單的樣式轉(zhuǎn)換，倒是因為我只關(guān)注js久了，寫起頁面來反倒生疏了，連個基本的導(dǎo)航欄都要寫半天，所以說前端這種涉及面廣的工作還是得常練常寫。
關(guān)鍵也就兩部分---皮膚的切換、三個皮膚選擇方塊的樣式切換。首先，還是得給三個皮膚選擇方塊找個click事件代理，方便事件的響應(yīng)，然后就可以在響應(yīng)里實現(xiàn)切換了。
這里把皮膚的樣式存于不同的css文件，再在js里用個對象保存下各自的url，切換樣式也就只負(fù)責(zé)切換link元素的href值而已，這樣做既降低耦合，又添加、方便配置主題。
至于皮膚選擇方塊的樣式切換，js做的也只是的active類的增刪。為增刪class還專門用正則實現(xiàn)了三個函數(shù)，也算練習(xí)了下正則。這里要注意使用RegExp()構(gòu)造正則表達(dá)式時傳的參數(shù)，只傳表達(dá)式的內(nèi)容就好了，不要再傳個//；同時因為用于字符串轉(zhuǎn)義了，故應(yīng)使用實現(xiàn)正則里的轉(zhuǎn)義。
此外，這次看起來簡單的開發(fā)過程中還因為使用for-in遍歷children屬性出了點bug讓我摸索了好久，這里先不展開，我會再另外寫篇文章好好分析這個問題。
0x03函數(shù)接收參數(shù)并彈出實現(xiàn)效果
簡單的表單數(shù)據(jù)獲取。
0x04用循環(huán)將三個Div變成紅色實現(xiàn)效果
簡單的樣式轉(zhuǎn)換，使用getElementsByClassName最方便XD。
0x05鼠標(biāo)移入移出改變樣式實現(xiàn)效果
繼續(xù)樣式轉(zhuǎn)換，雖然用css的hover偽類便能實現(xiàn)，但既然是js的練習(xí)題就得用用鼠標(biāo)事件了。有兩組事件可供選擇，mouseenter和mouseleave、mouseover和mouseout，區(qū)別就在后者在鼠標(biāo)移入移出子元素時還會再觸發(fā)一次，而前者不會。
0x06記住密碼提示框實現(xiàn)效果
和上面一題如出一轍，還是采用監(jiān)聽鼠標(biāo)事件mouseover和mouseout修改樣式。同時也復(fù)習(xí)一下label標(biāo)簽的用法：除了用for屬性與指定的表單元素關(guān)聯(lián)外，直接把表單元素包含在label里面也能實現(xiàn)關(guān)系。
這里還有個樣式上的小問題，就是多選框的底部往往不會和同一label下的文字底部對齊的，為了讓他們大致上對齊點，最好將多選框的vertical-align屬性設(shè)為middle。
---第一課完---
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/87700.html
摘要：開關(guān)旋鈕電位器的實驗視頻已經(jīng)購買開發(fā)版的同學(xué)開始上課來一場緊張刺激的之旅吧前言開發(fā)工具的下載安裝使用都很簡單我這里就不贅述了附上官方的說明跟著步驟來十分鐘搞定相關(guān)連接下載官方為什么成為開發(fā)函數(shù) ...
摘要：小結(jié)這下我們可以得出結(jié)論了個屬性返回的對象不止能遍歷到子元素，還能遍歷到來自其原型的三個屬性。既要防止那些添加修改了原型屬性的對象遍歷出多余的的結(jié)果，也要防止類似這種非標(biāo)準(zhǔn)屬性返回一個屬性的枚舉性不可控的對象的坑。 問題的引出 關(guān)于DOM元素的children屬性，以前我只在意它和childNodes屬性的區(qū)別：即children屬性只會返回子元素節(jié)點集合，而childNodes返回的...
摘要：屌絲和女神約好一起喝咖啡，聊天很愉快，分開不久手機(jī)收到女神發(fā)來的一個信息西女一個西女，你的嘴巴和手好白，你的嘴巴和手好白，你的嘴巴和手好白。屌絲看到了這句話頓時懵逼了。其實如果沒有編輯器，你就相當(dāng)于女神，電腦就相當(dāng)于屌絲，他看不懂你寫的。 javascript,當(dāng)今最流行的開發(fā)語言之一，既有它簡單易學(xué)的一面，又有它不同于其它語言奇怪的一面。我們一起通過感受javascript之美這套課...
閱讀 1448·2021-09-22 16:04
閱讀 2806·2019-08-30 15:44
閱讀 893·2019-08-30 15:43
閱讀 771·2019-08-29 15:24
閱讀 1852·2019-08-29 14:07
閱讀 1140·2019-08-29 12:30
閱讀 1734·2019-08-29 11:15
閱讀 2747·2019-08-28 18:08
