基於組件的web app

基於組件的web app

項目來源：慕課網
展現效果連接
項目源碼

1 分析

1.1 app簡介

基於組件的web app實現了一款精緻的H5動態移動端單頁數據報告，除了剛開始的顯示進度的預加載頁，共由十個頁面組成，每一個頁面便是一個組件，除了首頁和尾頁，數據報告的中間8個頁面有同款的標題欄和背景，分別以折線圖、餅狀圖、柱形圖、雷達圖、環圖和散點圖展現不一樣的數據。每種圖都是動態生成。

1.2 app 簡要分析

1.2.1 資源圖

資源圖由設計師提供，經過精確切圖和標尺標記，能夠從原型圖中提取app 的背景圖和靜態資源圖。

1.2.2 頁面加載機制

fullpage插件對全屏滾動效果和頁面切換提供了良好的支持，便於組件式開發的模版加載。fullpage中追加一個頁面即是追加一個組件，組件中的獨立動畫效果又構成了組件的子組件。

1.2.3 組件設計

組件設計的關鍵是抽取共性的以便重用，提取特性的由組件各自傳遞參數生成動畫。

1.2.4 動畫生成

考慮到性能和動畫的流暢度，採用canvas繪畫來完成各類圖的生長動畫。

1.2.5 預加載進度顯示

加載過程當中最佔用帶寬的即是圖片，按照圖片數加載的百分比來顯示進度的加載的百分比，圖片每成功加載一張，便回調進度函數更改進度。

2 設計

2.1 結構設計

index.html——app 的入口文件
imgs——圖片資源
css——樣式
js——組件類
test ——組件類的測試

2.2 實現過程

2.2.1 首先準備資源圖，並存入imgs文件夾下

注意：
1.資源圖原型圖中應有精確的位置標識以便進行定位。
2.圖片命名要合理，有頁面標示，並語義清晰。

2.2.2 組件式開發過程

首先是應用fullpage插件，以便後面加載頁面和組件；而後實現各個組件；開發的過程當中便執行測試每一個組件；最後在app 的入口文件中加載調用各個組件，並加入遠程數據。
test目錄下是每一個組件的執行測試入口，包括fullpage(test-H5.html)。

js目錄下是組件的實現，lib用於存放靜態資源

css目錄定義了組件的樣式

入口文件最終整合加載組件，並調用遠程的數據，這裏data.json用於模擬遠程數據

3 實現

app的源碼地址

3.1 fullpage應用

3.1.1 測試基類實現

實現了一個基類組件ComponentBase以便fullpage看成頁面加載，基類組件以參數傳遞的形式，接口參數爲組件名稱及文本&樣式，並在基類組件中加入了簡單的加載和移出事件，經過類名控制樣式。
相關文件：test-h5ComponentBase.html、h5ComponentBase.js、h5ComponentBase.css

3.1.2 fullpage 應用

首先學習fullpage的使用，測試文件：test-valid.html
控制頁面的加載能夠以連綴的方式加載頁面，並在加載頁面後連綴加載組件，並在頁面加載過程當中調用fullpage插件，將設定好的頁面以全屏滾動的方式加載，藉助fullpage的移出和加載控制組件的移出和加載動畫。loading相關的代碼先忽略，後面有補充
相關文件：test-h5.html、h5.js、h5.css

3.2 組件實現

3.2.1 圖文組件

在基本組件的基礎上進行改造，主要是爲了測試實現組件的相對定位。
相關文件：test-h5ComponentBaseRelativeTo.html、h5ComponentBaseRelativeTo.js、h5ComponentBaseRelativeTo.css

3.2.2 帶有動畫生成效果的圖表組件

前面已經開發過基本組件類，圖表組件也是組件，能夠直接調用基本組件的接口進行圖表的組件開發。
由於圖表組件的開發，並無依賴關係，因此開發流程能夠不按照圖表的加載前後開發，按照圖表開發的難易程度按部就班地進行圖表組件的開發。
圖表組件的代碼中先忽略onLoad和onLeave部分，它們實現的是翻頁時的加載和移出，後面整合的時候會用到，此處咱們只關注每一個獨立的組件，每一個獨立的組件只先關注最重要的帶有動畫的部分，公共的組件樣式整合時統一處理。

3.2.2.1 散點圖組件

散點圖的每一個點都有文字說明還有表示數據量的百分比，百分比是經過相對第一個最大點的寬高比來設置的，以第一個點做爲基準點，其餘點從基準點開始移向四周實現載入動畫，每一個點還有點擊觸發的focuc動態渲染效果，初始時默認先渲染基本點。

相關文件：test-h5ComponentPoint.html、h5ComponentPoint.js、h5ComponentPoint.css

3.2.2.2 柱狀圖組件

柱狀圖有兩個實現：水平柱狀圖和垂直柱狀圖。水平柱狀圖經過改變參數即可以輕鬆地實現垂直柱狀圖。
每條柱狀都是由名稱、比例條和比例數據組成，比例條有動態生成效果，效果經過控制類名加css動畫來實現。

相關文件：
1.水平柱狀圖：test-h5ComponentBar.html、h5ComponentBar.js、h5ComponentBar.css
2.垂直柱狀圖：test-h5ComponentBar_v.html、h5ComponentBar_v.js、h5ComponentBar_v.css

3.2.2.3 折線圖組件

從折線圖開始，因爲組件自己結構比較複雜，下面都將採用canvas繪畫來完成。
折線圖有兩個重要的組成部分，一個是背景網格，另外一個是折線圖的生長動畫，這兩部分都使用canvas進行繪製。
考慮到移動端是雙分辨率，canvas畫布的大小設爲二倍的組件自己大小，並以100%鋪滿組件，即可獲得高分辨率的繪畫效果。
背景網格分爲橫向和縱向兩部分實現，實現縱向的同時，借用其垂直位置，同時加入說明項。
折線的實現分爲點、線、陰影三部分實現，最後加上每一個折線點的數據百分點，考慮到生長動畫，給繪製函數設置一個百分比表示折線的狀態位置，動畫從最初的0%到最終的100%，採用setTimeout定時和循環共同實現生長過程。

相關文件：test-h5ComponentPolyline.html、h5ComponentPolyline.js、h5ComponentPolyline.css

3.2.2.4 雷達圖組件

雷達圖和折線圖的實現過程很類似，首先是畫背景圖（網格和傘骨），還有數聽說明，而後畫點和折線，最終以定時器加循環實現生長動畫。
爲了使說明數據向四周散開，文字在x軸分了左右兩種偏移，在y軸分了上下兩種偏移。
雷達圖相比折線圖的難點是：雷達點的位置，計算公式：
已知圓心（a,b）,半徑r
rad=(2*Math.PI/360)*(360/step)*i;
x=a+Math.sin(rad)*r;
y=b+Math.cos(rad)*r;

相關文件：test-h5ComponentRadar.html、h5ComponentRadar.js、h5ComponentRadar.css

3.2.2.5 餅圖組件
餅圖由三個圖層實現，地圖層、數據層和蒙板層，表面上看起來生長動畫彷佛存在於數據層，可是一種更簡單的實現方式是，經過蒙板層的遮擋，漸現數據層。蒙板層顯示的越多，數據層也就越少。
這裏須要設置三個圖層的z 軸層次，底圖最下，數據在中間，蒙板最上用於遮擋。
餅圖四周的文字說明也採用了和散點圖文字說明相同的方式進行四周擴散，另外還有resort避免文字的重疊。

相關文件：test-h5ComponentPie.html、h5ComponentPie.js、h5ComponentPie.css

3.2.2.6 環圖組件

環圖組件是基於餅圖組件開發的，若是餅圖只有一個數據，而且中間再加一個小圓遮罩就能夠輕鬆地實現環圖，環圖的文字說明放在中間。

相關文件：test-h5ComponentRing.html、h5ComponentRing.js、h5ComponentRing.css

3.2.3 資源整合

3.2.3.1 資源加載

前面實現了各個組件，如今須要把它們都利用起來，test 的測試文件不準加載，其餘的樣式和組件實現須要加載，並且每一個的命名格式很接近，在入口文件中用了簡潔的變量控制加載文件。

3.2.3.2 資源整合

不算test 的測試，在本地只是存入了app的樣式設置和實現，真正的組件數據須要在服務器端，這裏在本地模擬服務端數據，經過ajax加載組件數據，以參數的形式加載頁面和組件。相應地在h5.js中加入參數判斷，分狀況加載組件

3.2.3.3 腳部加載

每一個頁面都有一個相同的腳步，在h5組件中給每一個頁面統一加載腳步。

3.2.4 loading頁

爲了加強用戶體驗，在組員未加載以前的空白頁顯示加載進度。
按照圖片數加載的百分比來顯示進度的加載的百分比，圖片每成功加載一張，便回調進度函數更改進度。


4 測試4.1 代碼校驗 採用jslint來進行語法校驗，能夠靈活地對jshint配置參數進行設置，來實現自制的語法校驗，我經過sublime的插件安裝了jshint，使用起來很方便。4.2 功能測試 帶有瀏覽器控制功能的測試用例還有待實現，經過使用測試，這個app很好的實現了各個圖表的展現效果，是個精緻的組件式開發數據圖表展現app。