基于JavaScript的UI库的设计和实现

摘要

伴随着Web2.0的发展，以及Ajax的普及应用，尤其HTML5、CSS3的兴起，使JavaScript这门与众不同的语言，让越来越多的用户体验到Web动态交互的无穷魅力，但是大量的开发人员并没有真正了解过JavaScript的语言内涵，而只是生搬硬套，从而影响软件整体的性能和开发速度。

基于JavaScript的UI库——Qui，针对用户界面设计了一些常用的底层方法和UI模块，在结合现有的JavaScript框架的基础上，采用工厂和原型组合的设计模式，开发出更小巧、更快速、更简单的Qui库。底层方法大致包括：CSS Selector、Event事件、Browser检测及其他底层方法等；在此基础上开发的User Interface模块，主要包括：交互(Interaction)、部件(Widgets)、动画(Animation)等。利用简单的实现原理，让大家能更快速的了解JavaScript，进而实现代码的重复利用。

本系统实现了用户界面中最常用的模块，同时拥有着丰富的代码注释及原理说明，让开发者能轻而易举的从Qui库中选取和修改相应的模块，从而实现自己个性化的代码。此外在Qui库的基础上，开发了相关的示例页面，供开发人员下载和参考，让越来越多的人了解JavaScript，参与共享和交流。

【关键词】JavaScript 用户界面交互部件动画

ABSTRACT

Accompanied by the development of Web2.0 and Ajax popularity of applications, especially to HTML5、CSS3, the rising of JavaScript distinctive language, so that more and more users to experience the endless charm of the dynamic interaction, but a lot of Technical staffs don’t truly understand the JavaScript language connotation, but only mechanically, thus affecting the whole development and performance of the software.

The JavaScript UI library - Qui, designed for the user interface of the underlying methods and UI module, combined with existing JavaScript framework based on the use of the factory and prototype combination meter model, develop a smaller, faster easier Qui library. The underlying method generally includes: CSS Selector Event Object, the Browser Tests and other low-level methods; on this basis to develop the User Interface module, including: Interaction, Widgets, Animation and others. To use one simple principle, so that we can more quickly understand JavaScript, in order to achieve code reuse.

The system most commonly used modules in the user interface display, has a code comments and the principle of description, so that developers can easily from Qui library, select and modify the corresponding module in order to achieve their own personalized code. In addition, the Qui library on the basis of, the development of the sample page for developers to download and reference, so that more and more people understand JavaScript and participate in the sharing and exchange.

【Key words】JavaScript User Interface Interaction Widgets Animation

目录

第一章绪论 (1)

第一节项目背景 (1)

第二节项目研究目的及意义 (1)

第三节项目介绍 (2)

第四节开发调试工具 (2)

一、D reamweaver CS5 (2)

二、Z end Studio 9.0 (3)

三、F irebug (3)

四、F iddler (4)

五、各种浏览器 (4)

第五节本章小结 (5)

第二章系统分析 (6)

第一节需求分析 (6)

第二节系统功能点分析 (6)

一、C SS Selector (7)

二、E vent对象 (7)

三、其他 (8)

四、交互 (8)

五、部件 (8)

六、动画 (8)

第三节结构分析 (9)

第四节调用流程分析 (11)

第五节本章小结 (12)

第三章系统设计 (13)

第一节系统设计目的 (13)

第二节系统设计原则 (13)

第三节系统设计步骤 (14)

第四节系统设计重难点 (14)

一、统一入口 (14)

二、C SS查询器 (14)

三、D om继承 (15)