前端開發的流程與規范

前端開發的流程與規范前端開發的流程與規范在團隊不斷成長的過程中，需要處理的需求也在逐漸增長，團隊中成員如何分工配合決定了開發的效率、產品的質量，在這個時候我們就需要一個流程來規范、指導我們，下面就將咱們前端組的一些經驗跟大家分享一下，有不足之處歡迎大家指出來。當PRD確立下來后，前端組的同學們就需要做好準備，好應對高強度的開發工作。在今年年初的時候前端組經過激烈的討論針對新產品的開發做了一些約定。制定了前端開發的一些相關的規范，包括不同產品的命名規范，前端文件存放目錄等等一系列的前期準備。別看這些只是小事，但做好萬全的準備，是敏捷開發中所必的。下面講講前端開發組的流程。1、分層開發在PRD確定后就需要進行分層開發的劃分，根據項目內容的不同，劃分組員的工作。大致分為，總體結構搭建、模塊制作、頁面制作、底層JS搭建、JS交互效果、內部測試、代碼優化。息體結構搐然模塊制作頁面制作分層并發底層后搭建塔交互效果內溜測試代碼優牝這樣做的好處是能根據項目的不同，劃分出不同的功能模塊，合理的進行人員分配，讓合適的人做合適的事。降低開發成本，提高開發效率。2、代碼編寫前期工作準備好后，就開始進入代碼編寫階段，我們采用LSM方式進行，大致流程為prototype產出后，就進行前期的前端開發（搭建大致的HTML結構），然后設計出完設計稿后再進行頁面樣式的完善，最后完成正式的頁面后交給開發，嵌套程序。這樣做的好處不僅能有效的提高開發效率，實現逐層開發，讓前端提前介入，減少整體消耗的時間，確保產品有更多的時間修改和完善。確定了流程后還需要對產品原型進行分析、拆分，把復用性高的部分找出來制作成代碼模塊，方便以后的套用。確認二、三級頁面的風格搭建統一框架。設計拿到prototype后，就進行通用模塊樣式的設計（包括按鈕、分頁、默認字體顏色、連接顏色等），完成后并提交給前端，統一的搭建。在代碼的編寫過程中，最重要的是標準和規范的執行遵守，在編寫HTML時候充分發揮想象盡可能的滿足后期樣式表現的需要。年口p^totypt代碼編寫一,前端制作（HTML）'' 頁面設計前端制作（樣式完善）提交開發代碼編寫過程中讓前端組提前進入開發流程中來，在prototype產出后就進行HTML結構的編寫，頁面設計完成后，在進行樣式表的開發，這樣不僅能節省很多的開發時間，提高開發效率，還能鍛煉前端組的同學對全局頁面的把控。在此同時也強調規范和模塊化的重要性，正所謂無規矩不成方圓，在一個團隊協同開發過程中，必須要嚴格按照規范執行，這樣能便于后期維護，減少維護成本。而模塊化，是敏捷開發所必需的，重要性在這里也不做過多的描述。3、內部測試與后續優化所有頁面出完以后設計參與前端組的內部測試，指出頁面與設計稿不匹配的地方，優化部分細節頁面樣式。讓設計參與測試不僅能提高內測的質量，還能更早的發現問題并及時的修改，否則當頁面提交開發以后再做修改是一件很麻煩的事情。當所有細節修改完畢后，就需要進行制作文件的優化以確保代碼的最優化，盡可能地壓縮圖片和減少外部HTTP請求。 . 設計爹與捌演內部測試與后續優化-——整體測試后續代碼優化總的流程結構圖

總休結拗格建棋塊制作頁面制作分以開發 底展工拈建方交互效果內都測出代碼優優前端開發流程\ 前端開發流程\ 林媽編寫prototype前端制作(HTML}頁面通計前端制作(樣式完善)提交開發設計參與測試內部郵試與后續優化——-整體刎試后坡代碼優化這套流程制定出來就一直要求所有前端組同學嚴格按照流程執行，也經過了很長時間的磨合跟改進。雖然不是很完美，但是很適合我們現在開發的需要，好處也是顯而易見的，遵循并使用它對我們的發開有很大的幫助，能更好的應對高強度，高質量的開發需要。提高了團隊的協作程度，代碼更可控，開發效率更高。1.1我的理解傳統方式：產品經理產出PRD->交互產出prototype->視覺產出mockup->前端產出demoLSM方式：PRD->prototype->a).前端做htmlb).視覺做mockup->前端完善demo疑惑與討論.后續環節受前面的影響。這點上，兩種方式都受影響。并且前端介入的時間越早，當PRD和prototype變動時，整體耗費的時間越多。解決此問題的關鍵不是流程順序，而是保證流程產出物的穩定性。PRD,prototype,mockup的穩定性，是減少返工的關鍵因素。.網站的規范。這個和流程關系不大，難的是規范的制定。開發一個具體頁面page,page處于某個應用app下，app從屬某個系統sys.當規范成熟后，開發順序是：將sys規范應用到>將app規范應用到>進行與特定page相關的工作。前兩步經常很快，耗時不多。.標準模塊，或者說是DPL(設計模式庫)。這個和規范類似，與流程關系不大。.當規范成熟、標準模塊成型后，傳統方式的效率很高。LSM方式中，前端根據prototype,應用sys和app的全局規范和標準，產出html是很快的。而視覺產出mockup是精雕細琢的過程，往往耗時較多。這導致的問題是，前端根據prototype能做的東西很少，依舊要等mockup出來后，才能開始耗時最多的工作。.感覺克軍的核心是推崇規范和標準模塊的重要性，而不是流程。重要的是將可重用的設計和代碼提煉歸納，成為共用的模式庫。.如果說有銀彈，我覺得是DPL.前端的重用提煉為框架類庫，交互的重用提煉為交互模式庫，再加上視覺規范，就成型為一個個標準模塊。每個模塊，都凝結著交互、視覺和前端的提煉。.DPL不稀奇。MSWinForms,ExtJS,YahooDPL等，都是成熟案例。做到這一步后，產品經理甚至可以直接從DPL中挑選模塊組建頁面。交互和視覺，只需要關注整體以及與該page特定的交互和視覺，前端則關注新功能開發和頁面整合。流程已經不重要。.但是，Web唯一不變的就是變化。高質量的DPL很難得，能隨心所欲“變化”的DPL更難得。現實世界里，大量工作依舊無法模式化，銀彈是不存在的。我的想法對前端開發流程，我的想法是：假設sys級的規范和標準模塊已經完成(包括全局樣式、布局規范、標準盒模型等)，這時需要開發一個項目，假設為淘江湖SNS項目。理想中的開發流程為：.PD產出PRD..交互統攬全局，將PRD中的可復用部分，拎取出來，產出base-prototype.c-1).視覺根據base-prototype,產出base-mockup.c-2).前端根據base-prototype和base-mockup產出app-dpl(該項目的DPL)。c-3).交互繼續具體頁面的prototype產出工作。以上三步是并行和迭代進行的。d-1).視覺根據prototype產出mockup.d-2).前端根據mockup產出demo.以上兩步迭代進行。流程的核心是迭代、是敏捷、是短周期。最重要的一步是base-prototype的產出。交互要避免一個頁面一個頁面的產出順序，而應該先有一個統攬全局、拎取通用部分的步驟。以上