1、Error! No text of specified style in document.摘要在目前前端开发中，由于前、后端职责不清，开发效率问题，对前端发挥的局限，现有开发模式的适用场景等一系列问题。因此，前、后端的分离已经成为一种趋势，越来越多的前端开发不仅仅是简单的页面切割和静态 Demo，而且需要丰富的用户体验及数据交互。VX 是北京科蓝公司推出的动态 Web App 框架，通过 HTML 作为模板语言并扩展 HTML 语法，使得应用组件开发保持清晰和一致。通过独创的客户端“数据绑定”和“依赖注入” ，大大减少 JS 代码量。VX 采用纯 JavaScript 开发，在浏览器中运行，
2、实现与现有的服务端结构整合。本文基于 VX 框架，以前、后端分离的方式，对银行的个人业务进行设计实现。实现了较好的用户体验以及用户界面，测试表明本文介绍的系统的数据流通以及服务访问速度得到极大的提升，所占用的宽带也是较之前的系统有明显的降低。关键字：依赖注入 指令 过滤器 服务 VX 框架银行系统个人业务的实现 2ABSTRACTIn the current front-end development, due to the front and rear responsibilities are not clear, the development of efficiency issues,
3、the limitations of the front end, the existing development model of the application of a series of problems. Therefore, the separation of the front and rear ends has become a trend, more and more front-end development is not just a simple page cutting and static Demo. And the need to enrich the user
4、 experience and data interaction. VX is the Beijing branch blue company launched the dynamic App Web framework, which is used as the template language and extended HTML syntax, which makes the development of the application component to maintain a high degree of clarity and consistency. Through the
5、original client “data binding“ and “dependency injection“, greatly reduce the amount of JS code. VX using pure JavaScript development, running in the browser, to achieve integration with the existing server structure. In this paper, based on the VX framework, the former back end of the separation of
6、 the way, to open the banks personal business design and implementation. To achieve a better user experience and user interface. The test results show that this paper simply introduces the system data flow and service access speed has been greatly improved, occupied by the broadband is also compared
7、 to the previous system has significantly reduced.Keyword: dependency injection directive filters service VX framework目录 i目录第一章 绪 论 .11.1 项目背景 .11.2 主要任务 .21.3 本文研究内容 .2第二章 相关技术与工具 .52.1 开发工具介绍 .52.2 开发所使用的 VX 框架 .52.2.1 VX 框架概述 .52.2.2 VX 背景 .72.2.3 核心理念 .72.3 开发使用的服务简绍 .82.4 小结 .8第三章 需求分析 .93.1 银行
8、的个人业务的需求分析 .93.2 银行的个人业务总体设计 .113.3 本章小结 .13第四章 VX 框架介绍 .154.1 辅助类库 .154.2 CSS 样式 .153.2.1 ui-calendar.css .153.2.2 ui-mune.css .163.2.3 ui-progress.css .163.2.4 common.css .173.2.5 public.css .174.3 JQUERY 库 .173.3.1 jquery.select.js .17银行系统个人业务的实现 ii3.3.2 jquery.min.js .184.4 自定义模块 .184.5 JSON 数据模
9、仿数据库 .194.6 本章小结 .20第五章 整体的页面 DEMO 和具体布局实现 .215.1 通用页面布局 .215.2 生活服务模块的具体实现 .235.3 本章小节 .27第六章 结论 .296.1 服务测试 .296.2 页面 DEMO 数据流通测试 .306.3 测试总结 .32第七章 不足及展望 .33致谢 .35参考文献 .37Error! No text of specified style in document. 1第一章 绪 论1.1 项目背景随着互联网深入发展，应用领域不断拓宽，对于银行领域产生深远的影响，不管是网上银行、手机银行，还是商城、支付，都正在经历 Web
10、2.0/Web3.0 的快速转变。由于 Web2.0 对用户界面、用户体验提出了很高的要求，传统的 BS 结构在新的形势下，需要在客户端进行快速提升，才能满足用户的需要，并逐步提高用户使用的便携性、方便性、易用性等。从技术角度，RIA 架构已经提出几年，但目前在银行界刚刚尝试， HTML5 标准大大提升了浏览器的能力，也逐步成为浏览器的事实标准。而移动终端（智能手机、平板电脑）的迅速普及，极大促进了用户体验（user experience，UE）用户界面（user interface，UI）的发展，基于用户为中心的设计（ User Centered Design，UCD）也将成为未来客户端的发
11、展主流。科蓝公司为了更好适应 Web2.0 新技术，满足 UI/UE 发展的需要，根据对不同技术和方向的综合研究，制定了客户端的发展规划，逐步形成了 VX 的客户端体系。本文研究的银行系统个人业务模块也是基于此框架之下。之前已经存在的银行系统，由于开发框架的限制，在实际应用中已经出现了相应的问题：问题 1：一旦系统需求分析发生变化(此时往往已经到了开发过程的中后期)或者系统需要扩展业务，原有系统的框架不能很好地解决这一问题。原有系统采用单一的Struts 开发框架，这种方式缺少有效的模块集成手段，基于不同平台的模块很难集成，系统的可扩展性和伸缩性比较差。问题 2：用户反映该系统的用户界面不够简
12、洁，使用流程比较复杂。显然，最根本的解决办法是改变系统开发框架。现在我们所使用的 VX 框架 1可以很好地解决这一问题，VX 可以开发“单页 App”或“多页”App，但 VX 特别适合“单页”App也就是“富客户端” （ Rich Internet Applications，RIA ） ；“单页”App 相比“多页”App 有着显著的优势，比如：应用资源一次性加载，避免大量的带宽消耗；App“ 碎片 ”（包括 HTML 和 JS）的动态装载和可配置化的缓存；3 “碎片”间可方便进行数据交换，避免使用服务端 Session；4极大提升了 Web 2 银行系统个人业务的实现App 的交互性设计的
13、技术基础。1.2 主要任务在 1.1 的背景之下本项目研究的主要任务如下：使用 VX 框架建立一个不同于以往所使用其他框架的银行系统，形成一个由于满足对 Web2.0 所要求用户页面，用户体验的客户端，使得传统的 BS 结构在新的形势下，得到了极大的提升，以便于满足用户的需要，并且极大的提高，使用的方便性以及易用性。以对及银行系统的快速开发、可维护和扩展能力提供有效的支持。本项目使用 VX 大大简化 Web App 的开发。提供了一套高级别的“抽象”模型，整合现有的 Web App 开发单元，将自动处理这些开发任务： DOM 操作，Listener 和Notifier 的注册和初始化，输入校验
14、 ；解决很多繁琐的开发单元任务，使得开发者能集中精力在业务处理逻辑，避免大量底层、重复性、易出错的编码工作；同时为客户端开发引入一些“ 高级” 的技术： 数据、逻辑和展示的分离 ，数据和展示之间的数据绑定，服务（可复用的 Web App 操作组件） ，依赖性注入（主要解决服务间的依赖关系）以及可高度扩展的 HTML 编译器（纯 JavaScript） 。 1.3 本文研究内容本文主要负责银行系统个人业务的设计和实现的工作，重点探讨了本系统在实现过程中使用的一些辅助的类库以及整个 VX 框架下的数据层，逻辑层以及表现层的设计。本文分为六章来具体说明：本章节主要介绍了项目提出的背景以及项目的研究目
15、标。第二章节主要说明了本系统所使用的相关知识，以及我们所使用的 VX 框架，和开发使用的服务。还有我们开发使用的工具。第三章主要说明银行系统个人业务的需求分析以及在不同的客户具体的功能需求，并且详细分析了系统的服务模块划分和总体 Demo 设计。第四章主要介绍的是再实现本系统是要用的辅助类库。包括配置文件config.js，CSS 库，jQuery 库，Font 库，自定义模块， JSON 数据格式模仿数据库，在Error! No text of specified style in document. 3本章介绍的所有类库都是现在开发 Web App 中流行的类库。第五章具体的介绍整个页面的
16、布局以及，业务逻辑和数据。这一章的重点是介绍基于 VX 框架下的银行系统的服务模块划分，以及总体的设计，以生活服务模块中的上海自助缴费为摸版，介绍整个的业务逻辑，以及整个的系统流程。在本章之后读者可以好好地理解 VX 框架下的银行业务设计，能够深刻理解富客户端的设计和实现。第六章测试本系统的数据流，和服务。保证整个系统的可用性。第七章在最后总结了全文和简单的叙述了现版本的 VX 的不足和改进以及未来银行系统开发的主要应用方向4 银行系统个人业务的实现Error! No text of specified style in document. 5第二章 相关技术与工具在当今的前端开发趋势下前后端
17、的分离开发是必然的，在这个理念的指导下，我们公司了更好适应 Web2.0 新技术，满足 UI/UE 发展的需要，根据对不同技术和方向的综合研究，制定了客户端的发展规划，参照当今相对来说最流行的 Angular JS2框架，完善和增加了一系列的功能形成我们在当今业务中使用的 VX 框架，使用 VX 框架可以很好的处理当且前端开发中难以处理的业务逻辑以及数据流通的困境。除了主要的核心 VX 框架外，还用到 HTML 标记语言及基本语法，需要了解HTML4、xhtml、HTML5 相关知识，了解 CSS 语法和相关原理，了解 CSS2 和 CSS3区别，熟悉掌握 JavaScript，了解 FP（函
18、数式编程）的原理、闭包、高价函数，熟悉AJAX 和 Web2.0 的编程以及 jQuery 编程及 jQuery 的主要 API。2.1 开发工具介绍现今 Web 前端开发中可以使用的开发环境有很多，包括Eclipse，MyEclipse，Webstorm ，等等一系列的开法工具但是这些开发环境大部分都有同一个缺点，就是过于庞大，导致开发过程不是很便捷，虽说功能全面但是带来的代价就是调试不方便，由于本次任务做的是前后端分离的前端开发，所以我们为了开发方便，以及调试和编程的便捷，我们使用的是 Aptana 开发环境。Aptana 是一个非常强大,开源,JavaScript-focused 的 A
19、JAX 开发 IDE。它支持 HTML/JavaScript/CSS 编辑器，prototype/dojo 等常见 AJAX 类库集成和提示，JSON 编辑器，JavaScript 调试器。还有代码语法错误提示。支持 Aptana UI 自定义和扩展，支持流行 AJAX 框架的 Code Assist 功能：AFLAX，Dojo ，jQuery，MochiKit，Prototype。他不光只有这些功能还有其他的一些很好用的比如对 Apple iPhone 开发环境，PHP 开发环境等等但是由于我们这里没有用到,所以就不在一一赘述。2.2 开发所使用的 VX 框架2.2.1 VX 框架概述VX
20、是开发动态 Web App 的结构性框架，通过 HTML 作为模板语言并扩展 HTML语法，使得应用组件开发保持高度的清晰和一致。通过独创的客户端“数据绑定” 和“依6 银行系统个人业务的实现赖注入”，大大减少 JS 代码量。VX 采用纯 JavaScript 开发，在浏览器中运行，非常容易与现有的服务端结构整合，是 WEB 项目开发的好帮手。HTML 是一种声明式的标记语言，特别适合描述静态文档结构，而 VX 弥补了HTML 在动态应用开发中的不足。通过扩展 HTML 的静态语法，使得 HTML 成为Web App 开发中最简洁、合适的方式。在 VX 之间，通常为了解决静态文档和动态程序的失
21、配，我们会采用：一程序库：一组 Web App 开发的工具函数，应用根据需要进行调用，比如jQuery。 二应用框架：为某类特定的应用而形成的模板类结构，应用需要满足框架的API 要求，比如 backbone、sproutcore 等。 VX 采用一种全新的方式，降低了静态 HTML 和动态 Web App 的“阻抗” ，通过HTML“指令” 扩展浏览器支持的语法，提升浏览器的处理能力，比如：一通过提供文本数据绑定 二提供 DOM 结构的循环/隐藏处理 三提供 form 处理和数据校验 四在 DOM 后隐藏代码 五将 HTML 结构形成重用组件 VX 提供一个 Web App 开发的“端到端”
22、解决方案，它提供了应用的整体结构，并便于扩展，特别适用于大多数的“业务处理” 类应用， VX 提供：一通过依赖注入，提供一套可高度扩展的组件化和模块化架构。 二提供完整的 MVC 结构，包括模板指令、数据绑定、Scope 等。 三VX 内部提供一系列成熟的基础服务，比如表达式、过滤器。 四VX 内部提供一系列 HTML 指令，比如 form 处理、事件处理、循环结构处理、条件结构处理、viewport 等。 五通过 viewport 提供 HTML 碎片和 JavaScript3动态加载方式，为 RIA 的应用结构打下坚实的基础。当然，VX 并不是适用于所有的 Web App 开发，对于某些需要大量操作 DOM 结构和页面高度交互和动画的应用，比如游戏，可能 VX 并不能提供一套完整的解决方案（VX 的最佳实践表明，在 Controller 中不宜进行 DOM 操作，DOM 操作应交给HTML 指令进行） 。
