admin 管理员组

文章数量: 1184232


2024年3月12日发(作者：绩效目标smart原则)

科研应用　

基于ｊ　Ｑｕｅｒｙ前端框架提升Ｗｅｂ用户体验的研究　

侯海平　

（安徽财贸职业学院电子信息系　安徽・合肥２３０６０１）　

中图分类号：ＴＢ５４　文献标识码：Ａ　文章编号：１　６７２—７８９４（２０１　３）０６—００９６—０２　

摘要越来越多互联网公司注重用户体验，ｊＱｕｅｒｙ正是顺　

官方网站下载，其ＵＲＬ地址为ｈｔｔｐ：／／ｊｑｕｅｒｙ．ｃｏｍ。该网站提供　

应这一趋势而诞生的ＪａｖａＳｃｒｉｐｔ轻量级框架，在提升Ｗｅｂ　

了２个版本：一个是压缩版，一个是非压缩版。如果为了实　

用户体验方面有着很大的优势，并且这一效果正在逐渐扩　

现项目功能使用压缩版即可，如果为了进一步作研究学习　

大。本文主要介绍ｊＱｕｅｒｙ这一框架的技术特点，并分析如何　

之用，可以使用非压缩版。使用该库文件的语法如下（这里　

提升用户体验。　

ｊＱｕｅｒｙ库文件名为ｊｑｕｅｒｙ一１．９．１．ａｒｉｎ．ｊｓ，存放在网站根目录下　

关键词ｊＱｕｅｒｙ　ＡＪＡＸ　ＪＳＯＮ　

ＪＳ文件夹里）：　

Ｒｅｓｅａｒｃｈ　ｏｎ　Ｅｎｈａｎｃｉｎｇ　Ｗｅｂ　Ｕｓｅｒ　Ｅｘｐｅｒｉｅｎｃｅ　ｗｉｔｈ　ｊＱｕｅｒｙ　

＜ｓｃｒｉｐｔ　ｔｙｐｅ＝”ｔｅｘｔ／ｊａｖａｓｃｉｒｐｔ”ｓｒｃ＝”，ＪＳ／ｊｑｕｅｒｙ一１．９．１．ｍｉｎ．　

／／Ｈｏｕ　Ｈａｉｐｉｎｇ　

ｊｓｌｌ＞＜／ｓｃｒｉｐｔ＞　

Ａｂｓｔｒａｃｔ　Ｍｏｒｅ　ａｎｄ　ｍｏｒｅ　Ｉｎｔｅｒｎｅｔ　ｃｏｍｐａｎｉｅｓ　ｆｏｃｕｓ　Ｏｉ３　ｕｓｅｒ　ｅｘｐｅ—　

在Ｈｔｍｌ文件的ｂｏｄｙ区中有如下代码，实现１个ｄｉｖ和　

ｒｉｅｎｃｅ，ｊＱｕｅｒｙ　ｉｓ　ｔｈｅ　ｏｎｅ　ｇｅｎｅｒａｔｅｄ　ｆｏｒ　ｔｈｉｓ　ｔｅｎｄｅｎｃｙ．Ｉｔ　ｉｓ　ａ　

２个按钮，通过２个按钮控制该ｄｉｖ的显示和隐藏：　

ｌｉｇｈｔｗｅｉｇｈｔ￣ａｍｅｗｏｒｋ　ｏｆ　ＪａｖａＳｃｒｉｐｔ．Ｉｔ　ｈａｓ　ｇｒｅａｔ　ａｄｖａｎｔａｇｅ　ｆｏｒ　

＜ｄｉｖ　ｉｄ＝”ＭｓｇＢｏｘ”＞第一个ｊＱｕｅｒｙ的应用！＜／ｄｉｖ＞　

ｅｎｈａｎｃｉｎｇ　Ｗｅｈ　ｌｌｓｅｒ　ｅｘｐｅｒｉｅｎｃｅ．ａｎｄ　ｔｈｅ　ｅｆｆｅｃｔｉｖｅ　ｎＯＷ　ｉｓ　ｅｎｌａｒｇ—　

＜ｉｎｐｕｔ　ｉｄ＝”ｂｔｎＳｈｏｗ”ｔｙｐｅ＝＂ｂｕｔｔｏｎ”ｖａｌｕｅ＝”显示”／＞　

ｉｎｇ．Ｔｈｉｓ　ｅｓｓａｙ　ｍａｉｎｌｙ　ｉｎｔｒｏｄｕｃｅｓ　ｔｈｅ　ｆｅａｔｕｒｅｓ　ｏｆ　ｊＱｕｅｒｙ　ａｎｄ　ａｎａ—　

＜ｉｎｐｕｔ　ｉｄ＝”ｂｔｎＨｉｄｅ”ｔｙｐｅ＝”ｂｕｔｔｏｎ”ｖ￣ｕｅ＝”隐藏”／＞　

ｌｙｚｅ　ｈｏｗ　ｔｏ　ｒｅａｌｉｚｅ　ｉｔ．　

在该页面ＪａｖａＳｃｒｉｐｔ脚本区域中添加ｉＱｕｅｒｙ代码如下：　

Ｋｅｙ　ｗｏｒｄｓ　ｊＱｕｅｒｙ；ＡＪＡＸ；ＪＳＯＮ　

￥（ｄｏｃｕｍｅｎｔ）．ｒｅａｄｙ（ｆｕｎｃｔｉｏｎ　０｛　

￥（”＃ｂｔｎＳｈｏｗ”）．ｂｉｎｄ（”ｃｌｉｃｋ”，ｆｕｎｃｔｉｏｎ（ｅｖｅｎ￣｛￥（”＃Ｍｓｇ－　

１　ｉＱｕｅｒｙ简介　

Ｂｏｘ”）．ｓｈｏｗ０；））；　

自从ＡＪＡＸ技术被Ｇｏｏｇｌｅ运用到Ｇｏｏｇｌｅ　Ｓｕｇｇｅｓｔ、Ｇｏｏｇｌｅ　

￥（”＃ｂｔｎＨｉｄｅ”）．ｂｉｎｄ（”ｃｌｉｃｋ”，ｆｕｎｃｔｉｏｎ（ｅｖｅｎｔ）｛￥（”＃Ｍｓｇ－　

Ｇｍａｉｌ等应用中，全球Ａｊａｘ技术就开始大行其道。虽然Ａ—　

Ｂｏｘ”）．ｈｉｄｅ０；｝）；　

ＪＡＸ技术并不是一项新的技术，但是作为Ｗｅｂ前端脚本来　

｝）；　

说，这种使用方式的出现促使人们对ＪａｖａＳｃｉｆｐｔ的学习又一　

可以发现，使用ｓｈｏｗ０和ｈｉｄｅ０方法进一步提升了用户　

次地进入热潮。越来越多的人们开始使用ＪａｖａＳｃｒｉｐｔ来改善　

的Ｗｅｂ视觉动态效果（读者增加ＭｓｇＢｏｘ的ＣＳＳ效果可以　

Ｗｅｂ端的用户体验，但是冗长的脚本语句、处理跨浏览器的　

更明显地体验这一特点）。　

复杂性、Ｈｔｍｌ与ＪａｖａＳｃｆｉｐｔ堆砌一起先后顺序的处理等问题　

３与后端服务器程序交互实现ＡＪＡＸ　

很大程度上阻碍了开发效率的提升。　

使用ＡＪＡＸ最大的优点就是，无页面等待刷新，或者叫　

人们一方面追求Ｗｅｂ用户体验，一方面被ＪａｖａＳｃｒｉｐｔ开　

局部刷新，从而减少用户等待响应时间，让用户就像使用本　

发效率所困扰。一些大型公司如Ｇｏｏｇｌｅ、Ｙａｈｏｏ等企业内部　

地数据一样快速获取服务器数据。使用ｊＱｕｅｒｙ实现ＡＪＡＸ　

的ＪａｖａＳｃｒｉｐｔ高手们开始着手开发一些基于ＪａｖａＳｃｆｉｐｔ的框　

操作将变得非常简单，ｊＱｕｅｒｙ进一步封装ＡＪＡＸ操作，开发　

架来提升开发效率，其中著名的框架就有Ｐｒｏｔｏｔｙｐｅ、ＹＵＩ，直　

者只需使用　Ｑｕｅｒｙ的常用方法就可以实现局部刷新。其实　

至２００６年ｊＱｕｅｒｙ的出现，真正秉承了一个核心理念“写得　

现思路如下：　

第一，浏览器客户端页面发出ＡＪＡＸ请求。　

更少，做得更多”。截至发表本文时，ｊＱｕｅｙｒ的核心库版本已　

经更新到１．９．１。其相比ＪａｖａＳｃｒｉｐｔ本身来说，具有更多优点：　

第二，服务器端程序接受ＭＡＸ请求，处理后，返回结果　

１）更易学习；２）更少的代码；３）消除了跨浏览器的兼容问　

到浏览器客户端页面。　

题；４）更多的库函数；５）更简单地实现ＡＪＡＸ；６）更多的特　

第三，浏览器客户端页面呈现ＡＪＡＸ从服务器端获取的　

返回结果，用户得到数据结果。　

效。　

请求页ｊＱｕｅｒｙ代码如下：　

２使用ｉＱｕｅｒｙ特效库函数实现视觉效果　

￥（ｆｕｎｃｔｉｏｎ　０｛　＃ｂｔｎＡｊａｘ”）．ｃｌｉｃｋ（ｆｕｎｃｔｉｏｎ（ｅｖｅｎｔ）｛　

笔者在主持开发安徽财贸职业学院“维修在线服务平　

￥（”＃ｄｉｖＲｅｓｕｈ”）．１ｏａｄ（”Ｍｅｔｈｏｄ．ａｓｐｘ？ｐａｒａｍ＝ｂｔｎＡｊａｘ—ｃｌｉｃｋ”）；　

台”一项目中就采用了ｉＱｕｅｒｙ框架。一般来说使用ｊＱｕｅｒｙ框　

）　

架开发Ｗｅｂ应用，只需在Ｗｅｂ页面的ｈｅａｄ区域引用服务　

其中ｂｔｎＡｊａｘ为客户端页面中按钮的ｉｄ，ｄｉｖＲｅｓｕｈ为客　

器端或本地的ｊＳ库文件即可。最新的ｊＱｕｅｒｙ库文件可以从　

户端页面中ｄｉｖ的ｉｄ，Ｍｅｔｈｏｄ．ａｓｐｘ为服务器端页面，ｐａｒａｍ　

教研项目：安徽财贸职业学院教学研究项目（ＡＨＣＭＫＴ０９ｌ２）。　

作者简介：侯海平（１９８０一），男，安徽无为人，安徽财贸职业学院电子信息系讲师，研究方向为管理信息化、Ｗｅｂ应用开发。　

总第２３４期　

即敏　ｉ‘　

Ｔ０ｔａ１．２３４　

２０１３年２月ｍ　

Ｔｈｅ　Ｓｃｉｅｎｃｅ　Ｅｄｕｃａｔｉｏｎ　Ａｒｔｉｃｌｅ　Ｃｏｌｌｅｃｔｓ　

Ｆｅｂｒｕａｒｙ　２０１３（Ｃ）　

为向服务器端页面请求的参数。服务器端页面Ｍｅｔｈｏｄ．ａｓｐｘ．　经成为Ｗｅｂ开发的标准配置了，大量的应用，无数的表单验　

ＣＳ页面加载事件中代码如下：　

证，开发者在重复着一件事件——防止用户提交非法数据。　

ｌｂ１．Ｔｅｘｔ＝Ｒｅｑｕｅｓｔ［”ｐａｒａｍ”］．ＴｏＳｔｒｉｎｇ０；　

在ｉＱｕｅｒｙ中你能使用Ｖａｌｉｄａｔｅ快速完成这一开发，而且用户　

ｌｂｌ为Ｍｅｔｈｏｄ．ａｓｐｘ的服务器控件ｉｄ，ｐａｒａｍ为Ｒｅｑｕｅｓｔ　

体验还非常不错。　．　

请求参数。最后用户能在当前页无需整页刷新即可获得服　

５结语　

务器页面Ｍｅｔｈｏｄ．ａｓｐｘ传来的数据。　

本文主要结合现有Ｗｅｂ开发趋势以及开发者在前端开　

ｉＱｕｅｒｙ实现ＡＪＡＸ操作除了上述ｌｏａｄ方法外，还有很多　

发中遇到的各种问题，阐述了使用ｊＱｕｅｒｙ进行前端开发的　

方法，如：８．ｇｅｔ０，Ｉ８．ｐｏｓｔＯ，￥ｇｅｔＪＳＯＮ０，￥．￣ｊａｘ０等方法。有的可以　

意义，并通过短小实例展示了ｉＱｕｅｒｙ开发的方法和步骤。　

直接获取页面数据，有的可以获得ＪＳＯＮ数据，有的获取数　

Ｗｅｂ用户体验如工业产品设计，用户的体验决定了产品的　

据成功后调用回调函数，这些方法基本涵盖了Ｗｅｂ中的大　

生命周期，而使用ｊＱｕｅｒｙ这一轻量级ＪａｖａＳｃｒｉｐｔ框架恰好能　

量应用。　

抓住开发效率与用户体验之间平衡点。　

４不断扩展ｊＱｕｅｒｙ插件，用户体验提升越来越简　

单　

参考文献　

由于先天的开源特征，越来越多的开发者加入ｊＱｕｅｙｒ　

［１］（美）比伯奥特，等．ｊＱｕｅ￣实战【Ｍ］．陈宁，等，译．北京：人民邮电出版　

家族，使得　Ｑｕｅｒｙ插件越来越丰富。以前难以想象的工作　

社，２００９．　

量，现在使用插件很轻松就完成了。其中包括表单验证、动　

［２］（美）查弗，等．ｊＱｕｅｒｙ基础教程［Ｍ］．李松峰，等，译．北京：人民邮电出　

态特效、工具提示、图片浏览、地图标识等。表单验证现在已　

版社，２００８．　

奄　－窜ｋ－，９　－，９　鱼妊一　§　—奎　－，卓　窜　－夸　业窜　－窜　－专妊ｒ—辜　专　专　－奄　—　妇专　ｒ专妊—窜轻ｒ鸯妊窖　§妇ｒ奄　—窜　§　窖　－　ｒ　窜　业・奎　ｒ，９　毒　

（上接第８７页）　

究，并以小组为单位在课堂汇报，并要求小组每个成员至少　

工图片、提出当前土木工程施工中出现的事故问题、分析原　

汇报一次。　

因、提出解决问题的措施等内容，且应加入计算机软件的处　

③每个学生必须针对每章提出３—５个问题，提出可能　理数据）、参考文献（文献可以写网络所查资料）。　

解决的方式，设法解决。　

７提出学生汇报的ｐｐｔ内容要求　

④教师分析学生解决的正确与否，是讲授解决相应问　

要求图文并茂，有视频、ｌｆａｓｈ、图片等，且每个学生必须　

题的关键环节。　

提出自己的看法以及现有施工技术的改进方法。例如学生　

⑤教师启发学生提出可能的应用性问题和可能的解决　

做的：大型土方南京过江隧道盾构施工、新型深基础施工、　

方案。　

一

天施工完毕的世博远大馆的吊装方案研究、北京鸟巢新　

⑥课前学生必须自主学习。每个学生在课前进行自主　

工艺研究报告都非常精彩。　

自学，必须带着问题进课堂，明确要解决的问题。　

８改革考试方法　

⑦课堂分组讨论。组织学生讨论代表性问题和可能解　

为了提高学生参与研究性教学与学习的积极性，鼓励　

决方式，启发学生自主设法解决问题。　

学生参与课堂讨论、发言和项目答辩，及时写出课题研究报　

３配合精品课程，进行研究性课程教学资源库建设　

告及ｐｐｔ汇报，并进行在线考试改革。本次课共设４个研究　

对本课程现有网站进行补充，在现有教学资源的基础　

课题和１次课程学习综合汇报及答辩，采用综合评价的方　

上，扩充学生主动学习的教学资源，并以研究性教学作为精　

法对课程进行考核，考试成绩共分４块：４个研究课题　

品课程建设的特色项目，在网站建设上单独列出研究性学　

（４０％）、１次课程学习综合汇报及答辩（２０％）、平时作业　

习栏目和讨论专题。　

（１０％）、在线考试（３０％）。　

４搜集教学素材　

在教学素材的积累上遵循研究性教学与学习的取材原　

总评成绩＝　％　

则，从问题出发，建立适合研究性教学的专题或问题，包括　

教学专题和实践专题，例如学生感兴趣的北京奥体建筑、上　

＋学习综合汇报×２０％＋在线考试成绩ｘ３Ｏ％　

海世博建筑等施工工艺、方法。　

＋平时作业×１０％　

５编制实际的研究课题方案实施集　

编制大型土方开挖新工法研究、轻型井点降水施工工　

９总结　

艺研究、新型深基础施工研究、卫生间混凝土抗渗研究、房　

实践证明，通过研究性课程教学与学习的教学改革，训　

屋混凝土施工时裂缝控制研究、地基不均匀沉降施工工艺　练了学生文献查找、阅读、综述能力，培养了学生论文写作　

研究、世博远大馆的吊装方案研究、北京鸟巢新工艺研究等　

的能力，锻炼了学生ＰＰＴ制作、演讲与报告交流能力，营造　

方案实施，让学生更好地了解、接受、探索新知识、新工艺、　

了团队组织与合作能力。使学生对一些枯燥的土木类课程　

新工法。　

学习建立了浓厚的学习兴趣，提高了课程的“可学性”，激发　

６规范学生提交的研究报告　

了学生对新知识的探索欲，也培养了学生的集体荣誉感，同　

要求每个研究报告包括规范的封面、中英文摘要、关键　

时也加强了教师与学生之间的交流，培养了良好的师生感　

词、正文（一级、二级、三级目录，要求要有现场施工调研、施　

情。　

９７　


本文标签： 学生 用户 研究

版权声明：本文标题：基于jQuery前端框架提升Web用户体验的研究 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1710241068a563929.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。