郑州app开发-appcan中UI2.0与UI1.0的对比

2012年初，我们发布了AppCan移动应用开发平台，在这个版本中，我们内置了基于JQMobile方案的CSS UI框架。这个框架可以帮助开发者遵循一套规则下，快速的开发应用。这套方案中主要采用了组合的概念。例如对一个按钮的描述，可以通过多个CSS类来组合进行定义。这样通过不同的组合可以生成多变的效果。在实际商用应用开发过程中，他极大的帮助我们加快了开发进度。但是在开发过程中，我们还是遇到了一些问题，JQMobile CSS框架在这些问题上，比较乏力。

1. 自动填充宽度

上图中同样一个编辑框加上一个刷新按钮的组合。在不同分辨率下，如果希望，刷新按钮保持一个基本宽度，编辑框自动填充剩余区域，在不使用JS的情况下是很难做到的，如果使用百分比控制刷新钮的宽度，那么在低分辨率和高分辨率之间将会有非常大的偏差。

2. 类名称过长

JQMobile方案中，为了帮助开发者能够更直观的了解代码，每一个功能类的名称都比较长。例如ui-page ui-mobile-viewport等。但这造成了网页代码大小变大，降低了解析速度。

3. 类功能拆分度低

在JQMobile方案中，很多类定义，代码重复较多，例如预制的多种色彩方案。同时由于拆分度低，经常需要重复定义类来覆盖其他类中的属性。

4. 控件组合复杂

JQMobile方案中，控件的实现代码量很大，一个按钮需要多个div span嵌套配合多个类才能实现。这造成开发中，界面代码量增大，不好控制界面。

我们综合各个项目中的开发经验，整理汇总了AppCan UI2.0架构，它在继承了UI1.0的优点之上，极大地解决了UI1.0的问题，可以使开发能够更加的简单。UI2.0框架图如下

上图中，我们可以看到AppCan UI2.0框架在基础的屏幕适配(RESOLUTION ADAPTER CLASS)基础上，对元素基本属性进行了拆分。通过如下步骤来设定一个元素。

l 定位-对元素进行布局，确定元素的现实位置大小等[LAYOUT CLASS]

l 描边-对元素基础属性进行设定，例如边框圆角等[BASE CLASS]

l 添色-对元素的边框、文字和背景进行设定[COLOR CLASS]

l 插图-如果元素中需要图片，从资源中引入图片类[RES CLASS]

基于基础元素之上，为了方便开发者，我们重新定义了控件，包含BUTTON、LIST、FOLD、INPUT、TAB、RADIO、CHECK、SWITCH。这些控件可以认为是UI2.0框架的具体事例。通过UI2.0完成的控件，代码大小和复杂度，有极大的降低，如下例。

UI1.0框架实现的按键

UI2.0框架实现的按钮

从上述代码中可以看到，同样功能和效果的控件可以减少三分之二的代码，嵌套减少到一层，代码复杂度极大降低。

接着我们详细介绍如何使用UI2.0框架。