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

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

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

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

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

1、分層開發(fā)

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

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

2、代碼編寫

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

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

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

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

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

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

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

總的流程結(jié)構(gòu)圖

這套流程制定出來就一直要求所有前端組同學(xué)嚴(yán)格按照流程執(zhí)行，也經(jīng)過了很長時(shí)間的磨合跟改進(jìn)。雖然不是很完美，但是很適合我們現(xiàn)在開發(fā)的需要，好處也是顯而易見的，遵循并使用它對我們的發(fā)開有很大的幫助，能更好的應(yīng)對高強(qiáng)度，高質(zhì)量的開發(fā)需要。提高了團(tuán)隊(duì)的協(xié)作程度，代碼更可控，開發(fā)效率更高。

=======================================================================================

1.1我的理解

傳統(tǒng)方式：產(chǎn)品經(jīng)理產(chǎn)出PRD->交互產(chǎn)出prototype->視覺產(chǎn)出mockup->前端產(chǎn)出demo

LSM方式：PRD->prototype->a).前端做htmlb).視覺做mockup->前端完善demo

2.1疑惑與討論

1).后續(xù)環(huán)節(jié)受前面的影響。這點(diǎn)上，兩種方式都受影響。并且前端介入的時(shí)間越早，當(dāng)PRD和prototype變動(dòng)時(shí)，整體耗費(fèi)的時(shí)間越多。解決此問題的關(guān)鍵不是流程順序，而是保證流程產(chǎn)出物的穩(wěn)定性。PRD,prototype,mockup的穩(wěn)定性，是減少返工的關(guān)鍵因素。

2).網(wǎng)站的規(guī)范。這個(gè)和流程關(guān)系不大，難的是規(guī)范的制定。開發(fā)一個(gè)具體頁面page,page處于某個(gè)應(yīng)用app下，app從屬某個(gè)系統(tǒng)sys.當(dāng)規(guī)范成熟后，開發(fā)順序是：將sys規(guī)范應(yīng)用到page->將app規(guī)范應(yīng)用到page->進(jìn)行與特定page相關(guān)的工作。前兩步經(jīng)常很快，耗時(shí)不多。

3).標(biāo)準(zhǔn)模塊，或者說是DPL（設(shè)計(jì)模式庫）。這個(gè)和規(guī)范類似，與流程關(guān)系不大。

4).當(dāng)規(guī)范成熟、標(biāo)準(zhǔn)模塊成型后，傳統(tǒng)方式的效率很高。LSM方式中，前端根據(jù)prototype,應(yīng)用sys和app的全局規(guī)范和標(biāo)準(zhǔn)，產(chǎn)出html是很快的。而視覺產(chǎn)出mockup是精雕細(xì)琢的過程，往往耗時(shí)較多。這導(dǎo)致的問題是，前端根據(jù)prototype能做的東西很少，依舊要等mockup出來后，才能開始耗時(shí)最多的工作。

5).感覺克軍的核心是推崇規(guī)范和標(biāo)準(zhǔn)模塊的重要性，而不是流程。重要的是將可重用的設(shè)計(jì)和代碼提煉歸納，成為共用的模式庫。

6).如果說有銀彈，我覺得是DPL.前端的重用提煉為框架類庫，交互的重用提煉為交互模式庫，再加上視覺規(guī)范，就成型為一個(gè)個(gè)標(biāo)準(zhǔn)模塊。每個(gè)模塊，都凝結(jié)著交互、視覺和前端的提煉。

7).DPL不稀奇。MSWinForms,ExtJS,YahooDPL等，都是成熟案例。做到這一步后，產(chǎn)品經(jīng)理甚至可以直接從DPL中挑選模塊組建頁面。交互和視覺，只需要關(guān)注整體以及與該page特定的交互和視覺，前端則關(guān)注新功能開發(fā)和頁面整合。流程已經(jīng)不重要。

8).但是，Web唯一不變的就是變化。高質(zhì)量的DPL很難得，能隨心所欲“變化”的DPL更難得。現(xiàn)實(shí)世界里，大量工作依舊無法模式化，銀彈是不存在的。

3.1我的想法

對前端開發(fā)流程，我的想法是：

假設(shè)sys級(jí)的規(guī)范和標(biāo)準(zhǔn)模塊已經(jīng)完成（包括全局樣式、布局規(guī)范、標(biāo)準(zhǔn)盒模型等），這時(shí)需要開發(fā)一個(gè)項(xiàng)目，假設(shè)為淘江湖SNS項(xiàng)目。理想中的開發(fā)流程為：

a).PD產(chǎn)出PRD.b).交互統(tǒng)攬全局，將PRD中的可復(fù)用部分，拎取出來，產(chǎn)出base-prototype.c-1).視覺根據(jù)base-prototype，產(chǎn)出base-mockup.

c-2).前端根據(jù)base-prototype和base-mockup產(chǎn)出app-dpl（該項(xiàng)目的DPL）。

c-3).交互繼續(xù)具體頁面的page-prototype產(chǎn)出工作。以上三步是并行和迭代進(jìn)行的。

d-1).視覺根據(jù)page-prototype產(chǎn)出page-mockup.d-2).前端根據(jù)page-mockup產(chǎn)出page-demo.以上兩步迭代進(jìn)行。

流程的核心是迭代、是敏捷、是短周期。最重要的一步是base-prototype的產(chǎn)出。交互要避免一個(gè)頁面一個(gè)頁面的產(chǎn)出順序，而應(yīng)該先有一個(gè)統(tǒng)攬全局、拎取通用部分的步驟。

以上流程可以簡述為：sys->app->page.app層的抽取很重要，可以提高團(tuán)隊(duì)的開發(fā)效率和協(xié)作程度，讓團(tuán)隊(duì)更融合、更高效。

感覺LSM強(qiáng)調(diào)的是前端工程師實(shí)現(xiàn)demo時(shí)的微流程。告訴我們做一個(gè)頁面時(shí)，需要html整體->局部模塊的css/js,逐層開發(fā)，先整體后局部，先框架后細(xì)節(jié)。這是非常好的最佳實(shí)踐。

擴(kuò)展閱讀：

友情提示：本文中關(guān)于《前端開發(fā)的流程與規(guī)范》給出的范例僅供您參考拓展思維使用，前端開發(fā)的流程與規(guī)范：該篇文章建議您自主創(chuàng)作。

來源：網(wǎng)絡(luò)整理 免責(zé)聲明：本文僅限學(xué)習(xí)分享，如產(chǎn)生版權(quán)問題，請聯(lián)系我們及時(shí)刪除。

《前端開發(fā)的流程與規(guī)范》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請保留原作者信息,謝謝!
鏈接地址：http://www.seogis.com/gongwen/626200.html

• 上一篇：建筑結(jié)構(gòu)施工圖識(shí)圖體會(huì)
• 下一篇：web前端開發(fā)何去何從