您好,歡迎來到一站式眾包服務(wù)平臺-威客牛網(wǎng)!
當前位置:威客牛首頁 > 知識百科 > IT軟件 > 整站建設(shè) > 網(wǎng)頁前端開發(fā)流程

網(wǎng)頁前端開發(fā)流程

2022-12-04作者:網(wǎng)友投稿
制定了前端開發(fā)的一些相關(guān)的規(guī)范,包括不同產(chǎn)品的命名規(guī)范,前端文件存放目錄等等一系列的前期準備。別看這些只是小事,但做好萬全的準備,是敏捷開發(fā)中所必的。以下就是贏在威客網(wǎng)小編為您整理的網(wǎng)頁前端開發(fā)流程。

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

1、分層開發(fā)


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

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

2、代碼編寫


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

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

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

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

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

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

所有頁面出完以后設(shè)計參與前端組的內(nèi)部測試,指出頁面與設(shè)計稿不匹配的地方,優(yōu)化部分細節(jié)頁面樣式。讓設(shè)計參與測試不僅能提高內(nèi)測的質(zhì)量,還能更早的發(fā)現(xiàn)問題并及時的修改,否則當頁面提交開發(fā)以后再做修改是一件很麻煩的事情。當所有細節(jié)修改完畢后,就需要進行制作文件的優(yōu)化以確保代碼的最優(yōu)化,盡可能地壓縮圖片和減少外部HTTP請求。
免費查詢商標注冊