實際上來說，我們學習的所有東西，最終的一個目的，就是用它來寫東西，來做事的。
所以儘管面向對象，我們現在纔剛剛開始，但是我們可以用它來做點小東西，比如做一個列表。
先給大家看下成品效果：
像這樣的一個列表，如果我想用類來實現，這是特別常見的一個情況。
比方說我這個列表，它不光有熱門主播，還可能有熱門音樂，熱門新聞等等一系列的。
所以它是一個非常有重用需求的這麼一個東西，那麼在這種情況下，我就想看看，用類的方式來完成它，會是怎樣的一種感覺。
我們先來稍微來看一下 index.html 裏面的一些佈局，樣式就不貼出來了，就是一個排列和間隔區分開來。
你可以看到，它整個就是一個大的 div，叫 hot-host。
然後下面有個 div，展示它的名字 title。
還有個 ul，裏面三個一樣的 li。
那麼我們直接開始，如果我想要來用一個類來表述這個事情，那你要注意了：
首先，任何一個類，不是說你拿過來直接開始寫就完事了。不是的，這種方法是最低效的。
我們一上來就要考慮清楚，要先想，想什麼呢？
我得看看，它到底包括一些什麼樣的屬性，以及包括一些什麼樣的方法。
當然，你可能會說，我不知道怎麼想。
其實非常的簡單，你就看一看，要求你有什麼功能就行了。比方說，像我現在這個東西，可能沒太多要求，我的要求就是你給我弄出來就行，所以現在這時候就可以不用設計那麼多的方法出來。
當然順便一說，這裏有個小技巧。
我一般習慣於先考慮功能，因爲功能其實就代表了這個類的方法。
比如，我們現在來假想一下，這個列表它有這麼幾個功能：
1，得能夠從服務器去加載數據,，那我可能就得給它一個 reload 方法。
2，然後這個列表，可能要動態的往裏面去添加東西，所以我可以多一個添加方法 add 。或者叫 push，名字你自己取，有就行。
3，然後也可能有刪除，比如 remove。
所以說白了，如果我們想要去設計一個類的話，我的建議非常的簡單：
你先別寫，第一件事你得先琢磨，先想想你都有什麼樣的功能。
而根據功能，你就可以推算出要寫什麼方法了。
比方說你們產品設計了，我得能夠往裏面添東西，那我就有一個添加方法。
再說的更實在一點，有沒有一個這樣的可能：
在一開始的時候，就把這個類它裏面所有，該有的方法，該有的屬性，全部都設計的特別合理。並且在你們這個項目整個的生存週期之內，比如說這項目存在 5 年 10 年的，那這些代碼一個字不用動。
這個是不太可能的。
說白了，我們一上來設計完之後，可能就算是一草稿。
然後，你在做的過程當中纔會發現，哎呀，少一個修改，得加一個。
這種情況纔是非常正常的，如果不出這事才奇怪，纔有問題。
所以說，我們一開始考慮個七七八八，然後在做的過程中，和產品調整需求的過程當中，這個東西逐漸再來動。
這裏稍微囉嗦下，因爲我認爲設計好一個類，比寫好一個類還要重要。
實際上來說，我們真正去設計一個類的時候，我認爲其實是一個自上而下的過程，什麼叫自上而下呢？
首先，一開始我們考慮的是，你得先明白，這個類是幹什麼用的。
比如說我現在就對應的上面那個列表，那在這過程當中：
第一，我考慮它都對外提供哪些功能。
注意，這個時候，我還不考慮哪些方法，目前就考慮這個類有哪些功能。因爲你的每一個功能，有可能並不一定只靠一個方法。
然後第二，有了功能了，我們在來分解，在看看，它都需要哪些方法。
第三，在這些方法的過程當中，在考慮我可能會用到哪些數據，也就是屬性。
這時候大概就七七八八，能出來了。
所以，我個人一般都是這個思路：
1，功能。
2，方法。
3，數據。
那麼接下來，我們就用這個套路來看下，這個東西怎麼做：
首先第一個問題，我們的功能都有哪些？
第一，可能要能修改標題。
第二，列表的內容和數據需要能設置。
第三，可能要重新的去渲染這個列表。比方說數據變了，或者怎麼着。
那麼接下來，我們就來考慮下，都需要哪些方法。
首先，修改標題，那我們是不是可以對外提供一個 setTitle。當然，根據絕大多數的經驗來說，set 跟 get 是相對的，就是說有 set，一般就有 get，所以 getTitle 也可以有。
再接下來，我們要能夠去設置列表的數據，那我就叫 setData。名字都無所謂，因爲上一篇博客我們也說了，類，它其實就是一個命名的空間。所以在這裏面，你的名字可以不用考慮。比如我外面還有一個 setData，沒關係，類裏面是一個獨立的空間。
然後我還需要能重新渲染，那就叫它 render。
再接下來，我們就可以考慮考慮，需要什麼樣的數據。
因爲我們這邊有 setTitle，所以我肯定得有一個 title 數據。
然後 setData，那麼我也需要一個 data 數據。
至於 render，它其實是個過程。它是根據這個 data，來重新的生成一遍 html 裏面的東西，那麼這個有沒有必要去搞一個數據來支撐它？我認爲沒有。
所以這時候你就可以看到，數據對應的就這 2 個。
那麼，我們就自上而下的設計出來了這些東西：
1，功能
i. 修改標題
ii. 設置列表數據
iii. 重新渲染
2，方法
i. setTitle() / getTitle()
ii. setData() / getData()
iii. render()
3，數據
i. title
ii. data
那麼到了這一步，我們就已經可以開始幹活了。
首先，我們先寫個 class，既然是個列表，名字就叫 HotList，名字無所謂，只要不跟別人衝突就行。
接下來，我們就把上面設計好的屬性，title 和 data 給加進去：
這裏會有一個小問題，就是，在這我們寫死了合適嗎？
不合適。一般來講都是動態的，所以在這個時候，我們有兩種選擇。
第一種，我們可以在初始化的時候給它個空的：
沒問題，很多地方都可以這麼幹，然後什麼時候變？
等到我們以後去 setTitle 的時候，再把新的 title 拿到這裏面來：
沒問題，這是一種方法，但是說句實話，你得考慮一個事。
我們所有的類，是爲了什麼？是爲了用起來方便。
這個類，它肯定分成 2 種人，一種是寫這個類的人，一種是用這個類的人。
那麼反過來我問下大家：你是要方便去實現這個類的人呢，還是要方便用這個類的人？
肯定是爲了方便用的人，這不用想。
那麼在這個情況下，你不光要考慮自己寫起來怎麼樣，你還得考慮外面人怎麼用。
像上面這種方法就比較麻煩。
所以，我們爲什麼不在一開始就搞個初始的參數，然後在 new 的過程當中，就可以直接給它這個東西了：
這樣的話，外面用的人就比較靈活，既可以一上來就給，也可以一上來不給。然後等到什麼時候想給的時候，再用 setTitle 去設置。
然後接下來，有 set 一般就有 get，這是一個習慣。
再接下來，我們就要正式的來做 render 這個東西了，那麼這個 render 怎麼做呢？
其實對於上面一大串 html 來說，很簡單，我就是要生成它裏面的代碼：
這裏面的 html，給它生成就行了，當然以後我們還會用到什麼虛擬DOM，按需渲染啥的，現在我們先基礎點。
首先，在 render 裏面先創建2個東西：
1，div，就是它的那個標題。
2，ul，它裏邊 3 個一樣的 li。
我們先把 div.hot-host 清空，並且複製一份，放到右邊對比着來看：
然後，我們要做的就是怎麼把 li 加進去。
首先你得有數據吧，那麼這裏我就可以做個循環，在循環的過程當中，就可以創建一個又一個的 li 了。
所以，我們就在外面創建一個數組，然後在循環裏邊 push 字符串：
那這個字符串裏面放的是什麼呢？
放的就是右邊 li 的內容，我可以把它整個複製過來：
當然，數據目前還沒有，但是這裏面我們也不能寫死，我們先寫成變量：
如果這人是 vip 的話，那就有個 vip 的標誌，也就是那個 img 標籤。如果不是，那就沒有。所以在這就做了一個簡單的三目判斷。
如果 data.vip 是 true 的話，那麼就有 vip 的 img，如果沒有，就是空。
到現在這個時候，數組裏面該有的東西都已經有了。
那麼我們就可以把它直接 join 起來，變成一整個字符串，再塞到 ul 裏面，就完事了：
那麼到現在爲止，有一個小問題，比如我們現在創建好了這個 list，那麼我就想做一個 render：
可以看到，頁面上什麼東西也沒有，爲什麼？
非常簡單，現在是做了render，沒錯，但是這個 render 做的不對。
我們光是創建了 div 和 ul，然後就沒了？創建的元素在怎麼好，是不是也得插到父級裏面去啊？
所以，你可以發現，我們這裏是不是就少了一個參數，我們還需要一個 parent，一個能夠插入的節點。
當然這時候可能有人說，這 parent 不用傳，你直接寫死 hot-host 就行了，但是有個問題，現在寫死了不太好。
因爲將來也可能是在別的地方用，所以這個 parent 是可以作爲一個參數傳進來的。
然後我們把 div 和 ul 都給加上去：
可以看到，現在大概就長成這個樣子。
當然，因爲沒有數據，所以只顯示了一個 title，並不是出問題了。
所以接下來，我們在給它添加一點數據：
可以看到，一個列表就算是出來了。
那麼這就完成了嗎？
沒有，它是有很多很多很多的問題的。
所以下一篇博客開始，我們就一步一步的找出問題，解決問題，並且完善它。