前端工做的大體流程

轉自大神 一隻羊博客» 前端工做的大體流程:

http://www.asheep.cn/skill/end-process.html

 

當一個項目要我負責開發時， 個人大概工做流程是下面這樣的， 固然可能跟實際的某方面有誤差， 由於不少時候工做是因人而異的，好比，你有一個喜歡不斷改需求的老闆。

 

一、需求分析期

 

當一個項目立項後，首先要開一次需求分析會， 要求產品、設計、前端、後端參會， 而後都各自評估下，有什麼問題、難點都提出來討論。固然一個明確的需求，確定不是這一次會議就能討論出來的，但起碼讓開發人員作到心中有碼。

 

當需求基本肯定後，產品就能出個原型圖，產品會拿着原型圖與老闆（或者提出需求的一方）演示，再溝通修改。直到原型肯定，設計開始按原型圖設計psd了 。

 

在設計稿出來後，可能還在不斷修改，這整個過程其實都是需求的分析時期。因此，前端開發基本也都要時刻跟進了解，雖然不用參與太多實際工做。

 

二、切圖期

 

當整個方案肯定後，且設計給出圖後，就要進入切圖階段了，這就是前端真正開始工做的時候了。

 

固然有較好的 "原型設計圖" + 需求文檔會使咱們切的更加帥氣，切圖前要縱觀整個圖集, 查看是否有可重複利用的元素/icon(ps:這裏跟設計UI有很大關係), 切圖前要熟悉公司的重置樣式, 公用樣式, 公用庫等, 由於這樣使你少寫代碼, 須要查看文檔或者跟產品溝通, 內心要明白哪些地方須要交互, 有哪些交互, 而後在寫HTML的時候要合理的分配這些"資源", 好比預留勾子代碼, 是否有ajax列表啊, 作HTML前要內心給出這個頁面的最佳方案, 好比 seo中h* 類的標題, 頁面是否須要延遲加載片斷, 是否有iframe等, 而後快速的製做出HTML頁面, 固然製做中不免要多查看各類瀏覽器的表現形式, 而後在須要後端配合的地方打上明確的註釋, 好比: 各類狀態, 循環, 空, 特殊需求等...

 

不要扯那些W3C標準, 國內誰敢說本身的站是真正的W3C標準?

 

三、交互期

 

當我自覺得理想的HTML頁面出來後, 就要進入我興奮的階段了, 交互, 哈哈, 一個多麼帥氣的活, 個人最愛, 這時要本身本地寫個測試的後端來模擬接口, 這須要用到點 web server方面的知識, 相信你懂的, 給頁面元素打上 js勾子, 而後分析是否用委託, 合理的分配事件...

 

返回值, 好比: (交互ajax, 所有以json格式, 好處你懂的)

 

數據成功/正確時: 給予顯示到頁面, 但要考慮到是否用cache下, 由於可能有的場景(如:tab類), 要多個重複調用... 如: {"error": 0, "data": [{"title": "標題1"}, ...]}

 

有數據但錯誤時: 常見於返回值不是理想狀態, 前端給予友好的提示, 且要跟據項目中決定是否把這個錯誤上報到統計庫, 如圖片統計方式(傳送門), 這個具體的錯誤信息, 能夠是ajax返回值, 也能夠是前端擬定; 如: {"error": 10001, "msg": "沒有登陸"}, 接口的友好和維護性由但願跟後端人員一塊兒來定下來並出相應文檔

 

無數據異常時: 常見於返回值異常, 如不符合目標(json)格式, 或者服務器響應失敗, 前端給予提示, 跟據項目須要上報錯誤信息

 

考慮到返回值的問題了, 也要想到正在處理中的請況, 好比: 登陸時用戶要反覆點擊登陸按鈕呢? 一般我是第一次點擊後把按鈕改變狀態, 並在頁面明顯的地方給予"正在請求中(文字依地方而異)" 的狀態, 而後在完成/失敗後恢復當初, 固然表單我仍是喜歡 submit 事件, 這也跟我我的習慣有關, 但我相信, 有這習慣的人不少.

 

若是是表單項目還要考慮到js前端初步判斷, 好比: 日常的空(trim後的,固然有的場景是不須要的), 正則下是否符合格式, 是否用設置maxlength屬性, 是否用考慮使用submit事件... 前端的驗證是爲了快速的讓用戶知道"問題所在", 然後端這些也是要驗證的, 由於無論怎麼別相信前端...

 

四、調試期

 

完成交互後, 就要整個頁面調試下了, 好比 各類瀏覽器下是否有異常啊, 若是有時間能夠看下是否有內存泄漏啊, 是否能經過 chrome兼容性測試插件 評分啊, 檢查js的代碼片斷/文件位置, 查看頁面domReady時間, 查看首屏總鏈接數是否大於70, 用火狐查看源碼是否有報紅出錯, js+css是否能夠壓縮/合併...(固然視項目不一樣調試的程度也不一樣)

 

當完成一系列的調試後, 能夠長吐口氣, 把相應的接口文檔+html頁面給後端了, 本身去衝杯咖啡犒勞下吧...

 

五、檢查期

 

你覺得工做就完了? 不, 當後端完成了頁面動態的調用, 還要對有頁面進行從頭到腳的檢查, 檢查是否符合當初交接時的結構, 是否有什麼遺漏, 當發現沒問題後, 我要對本身說: 你完成了一個頁面, 當我還在沾沾自喜的時候, 才發現, 一大波的圖還等着我切... 因而又返回到第一步...

 

大體的流程就這麼幾步，這是單純的前端流程。至於其中切圖的時候跟設計溝通、交互的時候跟後端溝通，這些屬於開發細節問題，沒有寫在流程裏面，可是這也是基本流程必須有的。