[发明专利]web 端UI组件应用框架系统

说明书

技术领域

本发明属于JS开发技术领域，具体涉及一种web端UI组件应用框架系统。

背景技术

在web应用开发中JavaScript是前台UI动态展现的必要编程技术，但是业界却没有一套标准化统一的规范。由于该技术易于入门难于精通，大部分的代码非常混乱，无法复用和产品化。无论功能、组件、或者是验证，另一个项目想要再次使用，仍然需要修改，没有一个标准的版本，开发速度不会随项目积累有明显提高。现有JavaScript技术框架众多，但一般来说同一个项目不会同时采用多种框架，导致不同框架下实现的功能无法复用。

ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax的应用框架。单选行，多选行，高亮显示选中的行，拖拽改变列宽度，按列排序，这些基本功能ExtJS轻量级实现。ExtJS支持自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格进行单独渲染。

ExtJS作为典型的应用框架，它具有以下特点：1、数量很多封装好的组件可以立即使用；2、整体的风格统一，操作方式相似，为使用者提供了方便；3、功能强大的组件，满足使用者较复杂的需求；4、该技术难于入门，但入门后开发速度较快，比较容易快速搭建新的应用；5、完备的设计规范，组件之间的继承与组装关系在使用中可以明显体会到；6、完善的API文档，组件属性、方法事件等均有说明；7、跨浏览器的支持，支持现有主流浏览器。

然而，ExtJS应用框架也存在以下问题：1、ExtJS组件设计复杂，几乎无法编写自行扩展新的组件；2、由于功能众多，压缩后的运行库达到1MB，不压缩的版本达到4MB，如此这般巨大的JavaScript在web应用中是极其少见；3、由于提供了强大的功能，使用起来十分复杂，也导致运行效率低下；4、布局复杂，层层嵌套，无法可视化设计页面，只能凭感觉来建立页面；5、该技术难以入门，难以精通，对开发者门槛较高。

然而JS组件仍然没有理想的WYSIWYG设计器，开发人员只能靠运行结果来了解组件展现样式。本发明因此而来。

发明内容

为了解决以上问题，本发明提供一套统一的结构与对外接口规范，实现自己的前端UI组件应用框架，全部使用HTML技术，AJAX异步请求，可操作性强。

一种web端UI组件应用框架系统，包括页面引擎，其特征在于所述系统包括组件设计器、布局设计器，所述组件设计器根据XML文档的仿真部分展现界面，并列出组件的属性、事件；所述布局设计器用于组件在页面上的布局设计，实现HTML页面的界面仿真和属性配置方式的设置；所述组件采用FACADE PATTERN进行封装后仅提供页面引擎需要的公共方法；所述页面引擎驱动整个页面数据加载过程，并控制组件呈现和默认行为。

优选的，所述组件包括可视组件、非可视组件，每一个组件都有一套完整规范的描述文件来描述组件的构成。

优选的，所述web端组件之间通信以适配器的形式或接口的形式进行通信；组件与服务端通讯通过统一的组件通信引擎交互，同时把代码写在标准XML描述文件中，由组件引擎进行动态编译，通过事件进行调用。

优选的，所述组件通信引擎中数据通讯协议使用的Virtual ProxyPattern封装，实现最晚调用后台交互的动作。

优选的，所述公共方法包括设置参数方法、绘制对象方法、设置值方法和取出值方法。

本发明通过引擎统一将组件绘制在HTML页面上，前后台数据交互，而这一切不需要开发者关心，可以提供前后台验证、表单计算、默认值、异常处理等框架功能，具有分类统一的接口，便于开发者快速入门。

本发明为轻量级JavaScript框架体系，并且做到组件分步加载，随需加载，最大化控制网络流量；标准的组件结构以、简单的实现过程和事件侦听，方便程序开发人员使用。组件可插拔，可组合，前后端完全分离，同时组件间也解耦。而且可以任意控制组件粒度，如封装业务组件及后台实现。以此增加复用率。

与现有技术相比，本发明的有益效果为：将各种技术实现细节和调用的结束细节对用户屏蔽，让用户可以通过统一的方式调用这些后台技术；组件不断积累，缩短应用开发周期，兼容各种现有JavaScript组件，可以减少工作量，支持目前主流浏览器核心Webkit、Trident、Gecko、Kestrel；可以运行在Microsoft IE、Mozilla FireFox、Google Chrome、Opera Brower等主流浏览器之上。

附图说明