基于组件的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。