想分幾篇文章來說說前端開發。
一般的網站開發流程包括四個方面：
1、 總結需求
2、 設計界面
3、 前端開發
4、 后端開發
開發完成后會進行內部測試以及后續的優化等，其中2,3,4可以並行開發。下面介紹前端開發的工作流程：
1.分層開發
在產品需求文檔確定好后就可以進行分層開發的划分，根據項目內容的不同，來划分組員的工作。一般分為：總體結構搭建、模塊制作、頁面制作、底層js的搭建與交互等。
2.代碼編寫
前期工作准備好后，就開始進入代碼編寫階段。大致流程為當原型圖產出后，就進行前期的前端開發（搭建大致的HTML結構），然后美工設計出設計圖后再進行頁面樣式的完善，最后完成正式的頁面后交給開發，嵌套程序。確定了流程后還需要對產品原型進行分析、拆分，把復用性高的部分找出來制作成代碼模塊，方便以后的套用。美工拿到原型圖后，就進行通用模塊樣式的設計（包括按鈕、分頁、默認字體顏色、連接顏色等），完成后並提交給前端，統一的搭建。在代碼的編寫過程中，最重要的是標准和規范的執行遵守，在編寫HTML時候充分發揮想象盡可能的滿足后期樣式表現的需要。代碼編寫過程中讓前端組提前進入開發流程中來，在原型圖產出后就進行HTML結構的編寫，頁面設計完成后，再進行樣式表的開發，這樣不僅能節省很多的開發時間，提高開發效率，還能鍛煉前端組的人員對全局頁面的把控。在此同時也強調規范和模塊化的重要性，在一個團隊協同開發過程中，必須要嚴格按照規范執行，這樣能便於后期維護，減少維護成本。而模塊化，是敏捷開發所必需的，重要性在這里也不做過多的描述。
3.內部測試與后續優化
所有頁面出完以后美工參與前端組的內部測試，指出頁面與設計稿不匹配的地方，優化部分細節頁面樣式。讓美工參與測試不僅能提高內測的質量，還能更早的發現問題並及時的修改，否則當頁面提交開發以后再做修改是一件很麻煩的事情。當所有細節修改完畢后，就需要進行制作文件的優化以確保代碼的最優化，盡可能地壓縮圖片和減少外部HTTP請求。簡單理解就是：產品經理產出產品需求文檔（PRD）->交互設計產出原型圖（prototype）->美工做出設計圖->前端做出頁面。由於后續環節受到前面的影響，並且前端介入項目的時間越早，當 PRD 和prototype 變動時，整體耗費的時間越多。解決此問題的關鍵不是流程順序，而是保證流程產出物的穩定性。PRD, prototype，設計圖的穩定性，是減少返工的關鍵因素。
當規范和標准模式已經完成（包括全局樣式、布局規范、標准盒模型等），這時開發項目的理想流程就是：
a) 產品經理產出PRD
b) 交互設計師統攬全局，將 PRD 中的可復用部分，拎取出來，產出 base-prototype.
c-1). 視覺根據 base-prototype，產出 base-mockup.
c-2). 前端根據 base-prototype 和 base-mockup 產出 page-demo.
c-3). 交互繼續具體頁面的 page-prototype 產出工作。
以上三步是並行和迭代進行的。
d-1). 視覺根據 page-prototype 產出 page-mockup.
d-2). 前端根據 page-mockup 產出 page-demo.
以上兩步迭代進行。
最重要的一步是 base-prototype 的產出。交互要避免一個頁面一個頁面的產出順序，而應該先有一個統攬全局、拎取通用部分的步驟。我們做一個頁面時，需要 html 整體 -> 局部模塊的 css/js, 逐層開發，先整體后局部，先框架后細節。