鍍金池/ 教程/ HTML/ 開發(fā)實踐
書單
JavaScript 動畫
HTML
CSS Reset
屬性操作
DOM 事件
閉包
Photoshop
Atom 文本編輯器
表單操作
布局解決方案
類型系統(tǒng)
開發(fā)實踐
數(shù)據(jù)通信
變量作用域
BOM
JavaScript 程序設計
前端工程師概述
CSS
響應式布局
表達式與運算符
基本語法
JavaScript 介紹
版本控制
布局
調試器
背景
圖片保存
多媒體
文檔樹
列表操作
Sublime 編輯器
盒模型
常見布局樣例
類型識別
變形
數(shù)據(jù)存儲
選擇器
頁面架構
開發(fā)及調試工具
頁面模塊化
節(jié)點操作
測量及取色
瀏覽器兼容
HTML 簡介
內(nèi)置對象
實體字符
產(chǎn)品前端架構
協(xié)作流程
切圖
工具, 面板, 視圖
正則表達式
動畫
語句
面向對象
HTML 語法
HTML 標簽
技術選擇
樣式操作
圖片優(yōu)化與合并
語法
DOM 編程藝術
Canvas
接口設計
頁面優(yōu)化
文本

開發(fā)實踐

開發(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)調。去除模擬同步數(shù)據(jù),直接使用后端數(shù)據(jù)既可。然而對于異步數(shù)據(jù)聯(lián)調直接去除代理轉向既可。

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

上一篇:變形下一篇:JavaScript 程序設計