組件式開發Web App

     經過組件式開發Web App，熟悉了前端項目開發的整個工做流程以及前端人員在整個項目中所處的位置。同時，也學會了MarkMan標註工具的使用和Photoshop的切圖功能，也增強了利用Chrome調試和解決問題的能力。對整個前端知識也有了新的感覺，也進一步確定了本身對前端開發的興趣所在。

    smiling

    總體思路以下：利用MarkMan標註工具進行設計稿標註。利用Photoshop進行切圖。首先，利用fullPage.js插件實現全屏滾動功能。同時，fadeIn()、出場fadeOut()實現組件切換，利用return  false阻止事件冒泡和事件捕獲。其次，開發基本的圖文組件。接着，開發內容組織類H5對象，實現內容頁面與組件的組織功能，方便任意添加頁面內容和組件（鏈式調用），同時整合fullpage.js支持頁面切換（經過loader函數實現全部頁面的展現。）經過H5對象添加若干個頁面（整合了fullpage.js），以動畫效果切換組件，實現將組件添加到頁面的功能。而後，在基本圖文組件類和內容組織類完成的基礎上開發圖表組件類。利用html/css實現柱圖和散點圖組件。利用canvas實現折線圖和餅圖組件。最後，在全部的組件開發完成以後進行前端頁面的整合工做。同時，利用XAMPP中的Apache，將其佈置在本地服務器上。

源碼：https://github.com/sunshineqt/programtest/tree/master/programtest/webapp

在線預覽：http://sunshineqt.github.io/programtest/programtest/webapp/index.html

1.fullpage.js實現全屏滾動功能和組件入場、出場切換
                 

            

2.基本的圖文組件開發
            

    在基本的圖文組件開發中，首先建立基本的圖文組件對象H5ComponentBase，併爲對象添加ID、類名、文本以及基本樣式的設置。接着，組件進行切入、切出時綁定相應的onLoad()/onLeave()基本事件。

3.內容組織類H5對象

     

       首先，建立H5對象，爲其添加變量，即添加id和div，並將其導入到body體內。定義page變量數組用來存儲添加的每一頁。接着，爲H5對象添加方法。在添加頁addPage()方法中，jQuery動態添加頁對應的div，並將其對應的組件名稱和頁內文本導入頁內。將當前頁導入到h5內，並將當前頁導入到page數組中存儲。在添加組件addComponent()方法中，將傳入的name參數和cfg對象進行初始化。利用數組的slice()方法定位到當前頁，而後根據cfg對象的type屬性，利用基本的圖文組件對象H5ComponentBase建立相應的組件，並將組件導入到當前頁。在H5對象初始化loader()方法中，利用fullpage.js中的onLeave()和afterLoad()回調函數觸發被選組件的onLeave()和onLoad()事件。併爲初始頁進行初始化呈現。最後，返回H5對象。

 

4.圖表組件--散點圖

          

    基於基本圖文組件H5ComponentBase建立散點圖組件對象H5ComponentPoint。利用jQuery爲散點圖組件動態建立div結構，並將cfg對象中的相應文本填充進去。在css中利用border-radius進行div的圓角設計，並利用transtion實現動畫效果。

 

5.圖表組件--柱狀圖

  

     

  

       基本圖文組件H5ComponentBase建立柱狀圖對象H5ComponnetBar。柱狀圖組件能夠看做一個大的div命名爲line；而後裏面包裹三個小的div，分別命名爲name，rate，per，分別表示對應文本名稱，進度條和百分比，且所有左浮動；在進度條中又添加一個div，命名爲bg，用來作進度條從0到rate的動畫演示。

6. 圖表組件--折線圖

           

 

                

 

 

      基於基本的圖文組件對象H5ComponentBase建立折線圖組件對象H5ComponentPolyline。首先，利用canvas繪製底層的網格線，根據cfg對象中的數據在網格下方相應位置顯示文本，並將網格線和文本添加進組件。接着，爲每個數據在相應位置上畫圓表示，從起始點到終點相鄰的點用折線連起來。而後，經過前面繪製數據點的函數draw()，不斷調整其參數，從而實現改變數據點的位置，同時利用setTimeout()函數調用數據點函數draw()控制其從0到1增加和從1到0退場動畫。

 

7.圖表組件-餅圖

           

 

   

 

    基於基本的圖文組件對象H5ComponentBase建立餅圖組件對象H5ComponentPie。加入畫布用於製做網格線背景。以cfg對象寬度的一半做爲半徑畫圓做爲底圖層。初始化餅圖顏色數組，並利用相應的公式計算餅圖開始的角度和結束的角度。根據圓心座標、半徑及起始角度利用arc()便可畫出扇形區域。下一個扇形開始要改變起始角度。

 ps：前端頁面整合時，利用Chrome將h5對象下的全部數據轉化爲json字符串。

ps：資料主要來源於慕課網。同時感謝某某某協助我解決遇到的問題。