本篇寫一下前端項(xiàng)目負(fù)責(zé)人在項(xiàng)目初期需要做什么？

主要分四個(gè)方面

1. 項(xiàng)目相關(guān)

這一部分可能看起來沒那么重要，但是做項(xiàng)目對(duì)于項(xiàng)目的關(guān)鍵信息還是要了解的。因?yàn)榭赡墚?dāng)我們?cè)诤推渌涣私饽壳拔覀冊(cè)谧龅臇|西的時(shí)候，會(huì)問下面的一些東西。

1.1 項(xiàng)目背景

通過項(xiàng)目背景了解當(dāng)前業(yè)務(wù)痛點(diǎn)，想通過我們的產(chǎn)品達(dá)到什么樣的效果。舉例：

• A：營(yíng)銷增長(zhǎng)（如：針對(duì)個(gè)體要貨訂單預(yù)測(cè)不準(zhǔn)，店鋪運(yùn)營(yíng)可視化程度不夠，會(huì)員缺失有效管理等）
• B：供應(yīng)鏈（如：生產(chǎn)與銷售預(yù)測(cè)不匹配，物流配送可能存在食品安全風(fēng)險(xiǎn)等）
• C：共享與組織能力（如：出賬較慢，對(duì)賬效率低等）
• D：技術(shù)與架構(gòu)（如：現(xiàn)存各系統(tǒng)協(xié)同不足，性能和功能影響業(yè)務(wù)等）

1.2 項(xiàng)目愿景

以公司項(xiàng)目為例：這里說的比較簡(jiǎn)單。基于中臺(tái)架構(gòu)完整構(gòu)建業(yè)務(wù)應(yīng)用，實(shí)現(xiàn)業(yè)務(wù)全流程貫通，實(shí)現(xiàn)業(yè)務(wù)實(shí)施在線和數(shù)據(jù)口徑統(tǒng)一，并通過中臺(tái)能力，實(shí)現(xiàn)自動(dòng)化營(yíng)銷，財(cái)務(wù)自動(dòng)化對(duì)賬并持續(xù)優(yōu)化。

1.3 項(xiàng)目?jī)r(jià)值是什么

• 增加收入
• 提升效率
• 降低成本
• 加強(qiáng)內(nèi)控

1.4 項(xiàng)目階段和周期安排

這個(gè)還是比較重要的，因?yàn)樨?fù)責(zé)的開發(fā)任務(wù)是具有階段性的，分為幾個(gè)階段，幾個(gè)迭代，每個(gè)時(shí)間段需要做什么，有什么樣的產(chǎn)出，是不是在業(yè)務(wù)流程上面達(dá)成共識(shí)。這個(gè)很重要。這個(gè)在下面進(jìn)行任務(wù)排期的時(shí)候也會(huì)考慮進(jìn)來。

2. 團(tuán)隊(duì)相關(guān)

這里主要是對(duì)于團(tuán)隊(duì)內(nèi)部的人員熟悉和周會(huì)早會(huì)的匯報(bào)形式和內(nèi)容形式的了解。有利于后期的協(xié)作。

3. 前端相關(guān)

3.1 架構(gòu)相關(guān)

這一部分主要是為了能夠給予業(yè)務(wù)，滿足業(yè)務(wù)的情況下設(shè)計(jì)書寫出技術(shù)架構(gòu)圖。前面三個(gè)是為了能夠做好技術(shù)架構(gòu)的基礎(chǔ)信息了解。

3.1.1 如何書寫架構(gòu)方案

這個(gè)其實(shí)我個(gè)人也沒有很好的方法論。貼兩張以前畫過的圖：

但是到底技術(shù)架構(gòu)圖的標(biāo)準(zhǔn)是什么？

下面這些條件是公司大佬【阿里p8】和我過技術(shù)架構(gòu)圖【上面第二張圖】反饋給我的。

• 技術(shù)架構(gòu)：上面圖主要表現(xiàn)的是技術(shù)架構(gòu)
• 業(yè)務(wù)邊界：針對(duì)不同的業(yè)務(wù)場(chǎng)景，邊界清晰，走不通的業(yè)務(wù)架構(gòu)
• 業(yè)務(wù)架構(gòu)：針對(duì)具體的業(yè)務(wù)場(chǎng)景進(jìn)行技術(shù)支持。例如我們遇到pos離線的場(chǎng)景，這屬于業(yè)務(wù)架構(gòu)
• 動(dòng)態(tài)流程：業(yè)務(wù)流程 pos 下單，查商品 商品流程如何在架構(gòu)圖體現(xiàn)【缺失】
• 集成架構(gòu)：其他系統(tǒng)集成
• 部署架構(gòu)：部署

3.2 技術(shù)相關(guān)

3.2.1 腳手架

技術(shù)選型 & 腳手架選型

這里主要是做技術(shù)選型和腳手架選型。因?yàn)槲覀兿鄬?duì)統(tǒng)一，所以基本沒這個(gè)問題。

系統(tǒng)模塊處理

這里是列舉了三個(gè)例子

• 權(quán)限
• 多頁簽
• 登陸校驗(yàn)

公共模塊處理

• 公共方法：公共方法的放置
• 公共枚舉值：可參照用dumi發(fā)布一個(gè)用于處理枚舉值的npm包
• 公共service：數(shù)據(jù)接口處理
• 公共組件：位置放置和規(guī)范【也可通過dumi發(fā)布公有包或者私有包 參照：用react手寫一個(gè)簡(jiǎn)單的日歷】

3.2.2 技術(shù)調(diào)研 & 技術(shù)落地

疑難問題的技術(shù)調(diào)研和技術(shù)落地方案。

• 以前做過：react - 多頁簽頁面緩存
• 現(xiàn)在在做：electron 做pos【js控制打印機(jī)，js加載動(dòng)態(tài)庫dll適配ic卡等等】

3.2.3 業(yè)務(wù)開發(fā)demo

這是為了最大化的解決項(xiàng)目當(dāng)中初級(jí)開發(fā)的開發(fā)問題。

• 代碼demo：業(yè)務(wù)開發(fā)的demo代碼
• 開發(fā)講解：同步講解demo的開發(fā)模式
• 文檔說明：沉淀文檔說明

3.3 任務(wù)劃分相關(guān)

這里的內(nèi)容就不多說了，以前的文章提到過一些：前端項(xiàng)目負(fù)責(zé)人需要具有的能力。

3.3.1 根據(jù)階段目標(biāo)check任務(wù)排期是否合適

這里著重提出來，是和團(tuán)隊(duì)相關(guān)部分提到的階段目標(biāo)有關(guān)系。需要和階段目標(biāo)契合，這樣在一個(gè)時(shí)間段，我們項(xiàng)目整體協(xié)作出來的東西才是完整的東西。

3.4 規(guī)范相關(guān)

3.4.1 開發(fā)規(guī)范

• 代碼規(guī)范
• 協(xié)作流程
• 提交規(guī)范

3.4.2 內(nèi)部協(xié)同規(guī)范

• 早會(huì)
• 周會(huì)
• 下發(fā)任務(wù)溝通：下發(fā)任務(wù)明確，講清楚技術(shù)重點(diǎn)難點(diǎn)，開發(fā)人員了解并確認(rèn)。
• 完成任務(wù)匯報(bào)：任務(wù)完成及時(shí)匯報(bào)，更多是通過項(xiàng)目管理工具完成。
• 疑難問題協(xié)同

3.4.3 文檔規(guī)范

• 相關(guān)文檔匯總地址
• 技術(shù)文檔
• 規(guī)范文檔
• 周會(huì)文檔匯總

3.5 前端部門相關(guān)

4. 協(xié)作相關(guān)

4.1 與產(chǎn)品

4.1.1 統(tǒng)一原型規(guī)范

這里著重說明：統(tǒng)一原型規(guī)范，就是原型的輸出同樣的交互頁面風(fēng)格要保持統(tǒng)一，不允許有很大差距。

• 原型輸出不像一個(gè)系統(tǒng)
• 代碼開發(fā)內(nèi)耗

4.2 與后端

4.2.1 統(tǒng)一前端后共識(shí)

這里著重說明：前后端對(duì)于一些事情處理需要達(dá)成共識(shí)，這樣會(huì)節(jié)省很多溝通問題。

4.3 與測(cè)試

4.3.1 統(tǒng)一交付測(cè)試認(rèn)知

• 界面無明顯的UI類型BUG，與原型圖、UI設(shè)計(jì)圖保持一致，關(guān)于頁面的設(shè)計(jì)、排版都能夠符合產(chǎn)品需求。如有修改應(yīng)和產(chǎn)品、UI溝通一致并且進(jìn)行修改。
• 功能能夠?qū)崿F(xiàn)產(chǎn)品的需求，且輸入文本框、選擇框、翻頁按鈕、新增校驗(yàn)等能夠與產(chǎn)品原型一致。還需要考慮字段長(zhǎng)度過長(zhǎng)的情況如何處理。
• 當(dāng)前所做的功能應(yīng)該是流程性功能，不止需要考慮當(dāng)前頁面的功能實(shí)現(xiàn)，需要考慮一下前置的數(shù)據(jù)是從哪里來，在當(dāng)前的數(shù)據(jù)展示是否合理。前置的業(yè)務(wù)數(shù)據(jù)是否能夠在當(dāng)前頁面跑下去或者完成。
• 每次做完當(dāng)前頁面或者修改當(dāng)前頁面的功能時(shí)，跑兩次調(diào)接口，看當(dāng)前頁面是否可以傳輸數(shù)據(jù)給后端，并且成功返回響應(yīng)。

4.3.2 公共模塊的統(tǒng)一處理認(rèn)知

頁面提示語的確定

• 表單頁面提交不需要confirm提示語
• 數(shù)據(jù)刪除/列表頁更新狀態(tài)需要confirm提示語
• 新建頁面路由跳轉(zhuǎn)離開是否需要提示語

form表單的處理

• form表單必填項(xiàng)驗(yàn)證form表單必填項(xiàng)/非必填項(xiàng)的長(zhǎng)度驗(yàn)證（依賴于數(shù)據(jù)庫設(shè)定或者也存在統(tǒng)一長(zhǎng)度限制）
• form表單數(shù)字驗(yàn)證/電話驗(yàn)證/郵件驗(yàn)證
• form表單日期范圍驗(yàn)證的設(shè)定，startDate的日期范圍驗(yàn)證是否是只可以點(diǎn)擊當(dāng)天之前/當(dāng)天之后，endDate的選擇開始日期一般為startDate的日期之后
• form表單的特殊字符驗(yàn)證