在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

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

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

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

交互流程說明

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

系統(tǒng)分解

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

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

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

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

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

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

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

初始代碼

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

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

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

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

測試發(fā)布

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

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