我上週在想一件事情就是，我看過一些網站，如Yahoo台灣首頁或是..健保局等等之類的網站，有類似換網站色系的功能，然後我自己也稍微猜測了一下要怎麼處理這樣的效果，但是這件事情很小，如果沒興趣就跳過別看了xd，因為我也不是說很花時間的去了解這件事情。
*而且我到現在還不是很了解這樣的功能是因為甚麼原因而來的? 有人可以告訴我嗎 ><
先來說我看了yahoo的心得好了，css的結構還Ok，但是javascript....，恩...那是壓縮過的，但是我還是有看，[詳見下方題外話]，只是看那種壓縮過的code真的很受打擊，很難懂xd，然後我就放棄了繼續去想這件事情，不過我能確定的是，在yahoo上換色系，每換一種顏色就送出好幾個http request，還有css檔案等... 好像是一種色系就是一個css file。
題外話 :
yahoo換色系功能整排是個ul>li*6的架構，每種顏色的li分別有自己的class name
然後控制顏色的js是一個物件的setter(好籠統的說法xd )，我只能看到這裡，實作上我就不懂了xd
set___什麼什麼___，就是設定什麼的意思，通常稱之為"取值器(Setters)"。
get___什麼什麼___，意思就是去取得什麼值，通常稱之為"設值器(Getters)"。
Setter與Getter是個很有趣的概念，應該說是個大學問，通常這兩個方法的出現是相輔相成的，我曾經在codecademy練習Javascript Object時有遇到，但我也不常寫Object(其實是我也不太會寫:P)，所以有興趣可以上網google一下。
就拿jQuery的height()方法來說好了: 當我要取得body的高度時，我會這樣寫:
$('body').height(); //會得到當下body標籤的高度
當.height(); (不傳入任何引數)
括弧裡面沒有東西的時候，jQuery就會當做你是要取得值，而且你會得到他回傳body的高度給你，這樣就是類似於Getter的意思。
那如果是$('body').height('100');
括弧裡面有傳引數的時候，jQuery就會當做你是要設定值，這樣就是類似於Setter的意思。執行後就真的會給<body>標籤高度100px的值:
$('body').height('100');
$('body').height();
100
有興趣的話可以在console.log玩玩看。
如果一個特性同時有getter跟setter，那就是可讀也可寫;
只有getter=>唯獨
只有setter=>只能寫入
yahoo換色系功能整排是個ul>li*6的架構，每種顏色的li分別有自己的class name
然後控制顏色的js是一個物件的setter(好籠統的說法xd )，我只能看到這裡，實作上我就不懂了xd
set___什麼什麼___，就是設定什麼的意思，通常稱之為"取值器(Setters)"。
get___什麼什麼___，意思就是去取得什麼值，通常稱之為"設值器(Getters)"。
Setter與Getter是個很有趣的概念，應該說是個大學問，通常這兩個方法的出現是相輔相成的，我曾經在codecademy練習Javascript Object時有遇到，但我也不常寫Object(其實是我也不太會寫:P)，所以有興趣可以上網google一下。
就拿jQuery的height()方法來說好了: 當我要取得body的高度時，我會這樣寫:
$('body').height(); //會得到當下body標籤的高度
當.height(); (不傳入任何引數)
括弧裡面沒有東西的時候，jQuery就會當做你是要取得值，而且你會得到他回傳body的高度給你，這樣就是類似於Getter的意思。
那如果是$('body').height('100');
括弧裡面有傳引數的時候，jQuery就會當做你是要設定值，這樣就是類似於Setter的意思。執行後就真的會給<body>標籤高度100px的值:
$('body').height('100');
$('body').height();
100
有興趣的話可以在console.log玩玩看。
如果一個特性同時有getter跟setter，那就是可讀也可寫;
只有getter=>唯獨
只有setter=>只能寫入
最後我覺得換色系的方法非常多....，可能需要按照實際手上的要實作的網站規模去決定要用甚麼方法或者使用效能較好的方法。
上方Change color因為HTML結構很簡單，所以我在每個換顏色的btn加了color-role的屬性，當按下btn之後會去抓需要改變色系的DOM，然後加CSS。
或者考慮操作document.styleSheets,
或者就參考如yahoo,健保局等作法。
沒有留言:
張貼留言
若你看的文章，時間太久遠的問題就別問了，因為我應該也忘了... XD