前端開發(fā)工作匯報(bào)

前端開發(fā)工作匯報(bào)frontenddevelopmentreport.匯報(bào)人：羅劍濤部門：研發(fā)中心一、工作總結(jié)了解產(chǎn)品investigationproduct1選定技術(shù)架構(gòu)selectedtechnicalframework2開發(fā)約定developmentagreement3成果展示resultsdisplay4123大量的數(shù)據(jù)操作與渲染檔案數(shù)據(jù)管理面向互聯(lián)網(wǎng)云管理數(shù)據(jù)檢索檔案查詢系統(tǒng)了解產(chǎn)品investigationproduct0102010102HTML5/CSS3編碼UI框架javascript(ES5/6/7)Element-UIVue、Vue-Cli、Vuex、Vue-RouterMockAxios選定技術(shù)架構(gòu)selectedtechnicalframework基礎(chǔ)架構(gòu)前后端完全分離，跨域調(diào)用接口調(diào)試，分別部署與上線開發(fā)模式經(jīng)過溝通確定了API文檔交互方案，以方便前后端調(diào)用、調(diào)試接口時(shí)查看API文檔的生產(chǎn)規(guī)范了接口返回?cái)?shù)據(jù)的格式，方便前端構(gòu)建展示的數(shù)據(jù)接口返回規(guī)范數(shù)據(jù)模型決定了組件的封裝與代碼風(fēng)格編寫，直接影響代碼的維護(hù)成本，以及組件的通用性各個(gè)實(shí)體/數(shù)據(jù)模型的數(shù)據(jù)結(jié)構(gòu)開發(fā)約定developmentagreement項(xiàng)目的基礎(chǔ)權(quán)限渲染決定了模塊化的走向項(xiàng)目的權(quán)限結(jié)構(gòu)渲染產(chǎn)品展示-PC端resultsdisplay產(chǎn)品展示-PC端resultsdisplay產(chǎn)品展示-PC端resultsdisplay產(chǎn)品展示-PC端resultsdisplay產(chǎn)品展示-移動(dòng)端resultsdisplay產(chǎn)品展示-WebPDF閱讀器resultsdisplay產(chǎn)品展示-關(guān)系圖譜resultsdisplay產(chǎn)品展示-項(xiàng)目結(jié)構(gòu)resultsdisplaycommon：公用工具類庫modules：

模塊庫

docAnalysis：統(tǒng)計(jì)分析模塊docSearch：搜索模塊

error：錯(cuò)誤處理模塊

login：登錄模塊

sysManager：系統(tǒng)管理模塊theme：主題樣式庫vuex：全局狀態(tài)庫language：全球語義化文字庫config：全局配置文件二、意見反饋開發(fā)過程developmentprocess2需求確認(rèn)demandconfirmation1清晰、完整的產(chǎn)品原型，可以減少開發(fā)過程中會(huì)犯的不必要的錯(cuò)誤原型產(chǎn)出需求確認(rèn)projectinvestigation如果能確認(rèn)需求會(huì)變更，需要及早通知，能將即將變更的方向也一并告知那是最好需求變更以數(shù)據(jù)驅(qū)動(dòng)頁面的開發(fā)模式，就要求后臺開發(fā)人員盡早確定數(shù)據(jù)模型，好讓彼此知道要用多少接口，要拿多少次數(shù)據(jù)，從而能評估功能開發(fā)難度建立數(shù)據(jù)模型術(shù)業(yè)有專攻，前端開發(fā)和UI設(shè)計(jì)不可混為一談，即使項(xiàng)目對美觀程度要求不高，但是一旦面對著挑剔的客戶，就會(huì)導(dǎo)致項(xiàng)目頻繁返工，最終導(dǎo)致結(jié)項(xiàng)延長UI設(shè)計(jì)開發(fā)過程-傳統(tǒng)開發(fā)流程developmentprocess需求確認(rèn)數(shù)據(jù)設(shè)計(jì)編寫前端邏輯編寫前端頁面自測聯(lián)調(diào)對接接口編寫后端邏輯整體調(diào)試提測前端返工后端返工上線開發(fā)過程-理想的開發(fā)流程developmentprocess需求確認(rèn)開發(fā)頁面實(shí)現(xiàn)原型數(shù)據(jù)設(shè)計(jì)構(gòu)建接口定義接口、規(guī)范編寫邏輯模擬請求自測編寫邏輯Postman自測聯(lián)調(diào)返工提測前端開發(fā)后端開發(fā)詳盡清晰的文檔，可以減少很多沒必要的溝通時(shí)間，并且在聯(lián)調(diào)時(shí)能盡量達(dá)到彼此想要的效果接口文檔前端的每一行代碼都運(yùn)行在客戶的電腦上，從性能上考慮，前端通過接口獲得的數(shù)據(jù)應(yīng)該盡量避免重新構(gòu)建可用數(shù)據(jù)，以免浪費(fèi)性能接口數(shù)據(jù)簡化聯(lián)調(diào)過程中可能后端會(huì)修改了接口數(shù)據(jù)，進(jìn)度如果沒有同步，那么很有可能會(huì)造成前端腳本報(bào)錯(cuò)，返測無法發(fā)現(xiàn)聯(lián)調(diào)進(jìn)度同步聯(lián)調(diào)中應(yīng)該有個(gè)開發(fā)用的服務(wù)器，可以讓前端更穩(wěn)定的調(diào)試接口，也不會(huì)因?yàn)楹蠖烁腂UG而暫停調(diào)試開發(fā)用服務(wù)器由于前后端分離，雙端建立聯(lián)系只能通過大量接口，如果接口返回?zé)o意義的數(shù)據(jù)，那么就會(huì)造成數(shù)據(jù)包太大，用戶要承擔(dān)時(shí)間成本，服務(wù)器也要承受數(shù)據(jù)壓力接口數(shù)據(jù)最小化測試提問題的時(shí)候，應(yīng)該附帶瀏覽器型號、版本、模式，以及產(chǎn)生BUG的步驟和預(yù)期的反應(yīng)BUG復(fù)現(xiàn)開發(fā)過程developmentprocess三、目標(biāo)高度獨(dú)立，高度定制，可隨意切換版本、復(fù)用靈活的模塊化統(tǒng)一編碼風(fēng)格，詳盡的版本說明，低耦合的代碼結(jié)構(gòu)無痛的代碼維護(hù)與迭代前后端各司其職，以最理想的模式