一直再做前端，突然想到如果有一天領(lǐng)導(dǎo)讓自己獨(dú)立承擔(dān)一個(gè)web 項(xiàng)目的話是否有足夠的能力去接這個(gè)任務(wù)，要學(xué)會(huì)自己去搭建一些基礎(chǔ)的工具信息。所有的這一切在心里都要有個(gè)大致的流程，不然真正做的時(shí)候難免會(huì)手忙腳亂起來(lái)，接不了這個(gè)活難免失去了一個(gè)表現(xiàn)自己的機(jī)會(huì)，接下來(lái)做的差了，則更影響了錢途，前途啊。所以本文對(duì)做PC端的項(xiàng)目進(jìn)行了一個(gè)過(guò)程的總結(jié)。
 

 

　　一、了解、明確需求

　　這個(gè)應(yīng)該是第一步了，不了解需求你就不知道為什么要做，要怎么去做這個(gè)項(xiàng)目的工作。

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

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

　　(3)明確功能點(diǎn)，做好任務(wù)分配。

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

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

　　二、明確技術(shù)選型

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

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

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

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

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

 

　　三、自動(dòng)化工具的使用

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

　　四、基礎(chǔ)代碼的模塊化

　　以上都是準(zhǔn)備工作，但也是很重要的部分。這一步開(kāi)始就可以真的開(kāi)始就進(jìn)行工作了。

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

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

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

 

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

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

　　六、零碎任務(wù)分配

　　大塊的功能完了之后就是各個(gè)功能點(diǎn)了，這個(gè)應(yīng)該在分配任務(wù)的時(shí)候分配好，當(dāng)然也可以當(dāng)前面的工作完了之后看開(kāi)發(fā)人員的工作情況進(jìn)行分配，保證每個(gè)人都有工作，保證項(xiàng)目不會(huì)拖沓。

　　七、當(dāng)上面的工作進(jìn)行完了之后，整個(gè)項(xiàng)目的功能基本就完成了

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

　　八、項(xiàng)目總結(jié)

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

　　過(guò)程中如果一個(gè)開(kāi)發(fā)人員做了太久了一個(gè)類似的功能，可能會(huì)感到枯燥，所以避免一個(gè)人對(duì)一個(gè)大塊的內(nèi)容進(jìn)行開(kāi)發(fā)，連個(gè)交流的人都沒(méi)有，會(huì)很痛苦。因?yàn)槲揖陀羞@樣的經(jīng)歷。