上次，我們形成了兩種header的布局，一種flexbox，一種float，最后與身邊做重構的同事交流下來，選擇了float的布局。
事實上布局的選型不需要我關注，我的參與或者一些意見多數是自我提升，但要說html結構完全控制于csser的話就不一定了
在整個header組件的代碼過程中，我與重構同事就一些地方發生了重復的交流，爭論，今天就header組件的布局以及功能實現，聊一聊js與css的配合
然后header組件本身是一個老組件，我們順便探討下，這類老組件應該如何翻新比較合適。
最初的結構
最開始重構的同事給了我一個已經做好了的頁面：
我們針對其中一些小的體驗上做了討論，并且知會到設計組，便改了，很順暢，然后我開始了愉快的代碼，這是其中一塊HTML的結構：
這里除去h1標簽中的文字不說，因為其中可能表現的非常復雜，我們后面再說，其中的按鈕有以下功能：
① 第二行：回退按鈕
② 第三行：確認
PS：左邊采用float布局所以第一個元素在最右邊
③ 第四行：home標簽
④ 第五行：三個點，點擊會出一個側邊欄
以上便是HTML的實現，但是對與程序員來說，頭部除了按鈕（btn）以外就只有圖標（icon），所以以上的結構事實上js一般是不買賬的
Jser需要的結構
與重構同事交流下來，原因是這樣的：
① 因為回退比較特殊，所以多了一個樣式，具體什么我沒記住了
② icon代表背景圖，icond代表CSS3畫的，CSS3畫的可擴展性高，比如換顏色什么的
③ ......
當時雙方的討論還是比較激烈的，但是對icond全部變成icon，重構同事不同意，于是也就作罷，經過一輪討論，結構變成了這樣：
