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

编 号： 审定成绩： 毕业设计（论文）设计（论文）题目： 基于JavaScript的UI库的设计和实现 学 院 名 称 ：学 生 姓 名 ：专 业 ：班 级 ：学 号 ：指 导 教 师 ：答辩组 负责人 ：填表时间： 2012 年 05 月重庆邮电大学教务处重庆邮电大学本科毕业设计（论文）摘 要伴随着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 用户界面 交互 部件 动画ABSTRACTAccompanied 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 dont 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一、Dreamweaver CS52二、Zend Studio 9.03三、Firebug3四、Fiddler4五、各种浏览器4第五节本章小结5第二章系统分析6第一节需求分析6第二节系统功能点分析6一、CSS Selector7二、Event对象7三、其他8四、交互8五、部件8六、动画8第三节结构分析9第四节调用流程分析11第五节本章小结12第三章系统设计13第一节系统设计目的13第二节系统设计原则13第三节系统设计步骤14第四节系统设计重难点14一、统一入口14二、CSS查询器14三、Dom继承15第五节本章小结15第四章开发实现16第一节实现原理16第二节代码设计16第三节编码规范17第四节单元测试18第五节本章小结19第五章系统实施与运营维护21第一节概述21第二节系统测试21一、功能性测试21二、兼容性测试28三、性能测试32四、安全测试33第三节系统运营33第四节系统维护35第五节本章小结35结 论36致 谢37参考文献38附 录39一、英文原文39二、英文翻译4447第一章 绪论第一节 项目背景随着web2.0的发展，以及Ajax的普及应用，客户端的用户界面的展示越来越重要。尤其是HTML5、CSS3的兴起，让JavaScript越来越流行，也让越来越多的用户体验到了Web2.0的无穷魅力，但是大量的技术人员并没有认真了解过JavaScript的语言精髓，而直接使用相关的框架，因此一方面导致当程序出现问题时，无从下手调试；另一方面，用户对UI的要求越来越高，简单的JavaScript的应用已经满足不了原先的用户，而开发富Web应用对浏览器兼容性、Dom操作要求比较高，因此需要框架的帮助。此时，随着Prototype、jQuery的兴起，也给我们提供了一个很好的架构平台，但是这些库都太过于庞大，并且它们的实现原理都相对复杂，难以理解。在使用过程中，我们只会用到其中的一部分，但同时要加载整个库，从而影响UI性能，同时当代码出错时难以调试、运行。作为一名前端爱好的人，我想创建一个这样的JavaScript库更小巧、更简单、更富于变化，在分享学习过程的同时，用最简单的语言、最易理解的方式，把JavaScript这门语言分享给大家，让大家了解JavaScript的灵活多变，了解JavaScript的魅力。第二节 项目研究目的及意义为了能让开发出来的Web UI效果更简单、更容易、更高效，想搭建这样的一个基于JavaScript的UI库Qui，针对用户界面设计了一些常用的底层方法和UI模块，在结合现有JavaScript框架的基础上，开发更小巧、更快速、更简单的UI库，从而为富Web开发做铺垫。其中底层方法大致包括：CSS Selector、Event事件、Browser检测及其他底层方法等；在此基础上开发User Interface模块，主要包括：交互(Interaction)、部件(Widgets)、动画(Animation)等。利用简单的实现原理，让大家能更快速的了解JavaScript，从而实现代码的重复利用。第三节 项目介绍基于JavaScript的UI库Qui，主要包含在Qui.js文件中，它主要包含了交互（Interaction）、部件（widgets）、动画（animation）三个部分。其中交互指的是在界面中用户可以操作，并且具有响应和反馈的动作，主要含有：draggable (拖拽)、resizable(调整大小)、sortable(排序)、selectable(选择)等；部件指的是小组件，即已经开发完成或者处于中间品的一些效果，比如：进度条（progressbar）、对话框（dialog）、登录框（login）、日历（calendar）、选项卡（tabs）、轮播图（switchImg）等；动画指的是简单的移动效果，像hide（动态隐藏）、show（动态显示）、toggle（动态切换）、addClass（添加样式）、removeClass（移除样式）、toggleClass（切换样式）等。而Qui.js中实现的各个部分，并不是完全独立的，它需要一些共同的底层方法的支持，这些底层方法就成为Qcore.js，核心的底层方法包括：CSS选择器、浏览器检测、Event对象、以及each、css等方法。底层方法的建立，一要具有普遍性，简单实用；另一方面要兼容浏览器IE6+、Firefox3+、Opera9+、Safari3+和chrome等，从而确保主体的兼容性。第四节 开发调试工具一、 Dreamweaver CS5Dreamweaver CS5是Adobe公司开发的一款代码编辑工具，包括网页制作和网站管理。Dreamweaver是首个专业针对网页开发的工具，它可以轻松地制作出各种网页，并且能够跨平台、跨浏览器。由于与Adobe发布的新的 ABL 集成，所以其能够以可视方式进行网页设计，并使用相应的管理系统开发页面，同时能够实现浏览器的兼容性测试。作为最受欢迎的 CMS 框架，借助于更新和基于CSS的页面，从而创建标准的网页。为了确保跨浏览器兼容性，在多个浏览器和操作系统上的 Adobe Browser Lab 中测试页面，以单独、平铺或层叠方式比较浏览器视图，查看是否实现精确到像素的匹配，无需读取代码就能以可视方式检查 CSS，将任何 FLV 文件直接导入 Dreamweaver 并快速集成你选择的播放器外观，只需设置屏幕大小、自动开始和循环等选项即可，随时可将视频发布到 Web1。JavaScript可以用任何编辑器编写，只要你有浏览器就可以运行，随着Node.js的发展，不需要浏览器也可以运行。Dreamweaver CS5可以智能提示JavaScript的语法错误，能够提高JavaScript开发速度，不过刚开始学习JS时不建议使用。二、 Zend Studio 9.0Zend Studio是Zend Technologies开发的一款PHP语言集成的开发环境，简称IDE（Integrated Development Environment）。Zend Studio开发环境也能开发HTML页面和js脚本，但只对PHP语言提供调试功能。Zend Studio5.5系列后，官方推出了基于Eclipse平台的Zend Studio for Eclipse 6.0，之后的版本也都构建于Eclipse。Zend Studio是一款屡获大奖的专业的PHP集成开发环境，具备功能强大的专业编辑工具和调试工具，支持PHP语法加亮显示，支持语法自动填充功能，支持书签功能，支持语法自动缩排和代码复制功能，内置一个强大的PHP代码调试工具，支持本地和远程两种调试模式，支持多种高级调试功能2。其特点如下：1. 快速开发迭代及配置本地或远程环境；2. 数据库SQL工具及团队协作；3. 完全的PHP 4/PHP 5的支持；4. 很多的sample database应用程序与Zend组合。Zend Studio具有项目管理器、编码编辑器、绘图调试器、完全的PHP5支持、编码组合功能、编码分析器、语法检索。超强智能编码指的是具备新的、优秀的分析和优化工具，如PHP编码检测器。同时它开发团队版本更新快，插件多，PHP开发的首选，同样建议刚开始学PHP时，不使用Zend Studio。三、 FirebugFirebug是Mozilla Firefox下的一款插件，能够调试大部分网站前端开发语言，如html、css等，但是Firebug最强大的还是其JavaScript的调试功能，高效实用，而且在能够兼容各个浏览器（如IE、Firefox、Opera、Safari等）。当然，其他功能也还很强大，比如html、css、dom的查看、修改、调试与整体分析等。总体而言，Firebug是一款优秀的Web开发工具，并且其是开源的。其中控制台，能够显示出当前页面中所有的JavaScript错误以及警告，并提示js出错的文件和行号，这些错误提示比起浏览器本身提供的错误提示更加详细且具有参考价值，因此方便调试；查看和修改HTML的功能，如果你用过Firebug的HTML代码查看器，就会觉得它的强大和与众不同。同时，Firebug占用内存空间不大，并且能够单步调试、设置断点、变量查看窗口等，如果你的网站已经建成，但是它的前台页面展示在性能上有问题，可以通过面板上的Profile来统计脚本运行的时间，查看到底是哪些语句执行时间过长，进而解决问题3。四、 FiddlerFiddler是由微软开发的一款web调试代理工具，它能够记录所有client和service间的HTTP请求，允许你监视和设置断点，以及篡改输入输的出数据。Fiddler支持断点调试概念，用户可以加入一个插件对象，来使用.net下的任何语言来编写Fiddler扩展，通过显示所有的HTTP通讯，Fiddler可以轻松的演示哪些用来生成一个页面，通过统计页面，用户可以很轻松的使用多选，来得到一个Web页面的“总重量”，还可以轻松得到你请求的某个页面，总共请求了多少次，以及多少字节被转化了，另外，通过暴露HTTP头，用户可以看见哪些页面被允许在客户端或者是代理端进行缓存，如果要是一个响应没有包含Cache-Control 头，那么他就不会被缓存在客户端4。五、 各种浏览器浏览器的使用主要包括：IE6+、Firefox3+、Opera9+、Safari3+和Chrome等几大浏览器。 微软IE，基于Trident内核，对web站点具有强大的兼容性。最新的Internet Explorer 10包括HTML5、CSS3以及大量的安全更新。 Mozilla Firefox（火狐浏览器）是市场主流的浏览器之一，仅次于IE和Chrome。最新的Firefox 9 新增了类型推断功能，再次大幅提高了JavaScript引擎的渲染速度，使得富含游戏、图片、视频和3D图片的网站或网络应用能更快的加载及运行。 Opera是另一款主流的网页浏览器，其浏览速度堪称为世界最快，最新的版本号是11。 Safari是Apple的操作系统Mac OS X默认的浏览器，其使用了KHTML作为浏览器的运算核心。2003年1月7日首度发行测试，成为Mac OS X v10.3之后的默认浏览器。Windows版本在2007年6月11日推出，支持Windows XP与Vista，在2008年3月18日推出正式版。 Google Chrome，也称Google浏览器，是另一款由Google开发的、开源的主流浏览器。该浏览器是基于其他开源软件所撰写，包括WebKit和Mozilla，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面，软件的名称是来自于称作Chrome的网路浏览器图形使用者界面（GUI），软件的beta测试版本在2008年9月2日发布，提供43种语言版本，有支持Windows平台、Mac OS X和Linux版本提供下载5。第五节 本章小结本章主要对论文选题的项目背景、课题研究目的与意义进行了阐述，在“基于JavaScript的UI库”的基础上进行分析研究，对常用的开发调试工具进行介绍，并对系统整体和各大功能点进行了说明。第二章 系统分析第一节 需求分析前端开发最近几年在国内兴起，并没有一个明确的定义，但是前端技术包括JavaScript、Action Script、CSS、XHTML等“传统”技术与Adobe AIR、Google Gears，以及概念性较强的交互式设计，艺术性较强的视觉设计等等，根据该词可以做这样的理解，用互联网来做比喻，凡是通过浏览器到用户端计算机的统称为前端技术.相反存贮于服务器端的统称为后端技术。国外的前端发展已经相当成熟，而国内的前端发展还相对滞后，集中在大公司，同时由于公司之间的不开放、不交流，以及行业内缺少一种分享的氛围，所以限制了前端的发展，也限制了用户去感受更优秀的网站和系统。为一名前端爱好的人，我想创建一个这样的UI库，在记录我学习历程的同时，用最简单的语言、最易理解的方式，把优秀JavaScript语言分享给大家，让大家了解JavaScript的灵活多变，了解JavaScript的魅力。在Web开发中，使用JavaScript绝大部分时间是进行以下两个方面的事情，一是获取Dom元素；二是对Dom元素进行操作，因此从实用性的角度来讲，库的开发应该围绕这两点去进行。Qui是一个基于JavaScript的前端ui库，仅仅是利用JavaScript的一部分，来实现一些常用的界面功能，其中包括对底层不兼容的JavaScript以及其部分函数的封装，形成底层的Qui核心库Qcore.js(主要为CSS查询、DOM、EVENT等，还包括浏览器检测、类型检测等)，在保持JavaScript灵活多变的同时，实现重复使用；然后在Qcore.js的基础上，开发具有交互性、灵活性和普遍性的用户界面效果Qui.js。第二节 系统功能点分析基于JavaScript的UI库Qui，整体涵盖两部分，一部分是底层支持方法Qcore.js，另一部分是UI模块Qui.js。Qcore.js主要包含：CSS Selector、Event对象、Browser检测及其他底层方法等；在此基础上开发User Interface模块，主要包括：交互(Interaction)、部件(Widgets)、动画(Animation)等。整体结构如下：图2.1Qui库的各个功能点一、 CSS SelectorCSS查询器，即是Dom元素的获取，是进行Dom操作前很重要的一步，同时也是最为复杂的一步。一个好的CSS查询器要支持CSS13，同时保证查询的速度和性能都比较高。具体地说，以$q代表CSS查询器，要能够实现$q(obj)，其中obj可以是Dom对象、字符串等。字符串的实现要类似于CSS的写法，支持”#div”、”.div”、”div p”、”.num : first-child”等。然后CSS查询器将查询到的结果要返回到一个伪数组中，从而实现对Dom的操作。二、 Event对象Dom操作中，对事件的监听操作是经常进行的操作，而事件的监听在各个浏览器中的实现方法存在差异，因此可以将事件监听封装成一个对象，从而方便调用和操作。Event对象应该大致包括：getEvent、getTarget、preventDefault、stopPropagation、addHandle、removeHandle等方法，在实现跨浏览器的基础上，简化事件操作的开发过程，同时该对象具有丰富的文档注释，能让开发者了解到兼容不同的浏览器所需要的各种技巧，从而加深对JavaScript的理解。三、 其他除了提到的查询和Event对象，Qui的实现还需要其他方法的支持，其中包括Browser检测、type类型判断、each遍历、css样式取值或设值等。其中浏览器检测返回的结果除了浏览器型号外，还包括版本；css样式的取值或设值，需要兼容不同浏览器实现取值或设值。四、 交互UI模块的交互模块，主要包括：draggable (拖拽)、resizable(调整大小)、sortable(排序)等。其中拖拽是指一个Dom对象可以在界面中用鼠标进行拖动；调整大小是针对那些需要其大小不固定的Dom元素，可以用鼠标进行放大或缩小；排序是针对连续几个Dom元素，可以通过鼠标对其排序。交互模块的实现需要底层的支持，尤其事件的监听、鼠标事件类型的判定等，然后实现交互功能。五、 部件部件指的是小组件，即已经开发完成或者处于中间品的一些效果，比如：进度条（progressbar）、对话框（dialog）、登录框（login）、日历（calendar）、选项卡（tabs）、轮播图（switchImg）等。进度条是给定一个特定的时间值，在这个时间内进度达到100%；对话框，是在JavaScript的alert、confirm、prompt的基础上，开发的一个方法；登录框，是在当前页面中弹出一个登录界面，并将用户输入的数据返回给调用者；选项卡是可以实现不同项（item）之间的切换；轮播图是实现元素（以图片为主）之间的切换。六、 动画动画指的是简单的移动效果，由于动画的实现比较复杂，而且每个人的创意不同，所以只提供简单的底层效果，可以复合在一起实现复杂动画。主要包括hide（动态隐藏）、show（动态显示）、toggle（动态切换）、addClass（添加样式）、removeClass（移除样式）、toggleClass（切换样式）等。以上六种方法，都是将Dom对象进行动态地隐藏、显示、样式改变等效果，通过指定其速度speed的值为毫秒，或者特定的字符串，从而控制动画的速度。第三节 结构分析从功能点分析可以梳理出Qui库的结构主要如下：一、 Qui整体结构Qui库大致可以分为六个部分，底层的CSS查询器、Event对象、Support，和UI交互模块Interaction、Widgets、Animation。结构如下：图2.2 Qui库的组成二、 CSS查询器CSS查询器是一个基于sizzlejs引擎的，用JavaScript实现的Dom查询引擎，支持CSS13，并且具有较高的性能。图2.3 CSS查询器的特点三、 Event对象Event对象是底层方法的封装，具有较好的兼容性，能够跨浏览器实现事件的获取、目标的获取以及事件的绑定和其他操作。图2.4 Event对象的组成四、 Support对象Support对象是一些常用的底层方法的汇总，在Qui库中并没有Support对象，它是这些方法的总称。图2.5 Support对象的构成五、 Interaction交互模块（Interaction）是UI实现中常用的几个部分，包括拖拽、排序、可该表大小等等。图2.6 Interaction模块的组成六、 Widgets部件模块（Widgets）是UI实现中各个小的功能点，包括常见的进度条、日历、轮播图、登录框、选项卡、对话框等。图2.7 Widgets模块的组成七、 Animation动画模块（Animation）是UI中最吸引人的一部分，而动画的构成基本包含动态隐藏和显示、样式动态地添加和移除，以及他们之间的动态切换。图2.8 Animation模块的组成第四节 调用流程分析在Qui库中，应该有统一的入口，类似于JQuery的$和jQuery，通过这样的入口可以调用Qui方法，从而实现系统整体的完整性。当传入字符串时，进行字符串判断和处理，然后使用CSS引擎的Selector方法查询到相应的Dom元素，将结果存放在Qui对象中Qui对象是一个伪数组，然后进行相应的Dom操作即可；另外，入口也可以接受Dom元素本身，通过Qui入口$q()将其转化为Qui对象，从而使传入的该对象也可以调用Qui的方法。图2.9 Qui库的调用流程第五节 本章小结本章主要针对系统开发前分析阶段的工作内容进行说明。系统分析包括需求分析、系统功能点分析、结构分析、调用流程分析四个部分。在需求分析中，主要说明基于JavaScript的UI库，对功能的需求情况；在系统功能点分析中，主要说明如何对系统功能模块进行划分，并对各功能模块的具体功能进行需求分析；在结构分析中，主要阐述了各个功能点主要包含哪些方法；在调用流程分析中，确定Qui库的入口以及如何使用Qui库。第三章 系统设计 第一节 系统设计目的基于JavaScript的UI库Qui的开发是以记录前端历程，分享交流为前提，着力为解决JavaScript开发慢、调试难、理解不深入等问题，开发更小巧、更快速、更简单的UI库，方便大家调用，从而实现个性化的开发。因此，系统设计的目标如下： 解决大部分跨浏览器兼容性问题； 实现Dom的查询及优化；Web开发中常用的底层方法的封装； 常用的UI效果的实现。第二节 系统设计原则 成熟性：采用常见的、常用的技巧去构建Qui库的方法，让开发的系统能够容易被理解、调试，并充分发挥当前计算机和网络环境的功能和性能。 安全性：Qui库必须保证使用的安全性，前端的使用本身就是透明的，所以如果一个库有bug，会导致一个系统的安全，所以要采取有效的技术措施和手段，如输入过滤、信息加密等，保障系统运行的稳定性，确保库的安全性和一致性。 易用性：对前端开发人员来说，Qui库的调用应当简单易懂，同时实现原理易于理解，这次在调试及修改过程中就会如鱼得水。因此设计的系统时应当重视开发人员的使用习惯，操作方法尽可能实现简单化、人性化。 扩展性：良好的系统必须具备良好的伸缩性和扩展性。一方面要与现有其它系统保持兼容，同时要充分考虑到用户未来功能需求的变化和技术手段的发展。系统要预留相应的接口，方便集成新的功能。 高效性：JavaScript的自身性能其实比较不错，但是由于Dom操作，经常要遍历整个文档，所以性能会受到很大的影响。因此在系统设计过程中要充分考虑性能问题，让Qui的调用更高效、更迅速。第三节 系统设计步骤 前期准备，包括：资料收集、工具准备、规划安排； 需求分析，分析现状，了解问题，确定系统的整体需求； 概要设计，针对需求，细分各个功能点，确定系统的内部结构； 编码规范与用例编写，开发之前的准备，确定编码规范和单元测试的用例编写； 开发实现，系统实现方法的罗列、选择、优化； 单元测试与系统测试，利用测试工具，进行单元测试，并针对系统的主要点进行整体测试； 运行及维护，将系统正式运行并针对相应的问题进行维护。第四节 系统设计重难点Qui库的开发中，遇到许多难点，着重罗列了以下三点：一、 统一入口Web开发中，JavaScript主要用来进行Dom查询和操作，因此每个查询到的对象都应该具有操作的方法，而操作方法为了避免与其他框架的方法冲突，必须存放在一个闭包中，这样所有查询到的Dom对象都必须进入这个闭包，这样就需要一个入口，使经过这个入口的对象都可以转化为Qui对象，存放在Qui里，可以调用Qui方法。而为了具有更好的封装性，这个入口最好唯一，针对经过入口的对象进行识别，若是Dom对象直接存放在Qui对象里；若是查询语句，就调用CSS查询器进行查询，并将结果存放在Qui对象里。二、 CSS查询器CSS查询器是一个很复杂的东西，要支持CSS13是很难的，各个浏览器对CSS的支持特性本身就不同，同时CSS13变化灵活，而各个浏览器对JS的支持又不一样，所以实现起来异常复杂。因此，Qui库，利用sizzlejs引擎，在此基础上开发自身的查询器，统一入口为$q。其中sizzlejs是一个纯JS实现的CSS高速选择器引擎，其性能要胜过目前网络上大多数的选择器引擎，它是一个独立的js库。jQuery官方测试结果为：sizzlejs的查询速度相比jQuery的选择器引擎提升了49%。当$q()中有对象传入时，会对其进行分析，分类型进行操作，若是CSS查询对象，就调用sizzlejs引擎进行处理，并将其返回的结果存放在Qui对象中。三、 Dom继承JavaScript是一门基于事件驱动，具有面向对象的功能的脚本语言。而大部分开发人员已经习惯了面向对象的思想，当我们获取到对象后，习惯的使用点号去调用其方法，因此在Qui中，最好能实现获取Dom元素后，可以直接用点号调用Qui的方法，这就需要实现继承。继承对于JS其实并不是一件难事，但是要让获取到的Dom元素具有Qui的方法，而又不能去直接扩充Dom的原型，这就相对困难了。最后采用简单的工厂设计模式和函数编程模式组合在一起，将获取的Dom元素传入工厂模式中，然后在工厂模式中采用call()回调函数中的方法，从而实现继承。第五节 本章小结本章主要说明系统设计和开发前的总体规划，包括系统设计目标、系统设计原则、系统设计步骤和系统设计中的重难点问题。系统设计目标主要说明开发的系统应当具备的功能和特点；系统设计原则说明系统设计和开发时应当遵循的原则；系统设计步骤说明系统分析、规划、设计和开发整个过程的工作内容；系统设计中的重难点问题阐述了一些特殊问题的解决方法。第四章 开发实现第一节 实现原理首先使用闭包 (function()() 模拟命名空间，防止命名冲突；然后统一调用入口$q(obj)，当obj为CSS语句时，调用sizzlejs进行查询，获取Dom对象，存在Qui对象；当obj为Dom对象时，直接存入Qui中；当obj为其他值时，不进行操作，返回自身；当直接调用$q()时，可以使用Qui的底层方法，以完成自定义的操作；其次，获取到Qui对象后，在工厂模式中使用Qui.call(obj)继承Qui的方法，然后将Qui对象返回给调用者；其中，Qui使用函数编码，将常用方法封装在里面；最后，通过obj.hide()、obj.login()来调用Qui的方法。 第二节 代码设计代码是用来表征客观事物的一组有序的符号，它应用于计算机和人的识别与处理，而编码则是用数字或字母代表事物。设计出一个好的代码对管理信息系统的成功开发与实施具有重要的作用。好的代码能够使查询变得十分方便和快捷，对提高系统处理效率和信息的使用价值都会产生积极的作用。因此，代码设计是一个科学管理的问题，必须认真对待。代码设计应当遵循以下几项原则： 唯一性：每个代码只能代表唯一的实体或属性； 简单性：代码结构尽量简单化，代码长度尽可能缩短，以便其他开发人员理解，对代码进行修改； 规范性：代码结构、类型和编写格式一定要统一规范，以便其他开发人员能够理解代码结构和含义； 可扩充性：代码设计时，应当考虑系统的发展和变化，以便系统更新时，可利用原有的代码加以扩充。以上原则需灵活运用，根据实际情况统筹兼顾，权衡利弊，并在设计过程逐步进行优化。第三节 编码规范“所有的代码都要变成可供他人容易阅读的” 引用自Dojo JavaScript 语法规范。为了使我们的代码风格统一，便于大家阅读，以及代码的复用，我们的目标是： 就算不是自己写的代码，也要做到让别人看起来就像自己亲手写出来的一样。下面简单罗列一下常用的编码规范，其他部分见附录：（一）. 必须使用 Tab 键进行代码缩进，以节约代码大小。 (建议设置编辑器的tab为4个空格的宽度)。（二）. 所有变量必须是有意义的英文，严厉禁止拼音。（三）. 脚本注释方案采用业界标准的JS Doc toolkit的注释风格，规范注释可以更好地提高代码的可读性以及接口文档的输出。简单罗列两个如下： 脚本文件头注释规范模版参考如下:/* * fileOverview 脚本文件描述 * author , QZFL Team * version * updateDate */ 函数头注释规范模板参考如下：/* * function 函数描述 * return 函数返回值及类型 * param 参数列表及类型* tips 一些优秀方法*/（四）. 语法布局参考：普通代码段应该看起来如下：/ while语句while(!isDone) doSomething(); isDone = moreToDo();/ if语句if(someCondition) statements;else if(someOtherCondition) statements;else statements;/for循环for(initialization; condition; update) statements;/switch语句switch(condition) case ABC: statements; / fall through case DEF: statements; break; default: statements; break;第四节 单元测试单元测试，指的是在软件开发过程中进行的基础的测试检验。具体的说，就是软件独立单元要在与其他部分耦合度低的情况下进行测试。单元测试不是我们想象中的代码编写错误的工具，同时也可以提高软件的质量。此外，单元测试必须是可重复的，无论是在软件修改，还是移植到新的运行环境的过程中。因此，所有的单元测试都必须在整个系统的生命周期中进行维护。因此对于开发的Qui进行单元测试是需要，而JavaScript常用的单元测试工具是JSunit。JSunit就是Junit的JavaScript 版本，下载并解压Jsunit zip，大部分的核心文件都在 jsunit/app 目录下，两个最基本的文件：jsUnitCore.js - 每个测试文件都要引用它；testRunner.html - 用来运行具体的jsunit 测试。Jsunit的特点如下：l 需测试的html页面必须要包含jsUnitCore.js;l 需要调用setup()和tearDown()函数；l 需要在在浏览器中运行；l 用JavaScript编写。因此对于Qui进行单元测试，首先需要将函数进行分离，传入不同的值以及异常的值，然后测试输出结果与设定值是否相同。其运行界面如下：图4.1 jsunit运行界面第五节 本章小结本章主要针对开发实现的工作内容进行说明，包括实现原理、代码设计、编码规范、单元测试四个部分。开发实现主要对系统开发的准备工作和系统开发的思路进行简单阐述；在实现原理中，阐述了Qui实现的整体过程，以及内部关系；在代码设计中，明确了对系统功能进行编码的编码原则；在编码规范中，具体阐述了常用的编码规范应是什么样的，详细介绍见附录；在单元测试中，提出了对Qui库进行测试的工具、测试方法和测试截图。第五章 系统实施与运营维护第一节 概述系统实施是继系统分析和系统设计之后的又一个重要的阶段，它是对系统分析和规划阶段选定的方案进行具体的实施。在系统分析和规划阶段，主要工作是对系统进行逻辑、功能和技术上的设计，工作成果是以各种系统分析和设计文档来体现的。而系统实施阶段则是根据分析与规划阶段的成果，将分析设计的内容转化为物理实现，并通过对代码的调试运行，对系统存在的问题进行修改，待用户购置了系统运行的相关配置后，交给用户进行试用。Qui库在完成系统实施阶段后，就进入运行与维护阶段。维护的目的是保证Qui库正常、可靠地运行，并能够不断得到改善和提高，以充分发挥作用。因此，维护是为了保证系统中的各个要素随着环境的变化始终处于最新、最正确的工作状态，是保证Qui库稳定、可靠地运行的重要技术保障。第二节 系统测试系统测试，英文是System Testing。是将已经确认的软件、计算机硬件和网络等其他元素结合在一起，进行信息系统的各种组装测试和确认测试。系统测试指的是针对整个产品系统进行的测试，目的是为了验证系统是否满足需求规格，并找出与需求不符或与之矛盾的地方，从而提出更加完善的方案6。系统测试发现问题之后要经过调试找出错误原因和位置，然后进行改正。是根据整体的需求说明书进行的黑盒类测试，其基本应覆盖所有问题。对象不仅仅包括需测试的软件，还要包含软件所依赖的硬件、外设甚至包括某些数据、某些支持软件及其接口等6。一、 功能性测试针对各个细分功能点进行测试，对在系统分析中分解到的8个功能点、15个具体功能点进行测试：(1) 页面显示检测测试要点：URL定位准确，能正常加载管理页面；页面元素完整，样式无误；页面各功能链接和按钮可点击，功能跳转正常。测试结果：通过。图5.1 首页显示效果(2) 拖拽测试测试要点：当传入Boolean时，拖拽正常响应；当传入非正常类型时，拖拽有相应地处理。测试结果：通过。图5.2 拖拽效果(3) 提示框测试测试要点：传入提示文本后，能够正常给出提示；当非法操作时，也能正常处理。测试结果：通过。图5.3 提示框效果(4) 可复制性测试测试要点：设置不可复制能够正常执行；传入非法参数，能够正常处理。测试结果：通过。图5.4 可复制设定效果(5) 进度条测试测试要点：设定不同的值能正常显示；非法操作，能够处理。测试结果：通过。图5.5 进度条效果(6) 日历测试测试要点：能够正常显示日历；年月日跳转能够正常。测试结果：通过。图5.6 日历展示(7) 选项卡测试测试要点：能够正常切换选项卡；不按要求操作是否有相应处理。测试结果：通过。图5.7 选项卡切换(8) 轮播图测试测试要点：能否正常变化轮播图；不按要求操作是否有相应处理。测试结果：通过。图5.8 轮播图功能(9) 对话框测试测试要点：传入相应参数，能否正常显示对话框；非法参数是否有相应处理。测试结果：通过。图5.9 对话框显示(10) 登录框测试测试要点：能否显示登录框；非法操作是否有相应处理。测试结果：通过。图5.10 登录框显示(11) 动态隐藏测试测试要点：传入参数能否隐藏；非法操作是否有相应处理。测试结果：通过。图5.11 动态隐藏(12) 动态显示测试测试要点：能否正常动态展示；非法操作是否有相应处理。测试结果：通过。图5.12 动态显示(13) 动态切换测试测试要点：能否正常在显示和隐藏之间切换；非法操作是否有相应处理。测试结果：通过。图5.13 动态切换(14) 添加样式测试测试要点：能否正常添加样式；非法操作是否有相应处理。测试结果：通过。图5.14 样式添加效果(15) 移除样式测试测试要点：能否去除样式；非法操作是否有相应处理。测试结果：通过。图5.15 样式移除效果(16) 样式切换测试测试要点：能否在添加和去除样式间正常切换；非法操作是否有相应处理。测试结果：通过。图5.16 样式切换二、 兼容性测试u 测试目的检查系统在不同浏览器下的兼容性。u 测试方法1、在Windows XP系统下分别使用IE9、IE8、IE7、IE6、Firefox、Chrome以及Safari浏览器来浏览管理端页面以及进行查询和保存操作，检查页面是否与重构页面一致，