大熊君学习html5系列之------History API（SPA单页应用的必备------重构完结版）
一，开篇分析
Hi，大家好！大熊君又和大家见面了，(*^__^*) 嘻嘻……，这系列文章主要是学习Html5相关的知识点，以学习API知识点为入口，由浅入深的引入实例，
让大家一步一步的体会"h5"能够做什么，以及在实际项目中如何去合理的运用达到使用自如，完美驾驭O(∩_∩)O~，好了，废话不多说，直接进入今天的主题，
今天主要讲的是对昨天文章中的代码进行重构，并且相应的美化了一下前台UI界面，如下图所示的效果：
哈哈哈酷吧！继续让咱们做个简单的回顾：
为了提高Web页面的响应速度，越来越多的开发者开始采用单页面结构（single-page application）的解决方案。所谓的单页面结构就是指多个页面间切换时，不刷新当前整个页面，更新页面展示数据，并且相应地改变地址栏中的url，以使用户可以分享这个url。
如果你使用chrome或者firefox等浏览器访问"github.com、plus.google.com"等网站时，细心的你会发现页面之间的点击是通过ajax异步请求的，
同时页面的URL发生了了改变。并且能够很好的支持浏览器前进和后退。是什么有这么强大的功能呢？恩，这就会说到HTML5里引用了新的API：
“history.pushState”和“history.replaceState”
二者之间的重要区别------"window.history.replaceState"和"window.history.pushState"类似，不同之处在于replaceState不会在window.history里新增历史记录点，其效果类似于window.location.replace(url)，都是不会在历史记录点里新增一个记录点的。当你为了响应用户的某些操作，而要更新当前历史记录条目的状态对象或URL时，使用replaceState()方法会特别合适。
（二），流程梳理
页面首次载入，虽然我们访问的URL是"http://localhost:8888/bbSPA.html"，但是，实际URL确是：
"http://localhost:8888/bbSPA.html#shanghai"，”history.replaceState“完成了初始化url切换工作，并且初始做了加载
"shanghai.data"的数据工作，鼠标点击左边的任意一个菜单项，右侧内容是Ajax载入，并且页面的URL随之发生改变，例如，点击北京。
此时，我们点击地址栏的后退按钮，又回到了上海，并且显示内容。原理很简单，就是通过监听”window.onpopstate“，达到了自由切换的作用。
测试时注意事项：
测试需要搭建一个web服务器，以http://host/的形式去访问才能生效，如果你在本地测试以file://这样的方式在浏览器打开，就会出现如下的问题：
|
|
Uncaught SecurityError: A history state object with URL 'file:///C:/xxx/xxx/xxx/xxx.html' cannot be created in a document with origin 'null'. |
因为你要pushState的url与当前页面的url必须是同源的，而file://形式打开的页面是没有origin的，所以会报这个错误。
（三），重构一下昨天的代码
说明几点：
（1），昨天的代码虽然功能是完成了，但是很松散需要通过类的方式进行有效的组织。
（2），Api要粒度化，各负其责，通过“init”初始化方式进项合理的组织。
（3），UI部分做了修改增强了体验和视觉感。
（4），补充相关数据文件，例如：“beijing.data”，内容如下：
{
"content" : "Hi,这里是北京(*^__^*) 嘻嘻……)！"
}
好了！！！以下是完整代码：
1，html源码
<body>
<div class="hd">bbSPA测试页面</div>
<ul id="list" >
<li><a href="#beijing">北京</a></li>
<li><a href="#shanghai">上海</a></li>
<li><a href="#shenzhen">深圳</a></li>
<li><a href="#guangzhou">广州</a></li>
<li><a href="#tianjin">天津</a></li>
</ul>
<div id="content-main"></div>
</body>
·2，css源码
.hd {
height:60px;
line-height: 60px;
color:#f8f8f8;
font-family: "微软雅黑" ;
font-size: 24px;
text-align: center;
background: #49b49b;
}
#list {
border-bottom:2px solid #49b49b;
height:32px;
width:520px;
list-style:none;
}
#list li {
padding:0px;
margin-left:10px;
width:84px;
height:32px;
float : left;
}
#list li a {
padding:0px;
width:84px;
height:32px;
line-height: 32px;
background: #49b49b;
color:#fff;
font-family: arial ;
font-size: 13px;
text-align: center;
display:block;
text-decoration:none;
}
#list li a:hover {
background: #019875;
}
#content-main {
width:556px;
height:220px;
border:2px solid #49b49b;
}
3，Js源码
function bbSPA(elem){
this.elem = elem ;
} ;
var bbSPAProto = bbSPA.prototype ;
bbSPAProto.getElem = function(){
return this.elem ;
} ;
bbSPAProto._getDefaultHash = function(){
return window.location.hash ;
} ;
bbSPAProto._getCurrentHash = function(){
return this.getElem().eq(1).attr("href") ;
} ;
bbSPAProto._parseHash = function(hash){
return hash.split("#")[1] ;
} ;
bbSPAProto._fnPopStateHandler = function(target){
var that = this ;
var elem = target || null ;
var query = this._getDefaultHash() ;
if(!query){
if(elem = this._getElemByIndex(1)){
this._addToHistory(elem.attr("href"),true) ;
this._fnPopStateHandler(elem) ;
}
}
else{
this.getElem().find("li a").each(function() {
if (!elem && $(this).attr("href") == query){
elem = $(this) ;
}
}) ;
if(!elem){
this._fnPopStateHandler(this._getElemByIndex(1)) ;
}else{
elem.trigger("click") ;
}
}
} ;
bbSPAProto._showContent = function(action){
var that = this ;
this._loadContent(this._parseHash(action) + ".data").done(function(data){
that._renderContent(data["content"]) ;
that._addToHistory(action,false) ;
}).fail(function(){
throw new Error("load content error !") ;
}) ;
} ;
bbSPAProto._loadContent = function(url){
return $.ajax({
url : url ,
dataType : "json"
}) ;
} ;
bbSPAProto._getElemByIndex = function(index){
return this.getElem().find("li a").eq(index) ;
} ;
bbSPAProto._renderContent = function(text){
this.getElem().next().text(text) ;
} ;
bbSPAProto._addToHistory = function(hash,noState){
var stateObj = {
hash : hash
} ;
if(noState){
window.history.replaceState(stateObj,"",hash) ;
}
else{
window.history.pushState(stateObj,"",hash) ;
}
} ;
bbSPAProto._isSupportH5History = function(){
return !!("pushState" in window.history) ;
} ;
bbSPAProto.init = function(){
var that = this ;
if(!this._isSupportH5History()){
throw new Error("Not Support H5 History API !") ;
}
this.getElem().on("click","a",function(){
that._showContent($(this).attr("href")) ;
return false ;
}) ;
window.addEventListener("popstate",function(){
that._fnPopStateHandler() ;
},false) ;
this._fnPopStateHandler() ;
} ;
（四），最后总结
（1），理解History Api的使用方式以及具体实例中使用的目的是为了解决哪些问题。
（2），两个核心Api的不同之处在哪。
（3），想想重构后与之前有什么优势，以及是否可以进一步抽象出不同的类，比如“Router”,“History”。
（4），说几句：编程是思想层面的事，实现方式很多，关键是看问题的深度与角度，好了不罗嗦了！！！明天继续！
哈哈哈，本篇结束，未完待续，希望和大家多多交流够沟通，共同进步。。。。。。呼呼呼……(*^__^*)
大熊君学习html5系列之------History API（SPA单页应用的必备------重构完结版）的更多相关文章
- 大熊君学习html5系列之------History API（SPA单页应用的必备）
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 大熊君学习html5系列之------Online && Offline（在线状态检测）
一,开篇分析 Hi,大家好,给大家拜个晚年!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的 ...
- 大熊君学习html5系列之------requestAnimationFrame（实现动画的另一种方案）
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 大熊君学习html5系列之------XHR2（XMLHttpRequest Level 2）
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 大熊君学习html5系列之------WebStorage（客户端轻量级存储方案）
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 大熊君JavaScript插件化开发------（实战篇之DXJ UI ------ Tab功能扩展完结版）
一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得上一篇文章吗.主要讲述了一个“Tab”插件是如何组织代码以及实现的”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方 ...
- 【ASP.NET MVC 5】第27章 Web API与单页应用程序
注:<精通ASP.NET MVC 3框架>受到了出版社和广大读者的充分肯定,这让本人深感欣慰.目前该书的第4版不日即将出版,现在又已开始第5版的翻译,这里先贴出该书的最后一章译稿,仅供大家 ...
- 大熊君JavaScript插件化开发------（实战篇之DXJ UI ------ ItemSelector重构完结版）
一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得上一篇文章吗.主要讲述了以“jQuery的方式如何开发插件”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方式各有利 ...
- 【单页应用巨坑之History】细数History带给单页应用的噩梦
前言 在我们日常的网页浏览中,我们非常喜欢做一个操作:点击浏览器的前进后退在Ajax技术出现后,有些时候前进后退就会给开发者带来困扰,甚至一些开发者试图去干掉History随着Html5的发展,移动端 ...
随机推荐
- windows 2003自动登录的具体步骤
在win2003系统中,使用最多的可能就是远程操作了,关于远程操作的那些事很多用户还是有些迷茫的.如果win2003系统远程重启后,要重新登录系统十分的麻烦,如何才能实现重启后的自动登录呢?让高手告诉 ...
- 【转载】4412开发板嵌入式QtE应用开发环境搭建
本文转自迅为iTOP-4412开发板实战教程书籍:http://topeetboard.com QtE应用需要使用开发工具qtcreator,本文介绍qtcreator-3.2.2的安装和使用.1. ...
- [WPF系列]-参考文献
DataTemplates Data Templating Overview Styling and Templating DataTemplate Class FrameworkTemplate ...
- UVALive - 3942 Remember the Word[树状数组]
UVALive - 3942 Remember the Word A potentiometer, or potmeter for short, is an electronic device wit ...
- 各国货币M2增长对比
自2006至2016年的10年间, 卢布M2增长了3.8倍, 人民币M2增长了3.4倍, 美元M2增长1倍, 欧元/英镑M2增长0.8倍, 日元M2增长0.5倍
- SharePoint 2013技巧分享系列 - 隐藏Blog和Apps左侧导航菜单
企业内部网中,不需要员工创建Blog或者创建,安装SharePoint应用,因此需要在员工个人Web页面需要隐藏Blog或者Apps导航菜单, 其步骤设置如下: 该技巧适合SharePoint 201 ...
- 学习C++.Primer.Plus 11 使用类
1.操作符重载 重载操作符的几个限制: a) 重载的至少有一个操作数是用户定义的类型,这将防止用户为标准类型重载操作符. b) 不能违反操作符原有来的句法规则. c) ...
- HTML5 File API — 让前端操作文件变的可能
前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...
- 通过接口实现JAVA和.NET互调用-JNInterface
使用C#编程多年,也十分感激微软在语言架构.语法糖.编辑器等方面给自己带来的便利.但因为最近工作中有接触到JAVA,渐渐地发现的确像大家说的那样,JAVA的生态很好,要找点什么几乎都有现成的,于是自然 ...
- 覆盖问题：最大覆盖问题（Maximum Covering Location Problem，MCLP）和集覆盖问题（Location Set Covering Problem，LSCP）
集覆盖问题研究满足覆盖所有需求点顾客的前提下,服务站总的建站个数或建 设费用最小的问题.集覆盖问题最早是由 Roth和 Toregas等提出的,用于解决消防中心和救护车等的应急服务设施的选址问题,他们 ...