開(kāi)發(fā)實(shí)踐

系統(tǒng)設(shè)計(jì)

NOTE：綜合運(yùn)用實(shí)習(xí)案例，本章使用案例為網(wǎng)易云音樂(lè)， 并且主要關(guān)注前端工程師的工作職責(zé)，其他工程師的職責(zé)規(guī)范并不包含。

交互流程說(shuō)明

通過(guò)交互文案來(lái)了解用戶行為與異常提示。

系統(tǒng)分解

例如下面的獨(dú)立的子系統(tǒng)：

• 注冊(cè)登錄密碼
• 系統(tǒng)主框架
  • 頂欄
    • 搜索
    • 賬號(hào)
    • 消息
    • 設(shè)置
  • 邊欄
    • 歌單操作
    • 其他
  • 底欄
    • 播放器
    • 播放列表
    • 歌曲詳情
  • 內(nèi)容區(qū)

系統(tǒng)分解必須對(duì)照交互稿做到百分之百的對(duì)應(yīng)，不能漏掉任何一個(gè)模塊。 后續(xù)的開(kāi)發(fā)與評(píng)估都需根據(jù)此分解進(jìn)行。

接口設(shè)計(jì)

分析模塊交互理解需求以及交互行為。對(duì)于數(shù)據(jù)獲取的形式進(jìn)行適當(dāng)?shù)募僭O(shè)， 并定義數(shù)據(jù)類型、模板資源、異步接口、以及頁(yè)面摘要。

項(xiàng)目結(jié)構(gòu)

根據(jù)規(guī)范說(shuō)明就可以做出項(xiàng)目的結(jié)構(gòu)定義，項(xiàng)目結(jié)構(gòu)分兩部分后端模板與前端實(shí)現(xiàn)。

初始代碼

前端工程師需要在開(kāi)發(fā)工具中添加開(kāi)發(fā)規(guī)范，以及測(cè)試使用的模擬數(shù)據(jù)。

系統(tǒng)實(shí)現(xiàn)

視覺(jué)說(shuō)明（視覺(jué)稿）中包含各個(gè)情況下用戶界面的顯示樣式，其定義了交互稿中的所有效果。之后則需要從中提取出通用組件，其中包括：

• 通用原件（Logo，提示，輸入框，圖標(biāo)，按鈕等）
• 通用列表
• 復(fù)合組件（留言板類）
• 浮層彈出

測(cè)試發(fā)布

使用同步模擬數(shù)據(jù)進(jìn)行 本地測(cè)試 測(cè)試，只需在入口頁(yè)面引入既可。異步處理則可以使用第三方的代理軟件既可。在本地測(cè)試完后，需要前后端的對(duì)接聯(lián)調(diào)。去除模擬同步數(shù)據(jù)，直接使用后端數(shù)據(jù)既可。然而對(duì)于異步數(shù)據(jù)聯(lián)調(diào)直接去除代理轉(zhuǎn)向既可。

在完成測(cè)試后需要打包發(fā)布上線，可使用自動(dòng)化工具將工程文件打包優(yōu)化（合并壓縮混淆）。