1.列表操作
在實(shí)際項(xiàng)目中，列表出鏡率最高泰佳，分為圖片式列表（相冊(cè)盼砍，專輯）和信息形式列表（歌曲列表）
列表常見操作：顯示列表尘吗，選擇列表項(xiàng)（單選，多選）浇坐，新增列表項(xiàng)睬捶，刪除列表項(xiàng)，更新列表項(xiàng)
數(shù)據(jù)定義
id：歌曲標(biāo)識(shí) ? ? name：歌曲名稱 ? ? ? ?duration：歌曲時(shí)長(zhǎng) ? ? ?
album：專輯信息（id：專輯標(biāo)識(shí) ?name：專輯名稱） ? ? ?
artist：歌手信息 ?（id：歌手標(biāo)識(shí)? name：歌手名稱）
把數(shù)據(jù)和視圖結(jié)構(gòu)分離出來：模板
根據(jù)實(shí)際情況選擇合適模板近刘，每種模板有自己特殊的語言擒贸，語法形式。在程序中歌曲列表可以通過模板提供的接口傳入觉渴，生成列表對(duì)應(yīng)的 HTML 結(jié)構(gòu)介劫。
選擇列表項(xiàng)
多選操作
右鍵菜單
編程方式
面向視圖的編程方式：視圖和實(shí)現(xiàn)的控制層代碼之間是直接相互關(guān)聯(lián)在一起的。
實(shí)際視圖層變化非常頻繁案淋，控制層與視圖層耦合較緊密座韵，很難做完全的自動(dòng)化測(cè)試。
面向數(shù)據(jù)的編程方式：視圖被抽象為若干的數(shù)據(jù)和狀態(tài)踢京。
后續(xù)的操作針對(duì)數(shù)據(jù)模型誉碴，可做完全的自動(dòng)化測(cè)試。
2.組件實(shí)踐
組件是一種面對(duì)用戶的瓣距，獨(dú)立的可復(fù)用交互元素的封裝
常規(guī)組件實(shí)現(xiàn)流程
分析：交互意圖以及需求
結(jié)構(gòu)：HTML + ?CSS 實(shí)現(xiàn)靜態(tài)結(jié)構(gòu)
接口：定義公共接口
實(shí)現(xiàn)：從抽象到細(xì)節(jié)黔帕，實(shí)現(xiàn)功能接口，暴露事件
完善：便利接口蹈丸，插件封裝成黄，重構(gòu)等
彈窗需求分解
窗口垂直水平居中
半透明遮罩背景
自定義彈窗內(nèi)容和標(biāo)題
提供確認(rèn)和取消操作
靜態(tài)結(jié)構(gòu)
定義公共接口
實(shí)現(xiàn)思路：從抽象到細(xì)節(jié)
從宏觀角度思考應(yīng)該有哪些業(yè)務(wù)邏輯。對(duì)組件邏輯做足夠抽象白华，可以對(duì)組件本身在代碼層面進(jìn)行功能測(cè)試慨默。
監(jiān)聽者模式（訂閱發(fā)布模式）
減小內(nèi)部配置參數(shù)的壓力贩耐，有一個(gè)一致的點(diǎn)處理發(fā)布系統(tǒng)弧腥。
輪播組件需求分解
滾動(dòng)內(nèi)容垂直水平居中
滾動(dòng)條目數(shù)不受限制
前后翻動(dòng)，并支持拖拽
可直接定位
頁(yè)面結(jié)構(gòu)分解
視口（overflow:hidden;）
輪播容器
輪播圖（position:absolute;）
公共 API 接口
實(shí)現(xiàn)要點(diǎn)：數(shù)據(jù)定義
三個(gè)值唯一確定 slide 展現(xiàn)
pageIndex[0~pageNum]：當(dāng)前圖片下標(biāo)
slideIndex[0~2]：slide 下標(biāo)
offsetAll：容器的偏移下標(biāo)
拖拽手勢(shì)支持
mousedown（開始拖拽）：記錄初始坐標(biāo)潮太，transitionDuration設(shè)為 0s
mousemove（拖拽移動(dòng)）：設(shè)置容器偏移
mouseup（結(jié)束拖拽）：清除開始標(biāo)記管搪，根據(jù)偏移計(jì)算輪播指針，恢復(fù) transitionDuration
