开发者社区> 驻云科技> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【技术干货】前端开发之jQuery单页面开发

简介: 单页面开发在如今的WEB开发中占有绝对的优势,单页面应用可以提高用户体验度,可以实现跨平台应用开发。今天给大家带来的文章就是关于前端开发之jQuery单页面开发,希望大家喜欢~
+关注继续查看

52e000a53400a7ef618

本文作者:上海驻云Web前端工程师 著名2.5次元患者 黄志彪 (头像与真人一模一样)


一、前言


  单页面开发在如今的WEB开发中占有绝对的优势,单页面应用可以提高用户体验度,可以实现跨平台应用开发。要实现单页面开发也有很多前端框架,比如:AngularJS,BackboneJS等等,这些都是很流行很全面的前端开发框架,它提供了网页模板,路径解析,API访问及Dom操作功能,但是有时候我们的需求比较简单,如果用这些大型前端框架那就显得有点重了。这里我介绍下自己使用Jquery实现单页面应用开发的过程。


二、URL HASH理解


  Html中的锚点定位相信大家都用过,在URL中,“#” 与其后面的字符串共同组成了锚点部分,“#” 代表网页中的一个位置,其右面的字符,就是该位置的标识符。单单改变 “#” 后的部分,浏览器只会滚动到相应位置而不会重新加载网页,在JavaScript中我们通过location.hash来获取。在URL中,除了以 “#” 号开头锚点部分,还有一段以“?”号开头的部分,“?”及后面的字符串代表的是传递的参数,在 “http” 请求中,“#” 及标识符是不会传递到服务器的,而“?”后面的参数部分则会发送到服务器。

  接下来我们用几个URL来理解下:

1、http://www.xxx.com/a/b#a


2、http://www.xxx.com/a/b#a?name=XX&age=21

在这两个URL中,“#a” 就是hash,我们称之为path部分,“?name=XX&age=21”我们称之为search部分。接下来我们再看个URL:


3、http://www.xxx.com/a/b#!a

这个URL跟上面的第一个URL有一个区别,多了一个 “!” 相信大家在单页面应用开发的时候都看到过 “#!” 的组合,为什么要如此组合?大家可以看下谷歌的一篇文章Making AJAXapplications crawlable大概的意思就是说让path部分可以被搜索引擎搜索到,而search部分是不能被搜索的,这点很重要,如果你做的页面不能被搜索引擎搜索到那就没意义了。


三、案例


  现如今很多流行的前端框架都是单页面应用,但是有时候我们的需求比较简单,又不想用那些大型的前端框架,怎么办?比如:一个公司有公司的官网,公司官网一般是静态页面,然后里面有个注册功能,但是注册呢是分几个步骤的,又不想在一个页面显示完成,现在的网页一般都需要设计的简洁,不然太繁琐了人家一看都懒得填了,注册到下一个步骤需要记录上一个步骤的数据,而且用户回退的时候还会自动记住用户上一个步骤填入或选择的数据,这个时候大家肯定会想着在一个页面上用简单的显示和隐藏元素来实现,实际上大多数都是这样做的,但是有一个缺点,用户点击浏览器的前进和后退怎么办?这样做的情况下用户点击前进和后退就退出了注册页面了,如何避免这种情况呢?下面介绍的单页面开发就可以解决这个问题。那在这里如何开发我们的单页面应用?显然用AngularJS这种大型的前端框架并不合适,这个时候别忘记了我们的老朋友-jQuery。


四、单页面开发


  在进入开发步骤之前,我们先了解下一个jQuery的框架-jquery-hashchange。这个框架就是用来做路由控制的,它可以监听hash的变化。

  假如我们的需求有两个步骤,我们写一个路由控制的类,这个类我们学习下AngularJS的route模块定义方式,将模板和控制器定义在一起:


52c000a51cd4b6d3cce

  这段代码是路由模块,我们先定义了一个根路由:_rootPath = '#!regist';,而后我们定义了一个跟路由匹配正则_pathRegu= /\#\!regist\/\w+/g;,这个正则在后面做路由匹配有用。接下来我们看路由定义_pathRoute对象,该对象定义了一个默认路由default和一个路由定义的数组path,在path里面每个路由都定义了路由地址,模板id和控制器,这里的模板使用的是jquery-tmpl插件,接下来我们看看控制器类:


52e000a53e8e9cbae56


然后我们要看看模板定义:


5b10001fecd91c8d999


好,到这里我们就看到了控制器类定义和页面模板定义,下面我们再看看如何将控制器和模板进行解析:


52f000a58aa7ff7a3b1


这个类是总控制器,它负责路由转发和模板加载,最后我们还要使用jquery-hashchange插件监听路由变化来转发路由和加载模板:


52d000a55b1edf7d4ce


这样,我们用jQuery实现单页面应用开发的基本模块就搭建完成了,在前端开发中,我们常要跟服务器通信,这个时候我们可以专门写一个类做接口调用,如:


52d000a55c16d04abda


然后在控制器中引入该模块,调用相应的接口函数就好了。


好啦~本文到这里就结束了,同时,如果喜欢我们的话就赶紧订阅我们吧~~~每天定时推送新鲜干货~~~也可以关注我们的微信公众号:架构云专家频道 每天同步更新哟~~~

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery wizard,一款创建步骤向导的插件
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/74926175 这篇文章完全没有技术难度,但我为什么要写呢?因为我想把这么好的一款插件推荐给需要的小伙伴。
1345 0
30个非常流行的提示信息插件(jQuery Tooltip Plugin)
在网站的设计中,提示信息是非常细微的功能,但是起着非常重要的作用。如果你的网站中提示信息做的比较好,会给浏览者留下非常深刻的印象,同时也会起到非常好的网站宣传效果,下面介绍了30个比较流行提示信息插件jQuery Tooltip Plugin,希望对大家有帮助。
757 0
2009 年度最佳 jQuery 插件
jQuery 是个宝库,而 jQuery 的插件体系是个取之不竭的宝库,众多开发者在 jQuery 框架下,设计了数不清的插件,jQuery 的特长是网页效果,因此,它的插件库也多与 UI 有关。本文是 webdesignledger.com 网站推选的2009年度最佳 jQuery 插件。
1215 0
10个最佳jQuery Lightbox效果插件收集
  大家都很喜欢 Lightbox 弹框效果,这种效果在很多地方都很有用。而原始的 Lightbox 脚本已经被无数次的克隆到了所有的流行 Javascript 库中。本文特别收集了10个最佳的Lightbox效果插件,所以收藏本文吧,不定什么时候你就用到了…… 您可能感兴趣的相关文章 ...
973 0
Jquery 学习笔记(三)240多个jQuery插件
Jquery 学习笔记(三) -240多个jQuery插件 2009年11月30日二 作者:   邦畿千里   概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。
1058 0
Jquery插件
看到了别人的总结的插件,本想一个一个的试,但数量太大,所以……,插件地址直接拷过来,用的时候再说吧文件上传(File upload) Ajax File Upload.jQUploader.Multiple File Upload plugin.
975 0
[Jquery Plugin]Jquery Tabs 插件简介-更友好地组织你的页面
关于Jquery Tab插件,比较流行的是jQuery UI Tabs,最近此插件也已经有了更新,地址为http://stilbuero.de/jquery/tabs_3/ ,目前国内很多网站也在使用此插件,希望大家有时间了试用一下。
1079 0
[jQuery Media Plugin] Jquery 多媒体插件简化多媒体页面编写
jQuery Media Plugin简介:        Jquery Media Plugin是一款页面内容嵌套多媒体的插件。支持的大部分的多媒体播放器和多媒体格式,比如:Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF等等。
654 0
[原创]jPagerBar1.2发布-jquery分页插件(一个适合Ajax+JSON+jQuery环境使用的多功能页码栏插件)(Demo、源文件下载已更新)
18个月前发布了jPagerBar1.1.1,受到了很多网友的关心和支持,也收到了很多的意见反馈,在此表示感谢!最近腾出点时间将一些建议整理了一下,结合自己的使用体验,升级了jPagerBar的一部分功能和执行方式。
955 0
+关注
驻云科技
上海驻云信息科技有限公司成立于2013年,是一家领先的企业云计算架构咨询、实施、管理及运维技术服务提供商,致力于为企业客户提供卓越的云计算整体解决方案。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
23-Vue.js在前端...1506518547.pdf
立即下载
JS零基础入门教程(上册)
立即下载
零基础CSS入门教程
立即下载