開發(fā)實踐

系統(tǒng)設計

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

交互流程說明

通過交互文案來了解用戶行為與異常提示。

系統(tǒng)分解

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

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

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

接口設計

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

項目結構

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

初始代碼

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

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

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

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

測試發(fā)布

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

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