簡(jiǎn)介：手把手教大家進(jìn)行需求分析、組織代碼，并使用組件化編寫(xiě)高性能代碼。通過(guò)本課程學(xué)習(xí)，你將學(xué)會(huì)搭建TS開(kāi)發(fā)環(huán)境、學(xué)會(huì)如何分析案例需求、了解什么是組件化、案例樣式排版布局以及功能模塊組件化開(kāi)發(fā)。
第2章 Webpack搭建項(xiàng)目環(huán)境
本章主要講解webpack項(xiàng)目環(huán)境搭建，以及TypeScript編譯配置。
第3章 需求分析&視頻列表實(shí)現(xiàn)
本章主要分析項(xiàng)目，如果進(jìn)行組件化拆分，以及視頻列表布局實(shí)現(xiàn)和視頻列表樣式實(shí)現(xiàn)。
第4章 Popup彈層組件開(kāi)發(fā)
本章節(jié)主要講解Popup彈層組件框架搭建、模塊化CSS方式、彈層布局結(jié)構(gòu)及樣式、遮罩層布局及樣式、彈層交互及彈層容器回調(diào)實(shí)現(xiàn)。
第5章 彈出層中的Video播放器組件開(kāi)發(fā)
本章主要講解組件框架搭建、播放器布局結(jié)構(gòu)及樣式書(shū)寫(xiě)、播放與暫停的實(shí)現(xiàn)、當(dāng)前時(shí)間與總時(shí)間計(jì)算、全屏功能、播放進(jìn)度條、拖拽播放進(jìn)度條與音量進(jìn)度條、配置自動(dòng)播放等功能的實(shí)現(xiàn)。
- 視頻： 5-1 視頻組件框架搭建 (05:29)
- 視頻： 5-2 添加播放器布局結(jié)構(gòu) (12:50)
- 視頻： 5-3 添加播放器樣式 (17:57)
- 視頻： 5-4 播放與暫停的實(shí)現(xiàn) (06:03)
- 視頻： 5-5 當(dāng)前時(shí)間與總時(shí)間 (08:15)
- 視頻： 5-6 播放器全屏功能 (06:59)
- 視頻： 5-7 播放進(jìn)度條的實(shí)現(xiàn) (05:59)
- 視頻： 5-8 拖拽播放進(jìn)度條與音量進(jìn)度條 (10:32)
- 視頻： 5-9 配置自動(dòng)播放 (06:25)
- 視頻： 5-10 打包項(xiàng)目案例 (08:58)