阿里云
阿里云多端小程序中小企业获客首选
发表主题 回复主题
  • 9217阅读
  • 10回复

[教程]【技术干货】前端开发之jQuery单页面开发

级别: 码农
发帖
128
云币
331
Y -BZV |  
9nO&d(r g  
mOjjw_3gq  
本文作者:上海驻云Web前端工程师 著名2.5次元患者 黄志彪 (头像与真人一模一样)
dEf5x_TGm  
*mn9CVZ(}M  
CucW84H`J  
一、前言 FbdC3G|oA  
(ux9"r^g;x  
RM%Z"pc Y6  
  单页面开发在如今的WEB开发中占有绝对的优势,单页面应用可以提高用户体验度,可以实现跨平台应用开发。要实现单页面开发也有很多前端框架,比如:AngularJS,BackboneJS等等,这些都是很流行很全面的前端开发框架,它提供了网页模板,路径解析,API访问及Dom操作功能,但是有时候我们的需求比较简单,如果用这些大型前端框架那就显得有点重了。这里我介绍下己使用Jquery实现单页面应用开发的过程。 kiin78W  
Ak`?,*L M  
\Ym$to  
二、URL HASH理解 h52+f  
l~f9F`~'  
y </i1qM  
  Html中的锚点定位相信大家都用过,在URL中,“#” 与其后面的字符串共同组成了锚点部分,“#” 代表网页中的一个位置,其右面的字符,就是该位置的标识符。单单改变 “#” 后的部分,浏览器只会滚动到相应位置而不会重新加载网页,在JavaScript中我们通过location.hash来获取。在URL中,除了以 “#” 号开头锚点部分,还有一段以“?”号开头的部分,“?”及后面的字符串代表的是传递的参数,在 “http” 请求中,“#” 及标识符是不会传递到服务的,而“?”后面的参数部分则会发送到服务器。 #N=_-  
  接下来我们用几个URL来理解下: 6QPbmO]z  
1、http://www.xxx.com/a/b#a Ra~:O\Z  
7nPm{=B G  
Rk{2ZUeg  
2、http://www.xxx.com/a/b#a?name=XX&age=21 TF,a `?c`  
在这两个URL中,“#a” 就是hash,我们称之为path部分,“?name=XX&age=21”我们称之为search部分。接下来我们再看个URL: Od]wh  
h"N#/zQ  
Nk>6:Ho{G  
3、http://www.xxx.com/a/b#!a kZ 9n@($B  
这个URL跟上面的第一个URL有一个区别,多了一个 “!” 相信大家在单页面应用开发的时候都看到过 “#!” 的组合,为什么要如此组合?大家可以看下谷歌的一篇文章Making AJAXapplications crawlable大概的意思就是说让path部分可以被搜索引擎搜索到,而search部分是不能被搜索的,这点很重要,如果你做的页面不能被搜索引擎搜索到那就没意义了。 Fg^zz*e  
;77q~_g$  
ZW8;?# _  
三、案例 VzFzVeJ  
n<sA?T  
6HR*)*>z_  
  现如今很多流行的前端框架都是单页面应用,但是有时候我们的需求比较简单,又不想用那些大型的前端框架,怎么办?比如:一个公司有公司的官网,公司官网一般是静态页面,然后里面有个注册功能,但是注册是分几个步骤的,又不想在一个页面显示完成,现在的网页一般都需要设计的简洁,不然太繁琐了人家一看都懒得填了,注册到下一个步骤需要记录上一个步骤的数据,而且用户回退的时候还会自动记住用户上一个步骤填入或选择的数据,这个时候大家肯定会想着在一个页面上用简单的显示和隐藏元素来实现,实际上大多数都是这样做的,但是有一个缺点,用户点击浏览器的前进和后退怎么办?这样做的情况下用户点击前进和后退就退出了注册页面了,如何避免这种情况呢?下面介绍的单页面开发就可以解决这个问题。那在这里如何开发我们的单页面应用?显然用AngularJS这种大型的前端框架并不合适,这个时候别忘记了我们的老朋友-jQuery。 M$LzV}k  
Yf^/YLLS  
Jc9^Hyqu&  
四、单页面开发 >5]w\^QN9_  
ok9G9|HA  
$U5$*R@jo[  
  在进入开发步骤之前,我们先了解下一个jQuery的框架-jquery-hashchange。这个框架就是用来做路由控制的,它可以监听hash的变化。 #9hSo  
  假如我们的需求有两个步骤,我们写一个路由控制的类,这个类我们学习下AngularJS的route模块定义方式,将模板和控制器定义在一起: AqP\g k  
QmB,~x{j>  
p$%g$K  
  这段代码是路由模块,我们先定义了一个根路由:_rootPath = '#!regist';,而后我们定义了一个跟路由匹配正则_pathRegu= /\#\!regist\/\w+/g;,这个正则在后面做路由匹配有用。接下来我们看路由定义_pathRoute对象,该对象定义了一个默认路由default和一个路由定义的数组path,在path里面每个路由都定义了路由地址,模板id和控制器,这里的模板使用的是jquery-tmpl插件,接下来我们看看控制器类: L`Q9-#Y  
evGUSol?:n  
7llEB*dSA  
F30jr6F\  
然后我们要看看模板定义:
_b 8XF&O  
 wZUR  
ma4r/8Q  
c'6$`nC  
好,到这里我们就看到了控制器类定义和页面模板定义,下面我们再看看如何将控制器和模板进行解析:
Aonq;} V e  
]^\+B4  
\it<]BN  
这个类是总控制器,它负责路由转发和模板加载,最后我们还要使用jquery-hashchange插件监听路由变化来转发路由和加载模板:
0<S(zva7([  
/waZ9  
0H{0aQQ  
=8fZG t  
这样,我们用jQuery实现单页面应用开发的基本模块就搭建完成了,在前端开发中,我们常要跟服务器通信,这个时候我们可以专门写一个类做接口调用,如: P1l@K2r  
8m"5J-uIi  
*8CE0;p'k  
然后在控制器中引入该模块,调用相应的接口函数就好了。
!P26$US%P  
)p;gm`42oY  
好啦~本文到这里就结束了,同时,如果喜欢我们的话就赶紧订阅我们吧~~~每天定时推送新鲜干货~~~也可以关注我们的微信公众号:架构云专家频道 每天同步更新哟~~~ ;EfMTI}6K  
Cx/duod p  
[ 此帖被驻云科技在2016-05-03 17:16重新编辑 ]
级别: 论坛版主
发帖
4292
云币
2524

只看该作者 沙发  发表于: 2016-05-03
     没看到内容
级别: 码农
发帖
128
云币
331
只看该作者 板凳  发表于: 2016-05-03
回 1楼西秦的帖子
现在有啦~~~
级别: 论坛版主
发帖
4292
云币
2524

只看该作者 地板  发表于: 2016-05-03
回 2楼(驻云科技) 的帖子
代码字体感人啊
级别: 码农
发帖
128
云币
331
只看该作者 4楼 发表于: 2016-05-13
回 3楼西秦的帖子
so   sorry   小编尽力了QAQ
级别: 论坛版主
发帖
4292
云币
2524

只看该作者 5楼 发表于: 2016-05-13
回 4楼(驻云科技) 的帖子
代码扔到Sublimetext再截图吧
级别: 程序猿
发帖
285
云币
163
只看该作者 6楼 发表于: 2016-05-14
  这也行
级别: 码农
发帖
128
云币
331
只看该作者 7楼 发表于: 2016-05-23
回 5楼西秦的帖子
小编会努力学习的QAQ
级别: 码农
发帖
128
云币
331
只看该作者 8楼 发表于: 2016-05-23
回 6楼sosyxg的帖子
嘻嘻~
级别: 新人
发帖
10
云币
12
只看该作者 9楼 发表于: 2018-01-17
Re【技术干货】前端开发之jQuery单页面开发
我觉得初学者,一开始能在一个高质量的前端框架写代码,能一下提高好几个层次。推荐Vue+Typescript+Webpack的框架
级别: 新人
发帖
2
云币
2
只看该作者 10楼 发表于: 2018-01-19
Re【技术干货】前端开发之jQuery单页面开发
很久没用jq了          
发表主题 回复主题
« 返回列表上一主题下一主题

限100 字节
如果您提交过一次失败了,可以用”恢复数据”来恢复帖子内容
 
验证问题: 66 - 58 = ?
上一个 下一个
      ×
      全新阿里云开发者社区, 去探索开发者的新世界吧!
      一站式的体验,更多的精彩!
      通过下面领域大门,一起探索新的技术世界吧~ (点击图标进入)