前端頁面開發規範流程化(基於雲端的前端)

如今是22世紀了，人們經常說的一個字就是「雲」，我們前端人員也來趕趕潮流。而且讓咱們很好的與業務人員，美工人員後臺人員等多名人員「華山論劍」。

通常前端開發的咱們須要和業務人員溝通，UI人員溝通，產品經理溝通，那但是重重之重啊！

因此咱們也須要肯定一條明確清晰的開發設計路線，這樣才能夠很瀟灑的去寫咱們的代碼。

需求討論

    咱們開發的頁面中包含了大量的交互，而這些所說的交互即是咱們常常須要談及的業務需求，若是需求不明確可能須要如下問題

這個如何彈出！這個按鈕跳轉到哪裏！誰來點這個按鈕！按鈕點完要不要消失！

這就是需求不明確的後果，從而致使咱們代碼寫的很不爽！

咱們要充分的和業務人員溝通需求，把合理的業務梳理出來放入你的大腦中，這樣纔不會走彎路！

什麼？你的大腦不夠用？記不住？別怕！

「百度腦圖"能夠很好的幫你解決問題，不用往你的大腦裏塞東西了！

下面是一個用戶信息認證模塊的梳理圖

百度腦圖傳送門

原型設計

既然模塊的業務需求已經很清楚了，接下來就是界面的原型設計了，大部分同窗可能在初創公司聽到這樣的聲音

沒有美工！須要你本身來設計！前端不就是幹設計的？這個很簡單了，你本身設計下了！

沒錯就是這樣的，大部分狀況下咱們只能城府，本身動手豐衣十足，不少小夥伴可能直接就用css+div開始了本身的設計之路，弄好了感受這裏不對！這裏顏色還差點！好像不如剛纔好看，還原吧！這樣讓咱們效率邊的及其的低，有沒有不寫代碼，界面拖拖拽拽就出來的？還能隨時還原的？

「墨刀」是一款在線的原型設計工具，能夠實現輕輕鬆鬆妥妥拽拽出來界面的效果，而且還有歷史功能，隨時還原觸手可及！

下面是一個用戶信息認證模塊的原生設計圖（當時只用了5多分鐘，可比代碼快多了）

墨刀傳送門

接口對接

前端面臨最大的一個困難就是api接口對接，當你過了業務和UI的門檻時就要面臨大敵人後臺工程師，當你須要對接接口時你會聽他說

我沒有時間啊，你本身找找！這個很簡單的，本身找獲得！去數據庫看看，找獲得！

這個時候不要慌，還要靠本身，咱們找後臺人員花幾分鐘的時間去梳理一個api接口列表來幫助咱們開發，這個時候沒有模板文檔，沒有模擬數據，無法測試啊，後臺接口尚未寫好。仍是本身動手豐衣足食吧，apizza是一款簡單的在線生成api文檔和mock數據的集成網站，能夠在極短的時間內構建出api接口文檔，還支持mock數據，不再用等後臺了！

下面是一個用戶信息認證模塊的接口設計+MOCK（生成後能夠直接粘貼到接口文檔裏交付-偷懶）

apizza傳送門

好了這三款工具可讓門很爽的去寫代碼，充當一個極客達人，並且這三款工具都是基於雲端的，也就是說只有有網隨時隨地都能修改，增長，而且還能實時分享給他人，最重要的是免費的！免費的！免費的！

這樣咱們能夠很好的和後臺，美工，業務人員進行完美的對接。規範開發對本身的職業規劃也是有好處的，而且效率絕對比你拿起代碼就寫的效率高，而且錯誤也會減小大部分。