本文由 KnewHow 發表在 ScalaCool 團隊部落格。
大家好，我是 KnewHow，一名前 Java 開發工程師。為什麼要說是「前」呢？這要從兩週前我加入一家新公司說起。
入職第一天，實習導師告訴我會有一個月的新人引導計劃，當時心裡還是美滋滋的，覺得這個公司比較人性化，沒有把工程師當勞動力使。
但隨後，我就被震撼到了。因為面試時就得知公司崇尚的是全棧文化，在部署完一切辦公環境之後，實習導師告訴我開始學習的第一個技能竟然是：「前端頁面重構」！！！
當時我的內心是這樣子的。
要知道，我對於前端，除了幾個基本的標籤外，可是一無所知。然而，我很快調整了狀態，不就是前端開發麼，應該難不倒機智的我。
什麼是頁面重構
好，第一個問題：所謂的「頁面重構」到底是幹嘛的？
實習導師提出了要求，一定要有自己深刻的見解，好吧。。。。。
於是，我的視線離開了電腦螢幕，開始尋求不一樣的答案。很快，我注意到了我的辦公桌面，是這樣子滴。
在我看來，前端頁面重構，本質不就是處理空間佈局的關係嗎？
於是，機智如我，很快得出了自己的見解和答案。
上面的這張圖片是日常生活一個場景，「 一張辦公桌上面擺放著一些物品。桌面是背景，書和鍵盤並排的放著，白色書和紫色書交疊著，紫色書上面放著一個滑鼠」。
其實這就是一個佈局，也類似一張網頁。
然後我看了看旁邊同事的桌子，也看了看整個公司的辦公環境。
然後我發現在一個佈局中，存在三種關係：組成、包含和交疊。
於是，我把這個結論告訴了實習導師。實習導師聽後思考許久，但還是表達了讚賞。之後，他又提出了第二個問題：
那麼，你說說看什麼是「盒子模型」？
這一次，我馬上 Google 了這個概念。機智如我，基於我以上的結論，很快我又得出了以下的解讀。
盒子模型
在我看來，「盒子模型」，本質就是去處理佈局中，元素大小、位置和距離的關係。
在上面的場景中，鍵盤和紫色書是有尺寸、邊框的，它們是並排放置的，彼此之間的距離可以使用盒子模型中的「外邊距（margin）」來表示。
滑鼠被紫色書包含著（如果按照完全 2D 的視角），它們的距離可以使用「內邊距（padding）」來表示。
白色書和紫色書交疊在一起的，這個如何表示呢？
哈哈，它們其實同樣可以使用某一方的「外邊距(margin)」來處理，只不過值要是負數而已。
我找到了實習導師，把我剛剛總結的答案告訴了他，他微微一笑：「這個回答還算不錯」，接著又問道：
那麼在網頁佈局中，「盒子模型」是怎麼被使用的呢？
當時我的內心是這樣的：
你怎麼這麼多問題，你特麼還有完沒完!!!
理智的我壓制了自己的小情緒，不就是怎麼使用「盒子模型」嗎？
絕對定位佈局
機智的我思考片刻，很快就有了答案，這也太簡單了！
直覺上我們只要把網頁劃分成一個個小塊，然後調整它們的位置就行了。
拿豆瓣的首頁來說，我們可以把第一行分為三塊，分別為豆瓣的 logo、搜尋框以及後面的熱搜主題。
然後我們只需要使用「外邊距(margin)」來設定他們和瀏覽器左邊界之間的距離，就 OK 了。
哈哈，我簡直就是個天才。
我把我的答案告訴了實習導師。心裡美滋滋的：「我聰明吧」。
實習導師輕瞟了一眼我的答案，預料中的讚美和肯定並沒有出現。
他目光轉向我，說：「你的這種方案是可行的，但是至少犯了兩個錯誤。」
① 在絕對定位中，不會使用 margin 來表示位置偏移，我們應該使用 top 和 left 。（可參見：position）
② 只有入門級別的小白才會使用「絕對定位佈局」來作為一個網頁的主要佈局方式，這種方案是十分低效的！
絕對定位佈局 － 低效分析
「啊，低效的？為什麼是低效的？」
「在網頁中，會有成百上千的元素，如果每個元素你都去量一下它的邊距，這個效率是不是很低！」
「iOS 端佈局有一個更清晰的描述：絕對定位本質就是通過幀來定位一個檢視的起點，高度和寬度。」
「這個就要求你需要去計算每個檢視的位置和大小。」
「更可怕的是，如果有一天有一個元素的位置或者大小發生改變，那麼其它的元素也可能需要更改，這個更是低效的！」
「簡單來說 就是牽一髮而動全身！」
「現在的頁面佈局都使用浮動佈局，你去調研一下吧。」
浮動佈局
我用 Google 搜尋了浮動佈局和絕對定位佈局。機智的我發現了它們最本質的一個區別：
絕對定位佈局使用瀏覽器的視窗的邊界作為參考，一個元素的位置是針對瀏覽器的邊界來設定的。
然而在絕對定位佈局中，元素和元素之間視對方為不存在，這意味著當一個元素位置和大小發生了變化，不會對其它元素產生影響。
而在浮動佈局中，它的位置通常採用 「 float 」 來處理，一個元素的位置受到其它的元素的影響。
如果有一天被參考的元素位置或者大小發生了變化，那麼當前元素的位置也會發生相應的變化。這樣就比較高效了。
我興奮的把調研結果告訴了實習導師，實習導師看了後，說：「還可以吧。」
接著他又問道，「如果現在給你一個網頁，你知道怎麼佈局嗎？」
「這個。。。」
頁面重構之口訣
「看你這個猶猶豫豫的樣子，我直接告訴你好了。」
「我們在網頁的左上方放一塊磁鐵，那麼所有元素都會被磁鐵所吸引，那麼磁力相反的方向，就是我們佈局的方向。」
「所以我們佈局的方向就是先從左到右，再從上到下，從整體到區域性，化整為零！」
「明白了嗎？」
「還不是很明白。」
「那我們來做個練習吧。」
「看這個豆瓣的首頁，先從整體來看，按照從左到右可以分成幾個部分。」
「一個部分吧。」
「對的。」
「因為整個頁面就只有中間的那個部分。」
「從上到下，你看看這個頁面可以分成幾個部分。」
「這個好像有點多了，每一行都可以分成一個部分吧。」
「不錯嘛，看你你已經掌握了規律，看看下面的可以分成幾個部分。」
「這個。。。」
「不要捉急，按照我的口訣，先看從左到右分成幾個部分，再看從上到下分成幾個部分。」
「從左到右可以分成三個部分。」
「從上到下就一個部分吧，感覺沒有其它東西了。」
「不錯不錯，我們再來一個難一點的，看看這個可以分成幾個部分。」
「從左到右可以分成三個部分。」
「從上到下可以分成一個部分。」
「那這個呢？」
「從左到右一個部分，從上到下也是一個部分。」
「這個呢？」
「從左到右一個部分，從上到下三個部分。」
「這個呢？」
「從左到右一個部分，從上到下四個部分，然後再對更小的模組進行劃分。」
「有沒有發現什麼規律？」
「就是按從左到右，從上到下的順序，先把網頁的進行整體的劃分，然後在依次對小模組進行劃分，然後再對更小的模組進行劃分，一直這麼遞迴劃分下去。」
「好的！你已經學會了！」
「啊！這麼簡單的？那個可以問你一個問題？能不能先從上到下，在從左到右？」
不能，因為人看網頁的習慣就是先從左到右，在從上到下，這樣的設計會有更好的視覺效果。」
總結
好了，通過本篇文章，我們領悟了前端頁面重構的口訣，再來重複一遍：「從左到右，從上到下，化整為零」。
那麼，在後續的文章裡，我們將進一步介紹所謂的心法和招式。