自學(xué)前端不久，記錄遇到的問題和解決方案-------作者按

選項(xiàng)卡是一個非常常見的組件，也相對簡單，下面記錄了我遇到的一些問題和總結(jié)反思。

目標(biāo)是最普通的選項(xiàng)卡，上面有三個按鈕，點(diǎn)擊按鈕在下方內(nèi)容區(qū)分別顯示不同內(nèi)容。

html和css實(shí)現(xiàn)：

方法一：將三張圖片從上到下堆放，將內(nèi)容區(qū)設(shè)置為overflow：hidden，獲取內(nèi)容的top值，通過改變top值來顯示不同圖片。

方法二：方法一的實(shí)現(xiàn)方式有違選項(xiàng)卡的含義，因此在方法二中選擇讓圖片們進(jìn)行絕對定位，相互層疊，設(shè)置display：none，opacity：0，當(dāng)選項(xiàng)被激活，設(shè)置active類為display：block，opacity：1，z-index：3。

到這里位置基本實(shí)現(xiàn)功能，考慮到組件化對命名的要求，參考 puerh的命名規(guī)則重新命名，如下：

使用類名選擇器對樣式進(jìn)行設(shè)置，如下所示（部分）：

下面進(jìn)行js部分的書寫：

作為前端菜鳥剛開始選擇了最菜鳥的寫法，將每個按鈕的事件分別添加，如下：

寫完這部分丑陋的js就可以看到功能完整的選項(xiàng)卡了：

下面就要進(jìn)入本文的重點(diǎn)，js組件化

作為一個菜鳥看到上面的成果還是有點(diǎn)高興，但仔細(xì)一想，發(fā)現(xiàn)這是一個不能重用的“組件”，主要問題出在哪里呢？就是js，目前的js操作只針對當(dāng)前這唯一一個tab，假如我復(fù)制一個tab，完全不能實(shí)現(xiàn)同樣的功能。此外上圖所示的js代碼冗長多余，應(yīng)該使用循環(huán)嵌套的方式，如下：

結(jié)果運(yùn)行出錯，Uncaught TypeError: Cannot set property 'className' of undefined，仔細(xì)查看了幾遍代碼發(fā)現(xiàn)是作用域的問題，事件里面的函數(shù)將會在for循環(huán)完成后才會被觸發(fā)，因此導(dǎo)致這時的i已經(jīng)變成了lists.length。

解決方案：在外面包一個函數(shù)，如下：

復(fù)制一份tab，運(yùn)行，大功告成：

上述解決方案使用了兩層閉包，可以改寫成下面這樣，結(jié)構(gòu)比較清晰

當(dāng)然如果采用Jquery這個組件就非常簡單了，三行代碼就ok

后記：雖然是個非常簡單地組件，可能做得也不完善，但收獲不少，特此記錄。