前端開發(fā)的流程與規(guī)范

前端開發(fā)的流程與規(guī)范在團隊不斷成長的過程中，需要處理的需求也在逐漸增長，團隊中成員如何分工配合決定了開發(fā)的效率、產(chǎn)品的質量，在這個時候我們就需要一個流程來規(guī)范、指導我們，下面就將咱們前端組的一些經(jīng)驗跟大家分享一下，有不足之處歡迎大家指出來。

當PRD確立下來后，前端組的同學們就需要做好準備，好應對高強度的開發(fā)工作。在今年年初的時候前端組經(jīng)過激烈的討論針對新產(chǎn)品的開發(fā)做了一些約定。制定了前端開發(fā)的一些相關的規(guī)范，包括不同產(chǎn)品的命名規(guī)范，前端文件存放目錄等等一系列的前期準備。別看這些只是小事，但做好萬全的準備，是敏捷開發(fā)中所必的。

下面講講前端開發(fā)組的流程。

1、分層開發(fā)

在PRD確定后就需要進行分層開發(fā)的劃分，根據(jù)項目內容的不同，劃分組員的工作。大致分為，總體結構搭建、模塊制作、頁面制作、底層JS搭建、JS交互效果、內部測試、代碼優(yōu)化。

這樣做的好處是能根據(jù)項目的不同，劃分出不同的功能模塊，合理的進行人員分配，讓合適的人做合適的事。降低開發(fā)成本，提高開發(fā)效率。

2、代碼編寫

前期工作準備好后，就開始進入代碼編寫階段，我們采用LSM方式進行，大致流程為prototype產(chǎn)出后，就進行前期的前端開發(fā)（搭建大致的HTML結構），然后設計出完設計稿后再進行頁面樣式的完善，最后完成正式的頁面后交給開發(fā)，嵌套程序。這樣做的好處不僅能有效的提高開發(fā)效率，實現(xiàn)逐層開發(fā)，讓前端提前介入，減少整體消耗的時間，確保產(chǎn)品有更多的時間修改和完善。

確定了流程后還需要對產(chǎn)品原型進行分析、拆分，把復用性高的部分找出來制作成代碼模塊，方便以后的套用。確認二、三級頁面的風格搭建統(tǒng)一框架。

設計拿到prototype后，就進行通用模塊樣式的設計（包括按鈕、分頁、默認字體顏色、連接顏色等），完成后并提交給前端，統(tǒng)一的搭建。

在代碼的編寫過程中，最重要的是標準和規(guī)范的執(zhí)行遵守，在編寫HTML時候充分發(fā)揮想象盡可能的滿足后期樣式表現(xiàn)的需要。

代碼編寫過程中讓前端組提前進入開發(fā)流程中來，在prototype產(chǎn)出后就進行HTML結構的編寫，頁面設計完成后，在進行樣式表的開發(fā)，這樣不僅能節(jié)省很多的開發(fā)時間，提高開發(fā)效率，還能鍛煉前端組的同學對全局頁面的把控。在此同時也強調規(guī)范和模塊化的重要性，正所謂無規(guī)矩不成方圓，在一個團隊協(xié)同開發(fā)過程中，必須要嚴格按照規(guī)范執(zhí)行，這樣能便于后期維護，減少維護成本。而模塊化，是敏捷開發(fā)所必需的，重要性在這里也不做過多的描述。

3、內部測試與后續(xù)優(yōu)化

所有頁面出完以后設計參與前端組的內部測試，指出頁面與設計稿不匹配的地方，優(yōu)化部分細節(jié)頁面樣式。讓設計參與測試不僅能提高內測的質量，還能更早的發(fā)現(xiàn)問題并及時的修改，否則當頁面提交開發(fā)以后再做修改是一件很麻煩的事情