你為了UI的功能性開始亂加Div及Class嗎?

在剛學寫網頁的時候，你一定會知道，元素上的class是拿來控制外觀的。

比如說，我們想要拿下面這個 button 元素來當作開關。

on

你當然會設定 btn 的css屬性來美化它的外觀。

但是，在這個JavaScript 當道的時代，class, 已經不只是拿來做純粹的靜態外觀了。我們一定會用它來做各種互動。比如說下面這個簡單的例子:

上面這份程式碼所做出來的開關就可以跟使用者互動，使用者的點擊會讓顯示文字在 on跟off之間切換 。

但光看DOM的結構的話，我們沒有辦法知道 div.toggle是有功能性的元素，我們可能會以為，這是一個有兩個子元素的一般div而已。

所以，為了讓這份HTML一看就能知道它大概的作用。我們可以把toggle改名成 js-toggle

這個命名小小的改變，讓我們觀察DOM結構的時候，不用先看熟自己Project 內的Javascript 就能知道js-toggle之後會在javascript中被使用。讓我們看第一眼HTML 就可以對這份文件的行為充滿想像力，擁有更豐富的語意。

分享這個一點小想法，希望讓大家的Project可以更好維護，更加茁壯:)

PS: 強者我友希望我幫忙廣告這個粉絲團XD

reference:
http://ozmm.org/posts/slightly_obtrusive_javascript.html
https://github.com/styleguide/javascript

tim_hsu

人生本是賤，欠操欠磨練