基于JavaScript的UI库的设计和实现.docx
- 文档编号:12592855
- 上传时间:2023-04-20
- 格式:DOCX
- 页数:50
- 大小:1.17MB
基于JavaScript的UI库的设计和实现.docx
《基于JavaScript的UI库的设计和实现.docx》由会员分享,可在线阅读,更多相关《基于JavaScript的UI库的设计和实现.docx(50页珍藏版)》请在冰豆网上搜索。
基于JavaScript的UI库的设计和实现
摘要
伴随着Web2.0的发展,以及Ajax的普及应用,尤其HTML5、CSS3的兴起,使JavaScript这门与众不同的语言,让越来越多的用户体验到Web动态交互的无穷魅力,但是大量的开发人员并没有真正了解过JavaScript的语言内涵,而只是生搬硬套,从而影响软件整体的性能和开发速度。
基于JavaScript的UI库——Qui,针对用户界面设计了一些常用的底层方法和UI模块,在结合现有的JavaScript框架的基础上,采用工厂和原型组合的设计模式,开发出更小巧、更快速、更简单的Qui库。
底层方法大致包括:
CSSSelector、Event事件、Browser检测及其他底层方法等;在此基础上开发的UserInterface模块,主要包括:
交互(Interaction)、部件(Widgets)、动画(Animation)等。
利用简单的实现原理,让大家能更快速的了解JavaScript,进而实现代码的重复利用。
本系统实现了用户界面中最常用的模块,同时拥有着丰富的代码注释及原理说明,让开发者能轻而易举的从Qui库中选取和修改相应的模块,从而实现自己个性化的代码。
此外在Qui库的基础上,开发了相关的示例页面,供开发人员下载和参考,让越来越多的人了解JavaScript,参与共享和交流。
【关键词】JavaScript用户界面交互部件动画
ABSTRACT
AccompaniedbythedevelopmentofWeb2.0andAjaxpopularityofapplications,especiallytoHTML5、CSS3,therisingofJavaScriptdistinctivelanguage,sothatmoreandmoreuserstoexperiencetheendlesscharmofthedynamicinteraction,butalotofTechnicalstaffsdon’ttrulyunderstandtheJavaScriptlanguageconnotation,butonlymechanically,thusaffectingthewholedevelopmentandperformanceofthesoftware.
TheJavaScriptUIlibrary-Qui,designedfortheuserinterfaceoftheunderlyingmethodsandUImodule,combinedwithexistingJavaScriptframeworkbasedontheuseofthefactoryandprototypecombinationmetermodel,developasmaller,fastereasierQuilibrary.Theunderlyingmethodgenerallyincludes:
CSSSelectorEventObject,theBrowserTestsandotherlow-levelmethods;onthisbasistodeveloptheUserInterfacemodule,including:
Interaction,Widgets,Animationandothers.Touseonesimpleprinciple,sothatwecanmorequicklyunderstandJavaScript,inordertoachievecodereuse.
Thesystemmostcommonlyusedmodulesintheuserinterfacedisplay,hasacodecommentsandtheprincipleofdescription,sothatdeveloperscaneasilyfromQuilibrary,selectandmodifythecorrespondingmoduleinordertoachievetheirownpersonalizedcode.Inaddition,theQuilibraryonthebasisof,thedevelopmentofthesamplepagefordeveloperstodownloadandreference,sothatmoreandmorepeopleunderstandJavaScriptandparticipateinthesharingandexchange.
【Keywords】JavaScriptUserInterfaceInteractionWidgetsAnimation
第一章绪论
第一节项目背景
随着web2.0的发展,以及Ajax的普及应用,客户端的用户界面的展示越来越重要。
尤其是HTML5、CSS3的兴起,让JavaScript越来越流行,也让越来越多的用户体验到了Web2.0的无穷魅力,但是大量的技术人员并没有认真了解过JavaScript的语言精髓,而直接使用相关的框架,因此一方面导致当程序出现问题时,无从下手调试;另一方面,用户对UI的要求越来越高,简单的JavaScript的应用已经满足不了原先的用户,而开发富Web应用对浏览器兼容性、Dom操作要求比较高,因此需要框架的帮助。
此时,随着Prototype、jQuery的兴起,也给我们提供了一个很好的架构平台,但是这些库都太过于庞大,并且它们的实现原理都相对复杂,难以理解。
在使用过程中,我们只会用到其中的一部分,但同时要加载整个库,从而影响UI性能,同时当代码出错时难以调试、运行。
作为一名前端爱好的人,我想创建一个这样的JavaScript库——更小巧、更简单、更富于变化,在分享学习过程的同时,用最简单的语言、最易理解的方式,把JavaScript这门语言分享给大家,让大家了解JavaScript的灵活多变,了解JavaScript的魅力。
第二节项目研究目的及意义
为了能让开发出来的WebUI效果更简单、更容易、更高效,想搭建这样的一个基于JavaScript的UI库——Qui,针对用户界面设计了一些常用的底层方法和UI模块,在结合现有JavaScript框架的基础上,开发更小巧、更快速、更简单的UI库,从而为富Web开发做铺垫。
其中底层方法大致包括:
CSSSelector、Event事件、Browser检测及其他底层方法等;在此基础上开发UserInterface模块,主要包括:
交互(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等,从而确保主体的兼容性。
第四节开发调试工具
一、DreamweaverCS5
DreamweaverCS5是Adobe公司开发的一款代码编辑工具,包括网页制作和网站管理。
Dreamweaver是首个专业针对网页开发的工具,它可以轻松地制作出各种网页,并且能够跨平台、跨浏览器。
由于与Adobe发布的新的ABL集成,所以其能够以可视方式进行网页设计,并使用相应的管理系统开发页面,同时能够实现浏览器的兼容性测试。
作为最受欢迎的CMS框架,借助于更新和基于CSS的页面,从而创建标准的网页。
为了确保跨浏览器兼容性,在多个浏览器和操作系统上的AdobeBrowserLab中测试页面,以单独、平铺或层叠方式比较浏览器视图,查看是否实现精确到像素的匹配,无需读取代码就能以可视方式检查CSS,将任何FLV文件直接导入Dreamweaver并快速集成你选择的播放器外观,只需设置屏幕大小、自动开始和循环等选项即可,随时可将视频发布到Web[1]。
JavaScript可以用任何编辑器编写,只要你有浏览器就可以运行,随着Node.js的发展,不需要浏览器也可以运行。
DreamweaverCS5可以智能提示JavaScript的语法错误,能够提高JavaScript开发速度,不过刚开始学习JS时不建议使用。
二、ZendStudio9.0
ZendStudio是ZendTechnologies开发的一款PHP语言集成的开发环境,简称IDE(IntegratedDevelopmentEnvironment)。
ZendStudio开发环境也能开发HTML页面和js脚本,但只对PHP语言提供调试功能。
ZendStudio5.5系列后,官方推出了基于Eclipse平台的ZendStudioforEclipse6.0,之后的版本也都构建于Eclipse。
ZendStudio是一款屡获大奖的专业的PHP集成开发环境,具备功能强大的专业编辑工具和调试工具,支持PHP语法加亮显示,支持语法自动填充功能,支持书签功能,支持语法自动缩排和代码复制功能,内置一个强大的PHP代码调试工具,支持本地和远程两种调试模式,支持多种高级调试功能[2]。
其特点如下:
1.快速开发迭代及配置本地或远程环境;
2.数据库SQL工具及团队协作;
3.完全的PHP4/PHP5的支持;
4.很多的sampledatabase应用程序与Zend组合。
ZendStudio具有项目管理器、编码编辑器、绘图调试器、完全的PHP5支持、编码组合功能、编码分析器、语法检索。
超强智能编码指的是具备新的、优秀的分析和优化工具,如PHP编码检测器。
同时它开发团队版本更新快,插件多,PHP开发的首选,同样建议刚开始学PHP时,不使用ZendStudio。
三、Firebug
Firebug是MozillaFirefox下的一款插件,能够调试大部分网站前端开发语言,如html、css等,但是Firebug最强大的还是其JavaScript的调试功能,高效实用,而且在能够兼容各个浏览器(如IE、Firefox、Opera、Safari等)。
当然,其他功能也还很强大,比如html、css、dom的查看、修改、调试与整体分析等。
总体而言,Firebug是一款优秀的Web开发工具,并且其是开源的。
其中控制台,能够显示出当前页面中所有的JavaScript错误以及警告,并提示js出错的文件和行号,这些错误提示比起浏览器本身提供的错误提示更加详细且具有参考价值,因此方便调试;查看和修改HTML的功能,如果你用过Firebug的HTML代码查看器,就会觉得它的强大和与众不同。
同时,Firebug占用内存空间不大,并且能够单步调试、设置断点、变量查看窗口等,如果你的网站已经建成,但是它的前台页面展示在性能上有问题,可以通过面板上的Profile来统计脚本运行的时间,查看到底是哪些语句执行时间过长,进而解决问题[3]。
四、Fiddler
Fiddler是由微软开发的一款web调试代理工具,它能够记录所有client和service间的HTTP请求,允许你监视和设置断点,以及篡改输入输的出数据。
Fiddler支持断点调试概念,用户可以加入一个插件对象,来使用.net下的任何语言来编写Fiddler扩展,通过显示所有的HTTP通讯,Fiddler可以轻松的演示哪些用来生成一个页面,通过统计页面,用户可以很轻松的使用多选,来得到一个Web页面的“总重量”,还可以轻松得到你请求的某个页面,总共请求了多少次,以及多少字节被转化了,另外,通过暴露HTTP头,用户可以看见哪些页面被允许在客户端或者是代理端进行缓存,如果要是一个响应没有包含Cache-Control头,那么他就不会被缓存在客户端[4]。
五、各种浏览器
浏览器的使用主要包括:
IE6+、Firefox3+、Opera9+、Safari3+和Chrome等几大浏览器。
①微软IE,基于Trident内核,对web站点具有强大的兼容性。
最新的InternetExplorer10包括HTML5、CSS3以及大量的安全更新。
②MozillaFirefox(火狐浏览器)是市场主流的浏览器之一,仅次于IE和Chrome。
最新的Firefox9新增了类型推断功能,再次大幅提高了JavaScript引擎的渲染速度,使得富含游戏、图片、视频和3D图片的网站或网络应用能更快的加载及运行。
③Opera是另一款主流的网页浏览器,其浏览速度堪称为世界最快,最新的版本号是11。
④Safari是Apple的操作系统MacOSX默认的浏览器,其使用了KHTML作为浏览器的运算核心。
2003年1月7日首度发行测试,成为MacOSXv10.3之后的默认浏览器。
Windows版本在2007年6月11日推出,支持WindowsXP与Vista,在2008年3月18日推出正式版。
⑤GoogleChrome,也称Google浏览器,是另一款由Google开发的、开源的主流浏览器。
该浏览器是基于其他开源软件所撰写,包括WebKit和Mozilla,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面,软件的名称是来自于称作Chrome的网路浏览器图形使用者界面(GUI),软件的beta测试版本在2008年9月2日发布,提供43种语言版本,有支持Windows平台、MacOSX和Linux版本提供下载[5]。
第五节本章小结
本章主要对论文选题的项目背景、课题研究目的与意义进行了阐述,在“基于JavaScript的UI库”的基础上进行分析研究,对常用的开发调试工具进行介绍,并对系统整体和各大功能点进行了说明。
第二章系统分析
第六节需求分析
前端开发最近几年在国内兴起,并没有一个明确的定义,但是前端技术包括JavaScript、ActionScript、CSS、XHTML等“传统”技术与AdobeAIR、GoogleGears,以及概念性较强的交互式设计,艺术性较强的视觉设计等等,根据该词可以做这样的理解,用互联网来做比喻,凡是通过浏览器到用户端计算机的统称为前端技术.相反存贮于服务器端的统称为后端技术。
国外的前端发展已经相当成熟,而国内的前端发展还相对滞后,集中在大公司,同时由于公司之间的不开放、不交流,以及行业内缺少一种分享的氛围,所以限制了前端的发展,也限制了用户去感受更优秀的网站和系统。
为一名前端爱好的人,我想创建一个这样的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主要包含:
CSSSelector、Event对象、Browser检测及其他底层方法等;在此基础上开发UserInterface模块,主要包括:
交互(Interaction)、部件(Widgets)、动画(Animation)等。
整体结构如下:
图2.1Qui库的各个功能点
六、CSSSelector
CSS查询器,即是Dom元素的获取,是进行Dom操作前很重要的一步,同时也是最为复杂的一步。
一个好的CSS查询器要支持CSS1~3,同时保证查询的速度和性能都比较高。
具体地说,以$q代表CSS查询器,要能够实现$q(obj),其中obj可以是Dom对象、字符串等。
字符串的实现要类似于CSS的写法,支持”#div”、”.div”、”divp”、”.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.2Qui库的组成
二、CSS查询器
CSS查询器是一个基于sizzlejs引擎的,用JavaScript实现的Dom查询引擎,支持CSS1~3,并且具有较高的性能。
图2.3CSS查询器的特点
三、Event对象
Event对象是底层方法的封装,具有较好的兼容性,能够跨浏览器实现事件的获取、目标的获取以及事件的绑定和其他操作。
图2.4Event对象的组成
四、Support对象
Support对象是一些常用的底层方法的汇总,在Qui库中并没有Support对象,它是这些方法的总称。
图2.5Support对象的构成
五、Interaction
交互模块(Interaction)是UI实现中常用的几个部分,包括拖拽、排序、可该表大小等等。
图2.6Interaction模块的组成
六、Widgets
部件模块(Widgets)是UI实现中各个小的功能点,包括常见的进度条、日历、轮播图、登录框、选项卡、对话框等。
图2.7Widgets模块的组成
七、Animation
动画模块(Animation)是UI中最吸引人的一部分,而动画的构成基本包含动态隐藏和显示、样式动态地添加和移除,以及他们之间的动态切换。
图2.8Animation模块的组成
第九节调用流程分析
在Qui库中,应该有统一的入口,类似于JQuery的$和jQuery,通过这样的入口可以调用Qui方法,从而实现系统整体的完整性。
当传入字符串时,进行字符串判断和处理,然后使用CSS引擎的Selector方法查询到相应的Dom元素,将结果存放在Qui对象中——Qui对象是一个伪数组,然后进行相应的Dom操作即可;
另外,入口也可以接受Dom元素本身,通过Qui入口$q()将其转化为Qui对象,从而使传入的该对象也可以调用Qui的方法。
图2.9Qui库的调用流程
第十节本章小结
本章主要针对系统开发前分析阶段的工作内容进行说明。
系统分析包括需求分析、系统功能点分析、结构分析、调用流程分析四个部分。
在需求分析中,主要说明基于JavaScript的UI库,对功能的需求情况;在系统功能点分析中,主要说明如何对系统功能模块进行划分,并对各功能模块的具体功能进行需求分析;在结
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 基于 JavaScript UI 设计 实现