【技术干货】前端开发之jQuery单页面开发
本文作者:上海驻云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模块定义方式,将模板和控制器定义在一起:
这段代码是路由模块,我们先定义了一个根路由:_rootPath = '#!regist';,而后我们定义了一个跟路由匹配正则_pathRegu= /\#\!regist\/\w+/g;,这个正则在后面做路由匹配有用。接下来我们看路由定义_pathRoute对象,该对象定义了一个默认路由default和一个路由定义的数组path,在path里面每个路由都定义了路由地址,模板id和控制器,这里的模板使用的是jquery-tmpl插件,接下来我们看看控制器类:
然后我们要看看模板定义:
好,到这里我们就看到了控制器类定义和页面模板定义,下面我们再看看如何将控制器和模板进行解析:
这个类是总控制器,它负责路由转发和模板加载,最后我们还要使用jquery-hashchange插件监听路由变化来转发路由和加载模板:
这样,我们用jQuery实现单页面应用开发的基本模块就搭建完成了,在前端开发中,我们常要跟服务器通信,这个时候我们可以专门写一个类做接口调用,如:
然后在控制器中引入该模块,调用相应的接口函数就好了。
好啦~本文到这里就结束了,同时,如果喜欢我们的话就赶紧订阅我们吧~~~每天定时推送新鲜干货~~~也可以关注我们的微信公众号:架构云专家频道 每天同步更新哟~~~
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
【技术干货】我们的项目是如何技术选型的
本文作者:上海驻云开发总监 陈昂 以下正文: 公司逐渐壮大,团队日趋稳定。作为一名陪着公司一块成长的一分子,我深感欣慰。蓦然回首,发现我们竟然有了诸多产出与成果。有平台,有工具,有产品,有项目。有些项目进行中,有些产品已夭折。但不管怎样,看着这么多已有成果,还是小小的骄傲了一下。然而骄傲之余,精心沉思,我们积累的太少,沉淀的不够。以前,我们就像是在打仗,为了生存,你死我活,兵贵神速,分秒必争。现在,我们多少可以喘一口气的时候,有必要回顾下,总结下,沉淀下了。 那么,今天就先回顾下我们之前这些项目的技术选型过程吧。 时间回到2013年,当时刚刚换了一份糊口的工作。一家广告公司,美女如云,帅哥成堆,有充足的时间和资源让你定位自己的性取向。然而胖子的一通电话让我没有时间再去思考性取向的问题了。他电话中对云计算一阵云里雾里的吹嘘,让我的小心脏顿时扑通扑通的久久不能平静啊。立马决定加入他的新公司,拥抱云计算,迎接新挑战。 一个月后,到了新公司,哦不,应该说到了兄弟公司,借位办公(新公司还没完全成立,办公地点也还没选好,这些都不重要了,重要的是新产品已经开始规划了)。挖了两个前同事立马开干,做...
- 下一篇
阿里云自定义日记文件无法通过ftp下载
异常处理汇总 ~ 修正果带着你的Net飞奔吧!http://www.cnblogs.com/dunitian/p/4599258.html 有可能是个例,xftp不行(对linux支持很好),CuteFTP 9 可以(阿里云推荐的另一款ftp软件也不行)
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Docker安装Oracle12C,快速搭建Oracle学习环境
- 设置Eclipse缩进为4个空格,增强代码规范
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- SpringBoot2整合Redis,开启缓存,提高访问速度
- Hadoop3单机部署,实现最简伪集群
- Windows10,CentOS7,CentOS8安装Nodejs环境
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- CentOS关闭SELinux安全模块
- Docker使用Oracle官方镜像安装(12C,18C,19C)