基于JQuery框架的web移动端快速开发技术研究与应用

吴国辰

摘要：随着我国科技的不断提高，智能设备也在迅速普及，传统的信息类和电子类都已经逐渐向移动端转移和扩展，移动端已经开始成为主流市场。因此，web移动端的技术成为了大众所关注的焦点。该文就以web移动端的开发技术为主，着重探讨了基于JQuery框架下的web移动端快速开发技术的应用。

关键词：JQuery框架；web移动端；快速开发技术；研究和应用

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2017）02-0089-02

1 概述

常规的Web应用主要是把所有的操作都集中在服务器端口进行，而客户端只是做一些简单的显示网页服务。这样导致了服务器承担任务过重、加载过慢等现象。而Ajax的出现恰好改变了之前的web的操作方式和开发模式，它把之前具有单一性和简单化的网页变得更加灵活性和交互性，并且通过异步数据传输，达到了web移动端的独立性和有效性的成果。但是，Ajax技术下的web移动端程序开发和应用的劣势也较为明显。首先，Ajax要使用传统的XML技术对数据进行传播与运行，这样会造成数据冗余；其次，数据会容易出现无法解析现象，造成数据停滞；最后，对浏览器的兼容性与包容性过差，导致浏览效果不佳。为了避免以上现象的发生，我国工作人员用JSON来替代了XML的传输方式，使JSON成为新的数据传输格式。并且以JQuery作为框架，来解析JOSN的数据包和格式，并达到Ajax与JOSN的异步请求，形成最佳适合web移动端的活动。

不仅如此，JQuery也是一个灵活与优秀的框架，是对Javascript的一种延伸与扩展，不仅可以扩展常规的web的开发模式，实现异步请求，还可以兼容各种主流的浏览器、CSS3等设备，使其按照使用者的需求进行资源加载处理。因此，JQuery框架真正地实现了web移动端的快速开发，也优化了用户体验，形成了良好效益。

2 web应用变化

2.1 传统的Web开发模式

一般来说，传统的web的应用主要是按照请求、刷新和显示的模式进行开发与研究的。这种模式简单来说就是用户在链接某件事件或者单机按钮时，都会向服务器的终端发出一个请求命令，这些请求都是由服务器进行处理与完成，当处理结束后，就会返回到浏览器页面上，显示最终结果。其实就是web的服务器要完成多种处理，而浏览器只做简单的页面显示服务，甚至导致了传统web应用等待时间过长，客户丧失耐心，还有可能出现浏览器可能始终显示的都是LOADING画面，最后会出现空白页面或者无法显示。可是有时候，客户可能只是想知道某件商品价格、图案等，一个微小的请求就要整个服务器进行操作与运行，甚至页面中其他的数据都要重新加载。这样的情况不仅会给服务器带来一定的运算负担和处理麻烦，会给用戶带来不愉快和不舒服的体验与方式，甚至还会无故增加了客户的流量数据。

2.2 Ajax下的web应用

传统的web应用还具备网页自动刷新功能，为了帮助用户获得即时的新闻、股票等信息，但是频繁的自动刷新会使用户产生烦躁心理。因此，Ajax技术的出现打破了自动刷新功能，使页面开始不再频繁的自动刷新，并且替代了传统web应用的模式与方式。Ajax技术的真正被认可是因为把传统的web应用的交互模式改变为了异步提交，并用隐藏的框架完成，没有用到服务器。其中，Ajax技术主要是通过XML进行数据异步读取后，在利用XSTL与XML进行交换处理数据，最终用DOM来实现页面的显示，这样不仅减轻了处理器的负担，也给用户带来了更加快速的页面显示，形成良好的用户体验。

与此同时，工作人员也可以在任意一个地方进行初始化的请求，并利用GUI的异步传输与web的移动端链接，形成了服务器的数据交换使用，达到了页面与数据分离的局面。但是，Ajax并不是万能的，它只有在服务器确定交换后，引擎才可以向服务器提出异步请求。如果出现数据没有交换，这样旧的数据就会冗余，导致浏览器兼容效果差，并且加大了资金的投入。

3 JQuery框架的应用

3.1 JQuery的内容

JQuery是继prototype之后又一个优秀的Javascript框架。JQuery数据压缩后只有21k，属于轻量级的JS库，同时具备兼容功能，可以兼容各种浏览器（Opera9.0+、FF1.5+、IE6.0+）和CSS3系统，不仅可以使用户更加方便地处理events和HTML系统，还可以提供网站交换，帮助Ajax更好地配合web的应用，实现移动端的运转与工作。JQuery框架的使用大大促进了web移动端的开发，帮助了内容分离和异步请求的实现。与此同时，JQuery的文档说明非常详细，可以使用户对其中的使用清晰明了，保证了许多插件的选择与使用。JQuery还可以使html的页面保持完整的源代码，并和html的内容进行分离，也就是说，用户既不用担心等待时间过长，还可以直接用ID进行服务器调动，不再需要从html中寻找JS了。所以，根据JQuery的特点，非常适合作为框架模式，来为web移动端的快速与便捷开发做出贡献。

3.2 JQuery的特点

JQuery使用的是MIT许可协议，保持着免费与开源原则，并且是一个兼容多个浏览器的Javascript库。JQuery的一个比较突出的特点就是语法设计。JQuery的语法设计可以使用户更加方便，体现在事件处理、制作动画、Ajax的使用、选择DOM元素等多个方面上。另外，JQuery还提供了插件编写程序，就是API。这样不仅可以帮助开发者更加容易的掌控模块化， 还可以实现动态网页与静态网页的交互处理。与此同时，JQuery可以利用插件的修改，完成Tab导航、表格排序、图像特效等功能，并且还自带了特效，包括显示和隐藏功能。

4 基于JQuery框架的web移动端优势

现今，JQuey越来越受到广大用户的追捧与使用，主要是因为方便与快捷。特别是对选择器、事件处理器、封装设置和链式操作上，是其他的Javascript都望尘莫及的，它可以很轻松的把数据和内容进行分离处理，还可以很好的完成交互作用。尤其是在页面中，做到了只定义结构，而里面没有任何联系和逻辑，使交互只作用在脚本上，形成了前段部位分层。举个例子，如果在网站的基础上做一个移动web的app，笔者针对目前的两种市面上常见的Sencha Touch和JQuery Mobile 做个比较简单比较。简单来说，JQuery Mobile要比Sencha Touch简单很多，用JQuery Mobile开发效率也比Sencha Touch高，可是缺點就在于没有模块化、过于自由等问题不利于项目的后期维护。如果你是一个大型的网站项目，有着一支强大的技术团队支持，那Sencha Touch是首选无异；如果你只是一个人小打小闹地玩一下，那用JQuery Mobile会更方便。所以，拿JQuery作为web应用的框架也更为普遍和常见。 JQuery的另一个优点就是兼容性。JQuery在开发过程中尽可能地兼容了各种主流浏览器，虽然无法做到百分之百，但是基本已经算是比较完美的框架结构了。值得注意的，JQuery主要兼容的是主流浏览器，而一些小型、杂乱的浏览器就不一定可以兼容。

目前，国内浏览器主要以Trident（IE引擎）和chromium为主，并且作为内核进行转动，但是各大运营在JS引擎上会做出稍微的变动。比如360浏览器，虽然还是以IE引擎为主要内核，但是JS的代码发生改变，以至于很多用户会觉得JQuery框架会产生不兼容的现象，这一点是JQuery需要不断改善与创新的。而使用chromium作为核心的浏览器（多数为标榜高速的双核浏览器，比如猎豹、360极速版、遨游等）则存在另一个问题，由于chrome开发周期极短，版本更迭快，国内的浏览器内核更新往往跟不上chromium的更新速度，导致各家浏览器在兼容性问题上存在差异。不过这方面问题尚在JQuery的可控范围内，毕竟浏览器版本更新的改动并不会太大幅度，而且这都在JQuery开发团队的考虑范围内，存在兼容性问题的几率极低。总的来说，相比较其他的框架程序，以 JQuery为框架，做web的移动端更加合适与方便。

5 JQuery框架的web移动端开发

随着智能设备的普及，移动web也受到很多的关注，很多传统的信息和电子开始走向移动端转型。笔者结合多年工作经验与经典案例，主要说以下两个方面：

5.1 Ajax的异步请求

Ajax的异步请求是JQuery框架设计的重要点，也是web移动端开发的首要任务。一般来说，总体设计包含了前台逻辑设计、业务逻辑和数据管理设计，并且运用动态生成业务表单和功能按钮，其中每个层次和动态功能都是独立存在的。页面设计除了包含了标准的移动web的XHTML和CSS外，还结合了bootstrap的布局，把层叠样式和响应相融合，使JQuery成为底层对象，完成与DOM的交互和密封工作。这样一来，不仅JQuery实现了页面动态显示，web移动端也开始正常运行，还形成数据存取功能，让数据库设计使用了最底层的SQL，业务逻辑使用了python。与此同时，在异步应用程序的发送和接受的过程中，JSON和XML成为了主要数据的交换模式，甚至容许了XML通过自定义进行数据分析和处理工作，形成扩展标记语言化，实现服务器与客户端之间的传输交流，帮助web移动端的完成。但是，Ajax的框架上开始出现了一些问题，并且影响到了web移动端的生产与开发，主要是安全和效率两方面。所以，为了解决这些问题，笔者建议使用JSON来替代传统的XML，这样会产生新的数据格式，可以有效避免一些问题的发生。尤其是JSON还是一个轻量的数据格式交换中心，无论是何种框架，都可以很快的解析与，使之形成一个完整数据格式。

与此同时，完整的数据可以在内存中与其他数据进行转换，并且独立于程序所存在，这样有利于格式支架呢双向转换。值得一提的是，很多用户还喜欢采用Ajax来加载数据，这个时候就会出现数据来自同一个域名或者无法加载现象，解决办法有两个。第一，在浏览器中不能直接来跨域访问，而在服务器端没有跨域安全限制，可以使用服务器作为代理。第二，脚本访问可以跨区域，同源策略不能阻止脚本的插入，因此，脚本访问也可以解决这个问题。使用JQuery这一轻量级的JavaScript不仅可以有效提高页面加载内容，还可以异步请求，提高用户使用感，增大经济效益。同时，也改善了传统中的不足，确保了移动web的开发的成功，给用户带来了快捷与方便。

5.2 JQuery Mobile

目前，web移动端开发主要使用的框架就是JQuery Mobile。所以，JQuery Mobile就是针对web移动端而研发，也成为移动web的重要主流框架。同时，JQuery Mobile也是运行在平板与手机上的版本，并且为主流平台提供了核心库，形成了一套完整的运行运行模式，最终形成以JQuery为一体的UI用户，也留住了电脑的web浏览器上的用户。现今，把JQuery Mobile分为了好、一般和基本三个档次，也对Apple IOS、Android、Windows Phone、Blackberry、Palm WebOS、Firefox Mobile、Meego、Samsung Bada、Opera Mobile都提供了不同程度的服务，并达到了好的标准。对于web的移动端开发来说，jQuery Mobile能最大程度上支持各种主流平台，具备良好的兼容性，因此， 提供了一个统一的jQuery 移动 UI 框架，工作人员可以利用这个框架保证了移动web程序可以不同的浏览器上工作与运行，开发人员也可以轻松地研究出web移动端的技术。只要掌握了表单元素、API、工具栏、按钮、页面、对话框等，就可以轻松制作出移动web页面。

另外，JQuery Mobile的页面模式基本固定，可以进行套用，所以非常方便与简单。 并且web移动页面的结构会自动调整为最大优化，甚至可以支持页面嵌入，这种模式也被称为最适合创建移动web页面模式。这种模式不需要任何的特殊配置，知识普通链接，就能创造出丰富的多媒体图像，甚至可以使用HTML5的特性。其中，笔者认为比较好的一点就是隐藏功能，非常实用和方便，这也是JQuery Mobile一大特点，可以套用以下代码：

$（"#a"）.on（"click"， function（e）

{ $（"#menu"）.show（）； $

（document）.one（"click"，

function（）{ $

（"#menu"）.hide（）； }）；

e.stopPropagation（）； }）；

$（"#menu"）.on（"click"，

function（e）

{ e.stopPropagation（）； }）；

6 结语

综上所述，目前我国基于JQuery框架的web移动端快速开发技术还有待提高。当然，此项技术要得到大幅度全面提高要经过一个漫长且极其复杂的工作过程要涉及到很多方面和元素。冰冻三尺非一日之寒，基于JQuery框架的web移动端快速开发技术方面存在的问题也不是一朝一夕就能解决的。但是，面对问题，我们也不能够坐视不管或者是坐以待毙，基于JQuery框架的web移动端快速开发技术管理工作关系到整个网络的质量和相关企业的经济利益，在目前市场经济竞争如此激烈的趋势下，我们各方都必須做出努力共同促进基于JQuery框架的web移动端快速开发技术的健康发展，促进技术的提高。另一方面，基于JQuery框架的web移动端快速开发技术的发展也能做到提高企业竞争力，做到产业可持续发展并且带动整个经济链的发展。当然，该项目技术的提高受益的还是我们每一个人。

因此，提高基于JQuery框架的web移动端快速开发技术势在必行。而且就目前形势来看，JQuery还是web移动端的快速开发的首选。它不仅仅能过简单的制作web移动页面，还可以发展为web移动app，并且在技术得到提高后将来会完成更加大规模、高难度、复杂结构和多重系统的网络工程，在完成越来越高要求的工程中必定会在过程中出现一些技术问题，而实施真正有效的应对策略才能帮助其在技术上度过难关，减少各种问题的出现，不仅可能成为web移动端UI设计中的主流，更给用户带来了便利与快捷，促进了web和经济的共同增长与提高。

参考文献：

[1] 宋金华. 基于SSH整合框架和jQuery Mobile页面脚本框架的移动学习平台设计和开发——以江苏开放大学为例[J]. 江苏教育研究， 2014（3）： 42-46.

[2] 仰燕兰，金晓雪，叶桦.ASP.NET.ATAX框架研究及其在web开发中的应用[J]. 计算机应用与软件，2011， 28（6）：195-198.

[3] 黄競. 基于jQuery框架的Web前端系统构建方法的研究与应用[D]. 北京邮电大学， 2013.