开发者社区> 驻云科技> 正文
阿里云
为了无法计算的价值
打开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


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


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

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

相关文章
期待已久的2013年度最佳 jQuery 插件揭晓
  让人期待已久的2013年度最佳 jQuery 插件揭晓了。在过去的一年里,有很多很多的 jQuery 插件发布出来,而这里文章列出的这些插件从提供的功能更角度来看是其中的佼佼者。相信这些优秀的 jQuery 插件能够帮助 Web 开发人员把一些惊艳的功能和效果轻松的应用到自己的项目中。
1225 0
一款效果精致的 jQuery 多层滑出菜单插件
  想要以用户友好的方式呈现多级菜单是件不容易的事情,而且还要跨浏览器兼容就更难了。Multi-Level Push Menu 这款 jQuery 插件提供了呈现这种菜单的解决方案,能够让你无限制的展示菜单,支持常用浏览器,而且能够用于触屏设备。
810 0
jQuery 浮动标签插件,帮助你提升表单用户体验
  浮动标签模式(Float Label Pattern)是最新流行的一种表单输入域的内容提示方式,当用户在输入框输入内容的时候,原先占位符的内容向上移动,显示在输入的内容的上面。这里推荐的这款 jQuery 插件就是帮助你实现浮动标签效果。
816 0
JQuery闭包,插件的写法
jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。 1、类级别的插件开发 类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法。
1406 0
Dynatable – 基于 HTML5 & jQuery 的交互表格插件
  Dynatable 一款有趣的,语义化,交互式的表格插件,使用 jQuery,HTML5 和 JSON 实现。Dynatable 的目的是提供一种简单的、可扩展的 API,能够轻松的浏览和操作大规模的数据集。
1225 0
10款基于jQuery 的图片360度旋转插件
之前的文章向大家分享了实现网站功能的各种优秀的jQuery 插件,今天这篇文章向大家推荐10款基于jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1315 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1062 0
jquery插件整理篇(七)表格插件
(1)Flexigrid Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
899 0
推荐18款非常棒的 jQuery 表格插件
  我们一般都是用HTML表格来显示结构化数据,如今有很多的 jQuery 表格插件可以帮助我们更好的组织和控制表格数据,增强表格的功能和操作。今天要与大家分享的是18个非常优秀的 jQuery 表格插件,有用到朋友可以参考一下。
1342 0
+关注
驻云科技
上海驻云信息科技有限公司成立于2013年,是一家领先的企业云计算架构咨询、实施、管理及运维技术服务提供商,致力于为企业客户提供卓越的云计算整体解决方案。
77
文章
41
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载