組件式開發 webapp全站之第一章

1-1課程介紹 略
1-2課程安排
課程安排分爲兩個方面：開發流程和技術實現
1-2-1開發流程
爲何要說流程
每一個流程要作什麼
各個環節易出現什麼問題
問題定責
1-2-2技術實現
技術規劃，選型
設計易擴展的開發方案
開發各類圖表組件
1-3WEB項目開發流程介紹
1-3-1爲何要說開發流程
1.能夠提高開發效率
2.防止背鍋
1-3-2開發流程的環節劃分
開發流程劃分爲三個環節：開發前，開發中，開發後
1）開發前
產品功能設計 產品經理 產出：產品需求文檔
視覺/交互設計 美工 產出：視覺設計稿，交互設計稿
2）開發中
技術規劃 技術經理 產出：項目開發文檔 （產品需求是否合理，產品代碼是否能夠複用，複雜項目是否能夠拆分）
前端開發 前端開發工程師 產出：與視覺稿相符的html頁面，與交互稿相符的js代碼
後端開發 後端開發工程師 產出：後端的邏輯交互，數據交互
3）開發後
測試 測試工程師 產出：對網頁進行功能測試，知足產品經理的需求
上線 運維工程師 產出：代碼佈署到服務器並對外發布
1-4開發角色縮寫簡介
1）產品經理
PM——Product Manager 產品經理
MRD——Market Requirements Document 市場需求文檔
2）美工
UI——UserInterface 界面視覺設計
UE——UserExperience 用戶體驗設計
3）技術經理
PM——Project Manager 項目經理
4）前端開發
FE——FrontEnd developer engineer
5)後端開發
BE——BackEnd
RD——Research Developer
6)測試
QA——Quality Assessment
7)運維
OP——Operate
1-5產品設計
1-5-1需求文檔——>交互設計稿——>視覺設計稿
1-5-2設計的9個頁面
封面 核心理念（圖文） 課程分佈（折線圖） 移動教程（餅圖） 前端教程（柱圖） 後端教程（雷達圖）
報名過萬（環圖） 難度分佈（散點圖） 尾頁
1-6開發規劃
技術經理 產出：項目開發文檔
1）可行性確認
2）技術選型
3）開發/線上環境規劃
4）技術開發方案設計
5）團隊協做方式

技術開發方案設計
4.1）頁面DOM操做
技術選型：jQuery
簡介：一款輕量級的js框架
特色：1）強大的選擇器
2）出色的DOM操做封裝
3）可靠的事件處理機制
4.2）頁面切換功能
技術選型：FullPage.js插件
簡介：jQuery插件
特色：API簡單，易用，跨瀏覽器
4.3）組織內容結構方案
Page——Component 頁——組件
大體分爲兩種：圖文組件和圖表組件
4.4）技術點
html+css 實現柱圖，散點圖的繪製
Canvas 實現折線圖，雷達圖，餅圖，環圖的繪製