開始要求自己的程式碼的乾淨與可視程度之後被前輩推薦了一本書
接下來幾天會以這本書為主的閱讀筆記，筆記會節錄書中的片段文章
有興趣的朋友可以買來看看，這本書真的蠻不錯的！
重構(Refactoring) 的定義是為了讓程式更簡單且更容易 複用(reusable) ，在不改變其 行為(behavior) 的情況下重寫程式的過程。
好的架構應該具備以下條件
能夠節省開發時所花費的時間，可預期性越高就越能了解組件功能，程式碼不熟的開發者就能更快速地瞭程式碼的功用。
程式碼複用指的程式碼可以在許多地方使用，降低同樣的程式碼重複編寫進而增加網頁效能。
擴充性高的話可以很容易地在不改變主體結構的情況下增加新功能。
維護性高調整現有功能就比較容易。
重構能改善軟體的架構，是一種可將程式碼重新組織成結構性更好的技術
目的是讓程式更容易預期、複用、擴充與維護。
若軟體越具有上述的特性，代表這套軟體更可靠，而且後續的管理維護工作也會更加輕鬆。
隨著時間經過，很多事情會逐漸改變
技術不斷翻新為了保持程式碼的品質就需要重構。
軟體系統會因為需求改變而演進，當需求改變時，程式碼也需要改變
規劃不完善，一開始沒有對各個組件間搭配有清楚的認識的話後續就得需要進行重構。
估計軟體開發所需的時間並不容易，時程被低估時開發者就會有“先做完再說”的壓力
為了能很快地將程式碼寫出來，寫碼時就不會深思熟慮。
即使寫得很好的程式最後也會變成一盤“義大利麵條碼”，難以理解與管理。
要跟上最佳實務的發展並不容易，特別是工作牽扯到許多技術或需要管理的團隊。
如果錯過運用最佳實務的時機，在未來的某個時候可能就需要重新檢視程式碼並進行某種程度的重構。
技術變遷很快，之前被認為是最佳實務的技術可能已經不復存在
如果不持續學習新知識，技術債就會越來越多
有天你會發現，自己的程式碼處於很糟的狀態，本不該如此的。
<html>
<head>
</head>
<body>
<main>
<h1 style="font-family: Helvtica, Arial, sans-serif; font-size: 36px; font-weight: 400; text-align: center;">
San Francisco's Premiere Cat Shelter
</h1>
</main>
</body>
</html>
透過元素的style屬性或<style></style>內嵌於HTML中的樣式稱為行內樣式(inline style)。
行內樣式不太能重複使用，當樣式透過style屬性來設定時就只能套用到該元素上。
而內嵌於<style></style>標籤中的樣式就只能套用在該網頁上。
這些樣式應該要從HTML中抽出並整理到一個CSS檔中，這個CSS檔就可以在許多網頁中被引入使用。
抽離h1的行內樣式後的HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<main>
<h1>
San Francisco's Premiere Cat Shelter
</h1>
</main>
</body>
</html>
把h1的行內樣式整理到style.css裡面
h1{
font-family: Helvetica, Arial, sans-serif;
font-size: 36px;
font-weight: 400;
text-align: center;
}
在重構CSS時，確保所做的調整不會改變樣式原有的功能是很重要的
檔案中的CSS由HTML中抽離後，HTML與CSS檔都變得更容易觀看
HTML中不再有攏長的樣式定義，而CSS則被整理成各種邏輯區塊也更方便重複使用。
看完這個章節之後對於重構先有了基本的知識
也終於知道為什麼要把HTML跟CSS分成兩個檔案
資訊會隨著時間不斷演進，我們也必須不斷學習新知識才能讓自己保持在最完美的狀態
不要讓時間追過自己了！
iThome鐵人賽
看影片追技術