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

 

 

本文做者：上海驻云Web前端工程师 著名2.5次元患者 黄志彪 （头像与真人如出一辙）

 

1、前言

 

   单页面开发在现在的WEB开发中占有绝对的优点，单页面应用能够提升用户体验度，能够实现跨平台应用开发。要实现单页面开发也有不少前端框架，好比：AngularJS，BackboneJS等等，这些都是很流行很全面的前端开发框架，它提供了网页模板，路径解析，API访问及Dom操做功能，可是有时候咱们的需求比较简单，若是用这些大型前端框架那就显得有点重了。这里我介绍下本身使用Jquery实现单页面应用开发的过程。

 

2、URL HASH理解

 

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

  接下来咱们用几个URL来理解下：

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

 

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

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

 

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

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

 

3、案例

 

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

 

4、单页面开发

 

   在进入开发步骤以前，咱们先了解下一个jQuery的框架-jquery-hashchange。这个框架就是用来作路由控制的，它能够监听hash的变化。

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

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

而后咱们要看看模板定义：

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

 

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

 

 

这样，咱们用jQuery实现单页面应用开发的基本模块就搭建完成了，在前端开发中，咱们常要跟服务器通讯，这个时候咱们能够专门写一个类作接口调用，如：

 

 

而后在控制器中引入该模块，调用相应的接口函数就行了。

 

好啦~本文到这里就结束了，同时，若是喜欢咱们的话就赶忙订阅咱们吧~~~天天定时推送新鲜干货~~~也能够关注咱们的微信公众号：架构云专家频道 天天同步更新哟~~~