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

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

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

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

1、分層開(kāi)發(fā)

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

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

2、代碼編寫(xiě)

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

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

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

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

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

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

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