一直再做前端，突然想到如果有一天領導讓自己獨立承擔一個web 項目的話是否有足夠的能力去接這個任務，要學會自己去搭建一些基礎的工具信息。所有的這一切在心里都要有個大致的流程，不然真正做的時候難免會手忙腳亂起來，接不了這個活難免失去了一個表現(xiàn)自己的機會，接下來做的差了，則更影響了錢途，前途啊。所以本文對做PC端的項目進行了一個過程的總結。
 

 

　　一、了解、明確需求

　　這個應該是第一步了，不了解需求你就不知道為什么要做，要怎么去做這個項目的工作。

　　(1)明確需求是相當重要的，很有必要去和產品經理、設計人員去溝通，需要明白每一個按鈕，每一個開關存在的意義，這個需要設計人員足夠的了解項目的需求。之前做的一個項目就是這樣，工資花了好多錢請了一個UI設計公司設計了一個十分高大上的產品，各種頁面各種炫酷，領導覺得很滿意，趕緊讓我們去做，結果，真正到了我們開發(fā)人員手里去開發(fā)的時候，才發(fā)現(xiàn)有些東西雖然在這里很炫酷，但是根本不應該存在在這里啊，例如你把添加人員的按鈕放在人員分組的管理下面，而不是人員管理下面有什么意義呢?結果可想而知，不僅一些功能白設計了而且由于項目時間關系還得我們開發(fā)去擔任設計，重新設計功能的展示位置，這無疑耽誤了項目的進度。

　　(2)后臺接口問題，一般大的公司前臺和后臺是分離的，如果分離需要去跟后臺確定各種接口的方式，要有一個文檔去管理這些后臺接口，要有示例、測試數(shù)據(jù)?，F(xiàn)在的一般都是Restful風格的API方便調用。管理的平臺第一家公司用的是一個內部的叫OSG的接口管理系統(tǒng)，這里是一個所有接口的中轉站，各個部門的接口都從這里走，還有的用的是showdoc進行管理。要是前后端不分離的話，后臺便要自己開發(fā)，這個用node還是其他語言，也要做好相應的處理。

　　(3)明確功能點，做好任務分配。

　　如果你是一個leader,那這一部分工作可能需要你去做了，列舉好所有的業(yè)務功能點，列成一個Excel文件，明確每個功能的負責人，完成時間，技術難度等。這一步也是很重要的一步。

　　(4)開發(fā)時間確定。這個要確保開發(fā)時間的充足，不然匆匆忙忙做完一堆的bug改起來也是很痛苦的。這個而且前后臺一起進行確認，不然前端做完了，發(fā)現(xiàn)后端的接口還沒有完善，也是很耽誤時間的。

　　二、明確技術選型

　　這一步也非常重要，需要去根據(jù)設計人員設計，去確認這個工作到底應該去用什么框架去做。

　　(1)最基本的頁面布局工作，是用bootstrap、flex還是手寫css進行布局或者其它，需要去一開始就確定，不然真正做的時候，不同的開發(fā)人員用的不同的東西，顯然會造成項目代碼的混亂。

　　(2)頁面的Css 是純手寫的還是使用Less或者Sass?這個根據(jù)項目的情況酌情處理，一旦使用的話就需要對這些腳本進行編譯工作，這個工作可以用一些自動化工具例如Gulp webpack進行，也可以用Sublime(我用習慣這個了)、webstorm 等編輯器自帶的插件進行,再或者使用考拉編譯進行編譯。

　　(3)js的模塊化是用sea.js還是require.js ?還是不進行模塊化。不進行模塊化當項目很大的時候，代碼將變得很難維護，所以建議進行模塊化，至于到底是用sea.js還是require.js這個就看自己的喜歡的，兩者的區(qū)別主要是一個是異步一個是同步的，具體區(qū)別問問度娘、谷歌。

　　(4)圖表模塊、table等用什么實現(xiàn)。圖表有：echarts、highCharts等、table有bootstrap table 、jgGrid,datatables等等。
 

 

　　三、自動化工具的使用

　　現(xiàn)在各種自動化的工具很多，例如：webpack, gulp, grunt等等，(技術更新實在太快了)，到目前我只會gulp有點low了，感覺跟不上時代的感覺。這一步工作主要是減少一些重復的工作，比如壓縮js、css、頁面實時刷新等工作。我最近的一個項目是使用的gulp進行項目里的html、js文件進行多語種的處理，用gulp讀取了language.js里的每句話對應的變量，然后再頁面里進行替換后變成一個英文版和中文版的兩份，這樣的工作肯定也必須是要自動的工具去處理的，不然寫兩份的話不得痛苦死。

　　四、基礎代碼的模塊化

　　以上都是準備工作，但也是很重要的部分。這一步開始就可以真的開始就進行工作了。

　　(1)如果使用了自動化，自動化的腳本是要寫的，具體去如何實現(xiàn)你需要的自動化工作，如何減少重復的，枯燥的工作將極大的提高開發(fā)效率，縮短開發(fā)時間。

　　(2)再者就是頁面的 alert、對話框(confirm)、模態(tài)窗(layer,boostrap modal)、驗證模塊(例如：郵箱，電話號碼的驗證，不為空的驗證等)，日期處理(如：date add 、format等)，這些需要有人去專門的進行模塊化，而且一定要在真正的業(yè)務代碼開始之前完成，否則后面修改起來將十分費勁。

　　(3)還有就是要有人對項目里比較棘手的技術難題提前進行攻關，確保真正的業(yè)務開始開發(fā)時，技術已經可以實現(xiàn)了。
 

 

　　五、業(yè)務代碼的模塊化

　　這一步開始就要真正的開始接觸業(yè)務的東西了。開始這一步之前當然得要有設計的文檔，假設你已經有了。功能代碼也可以進行模塊化進行，將項目設計文檔里的出現(xiàn)的比較多的展示的內容進行抽離，例如表格，展示圖，共用樣式，頁面布局等等、抽離出來，指定專門的一個兩個開發(fā)人員進行開發(fā)，進行模塊化，然后有一個人進行對這些模塊的調用，組裝。這部分工作讓最熟悉的人去做相應的工作，可以提高開發(fā)效率。這部分里面包括和后臺進行的接口，所以確保要有接口進行調用。

　　六、零碎任務分配

　　大塊的功能完了之后就是各個功能點了，這個應該在分配任務的時候分配好，當然也可以當前面的工作完了之后看開發(fā)人員的工作情況進行分配，保證每個人都有工作，保證項目不會拖沓。

　　七、當上面的工作進行完了之后，整個項目的功能基本就完成了

　　最好還要讓各自的開發(fā)人員測試下自己的功能。自測完成后再交由測試進行測試，后續(xù)就是bug修復的問題了。

　　八、項目總結

　　項目完了總要總結一下，可以開一個內部的會議，將各自開發(fā)過程中的難題難點提出來，大家一起聽聽是怎么解決的，或者誰對別人開發(fā)的東西比較感興趣，想要了解是怎么實現(xiàn)的及內部原理，在這個時候就可以進行溝通了交流了，這樣的交流對提高團隊人員的技能還是很有幫助的。然后一起聚個餐，增進下團隊的友誼。

　　過程中如果一個開發(fā)人員做了太久了一個類似的功能，可能會感到枯燥，所以避免一個人對一個大塊的內容進行開發(fā)，連個交流的人都沒有，會很痛苦。因為我就有這樣的經歷。