增加了页面切换效果后，再配合手势以及按键，让单页面app更像一个原生app， 然而却引来了一个新的问题， 通过浏览器自带的前进后退无法有选择的采取动画效果。因为在popstate的时候，都是采用一种动画。如果能够在popstate事件中能够知道当前页面以及要更换的页面的位置，采取相应的动画的，那就可以解决这个问题。由于浏览器的history的栈无法读取， 我们就创建一个History对象， 执行的过程与浏览器的原生行为一致， 通过取当前页面在创建的History的位置， 以及它的前后的页面与要切换的页面进行比较位置关系。
通过第六篇已经了解浏览器原生的history栈的原理。这里创建一个History对象，构造函数代码如下
function History() {
this.history = [];
this.index = null;
}
history的数组代表浏览器中的页面的url， index表示当前页面的url的索引值。
对应的pushState方法如下
pushState: function (str) {
if (this.index !== null) {
var len = this.history.length;
var nextIndex = this.index + 1;
this.history.splice(nextIndex, this.len - nextIndex, str);
this.index = nextIndex;
}
else {
this.history.push(str);
this.index = 0;
}
return str;
},
replaceState的方法如下
replaceState: function (str) {
if (this.index) {
this.history.splice(this.index, 1, str);
}
else {
this.history.push(str);
this.index = 0;
}
return str;
},
这两个方法完全照浏览器的原理而创建的
对应的还有back以及forward， 在单页面中， 原生浏览器history的go方法不常用，因此不实现， back方法和forward方法代码如下:
back: function () {
if (this.index === null) return "";
return this.history[this.index === 0 ? 0 : --this.index];
},
forward: function () {
if (this.index === null) return "";
var len = this.history.length;
return this.history[this.index === len - 1 ? len - 1 : ++this.index];
},
返回history索引值的url字符串
接着实现获取当前索引值前后位置的url值，代码如下:
getSurround: function () {
var len = this.history.length;
if (this.index === null) {
return {
next: "",
prev: ""
};
}
else if (this.history.length === 1) {
return {
next: "",
prev: ""
};
}
else if (this.index === 0) {
return {
next: this.history[1],
prev: ""
};
}
else if (this.index === len - 1) {
return {
next: "",
prev: this.history[len - 2]
}
}
else {
return {
next: this.history[this.index + 1],
prev: this.history[this.index - 1]
}
}
}
这里的情况比较多，不过思路很简单， 接着修改App对象，将History对象组合在App对象中，App对象的构造函数加入一个history，放置History对象
function App(options) {
options = options || {};
App.extend(options, {
appClass: "app",
changeClass: "app-change",
backClass: "app-back",
changeState: "change-state",
pageInReverse: "page-in-reverse",
pageOutReverse: "page-out-reverse",
pageIn: "page-in",
pageOut: "page-out"
});
this.options = options;
this.currentPage = null;
this.staticPage = null;
this.pageContainer = null;
this.routeObj = {};
this.history = new History();
}
然后修改_attachHistory方法，将对应的方法在自定义的history对象中补上，代码如下:
_attachHistory: function (page, isBack) {
var newUrl = page.url;
if (isBack) {
history.replaceState({data: newUrl}, "", newUrl);
this.history.replaceState(newUrl);
}
else {
history.pushState({data: newUrl}, "", newUrl);
this.history.pushState(newUrl);
}
},
接着修改initialize方法中的popstate事件，因为这里不仅有history操作，还要分别获取当前页面的前后页面的url，代码如下:
window.addEventListener("popstate", function (ev) {
if (ev.state && ev.state.data) {
var url = ev.state.data;
var page = that.routeObj[url];
var urlObj = that.history.getSurround();
if (urlObj.prev == url) {
that.history.back();
that.isRenderBack = true;
}
else if (urlObj.next === url) {
that.history.forward();
that.isRenderBack = false;
}
that._renderPage(page);
}
}, false);
首先获取当前页面的前后的url， 判断下一个即将渲染的页面，如果是后退操作， 自定义的history执行back方法，反之执行前进方法， 然后设置不同的动画方式。
当然这里有个特殊情况, 就是如果当前页面的前后页面的url都相同， 然而这个情况在正常情况下可以完全被避免的。 假如在a页面，pushstate到b页面，然后在pushstate到a页面，接着执行history.back()操作。这一系列的操作方式是可以直接用a页面， pushstate到b页面，在执行history.back(), 接着执行history.forward()来代替。
除了前后切换的效果之外，还有一种就是直接替换完全不变，相当于第二章那种的，html完全替换， 因此引入了renderInstance方法，因此为了修改代码如下:
renderBack: function (page, isBack) {
this.isRenderBack = true;
this._render(page, isBack);
},
render: function (page, isBack) {
this._render(page, isBack);
},
renderInstance: function (page, isBack) {
this._render(page, isBack, true);
},
_render: function (page, isBack, instance) {
if (typeof page === "string") page = this.routeObj[page];
if (page === this.currentPage) return;
this.routeObj[page.url] = page;
this._attachHistory(page, isBack);
this._renderPage(page, instance);
this.pageContainer.scrollTop = 0;
},
_renderPage: function (page, isInstance) {
if (this.currentPage) this.currentPage._dispose();
this.currentPage = page;
page.app = this;
var that = this;
document.title = page.title;
page.render(function (html) {
if (isInstance) {
var changeDom = that.changeDom;
changeDom.innerHTML = html;
page._initialize(changeDom);
}
else {
var backDom = that.backDom;
backDom.innerHTML = html;
that._replaceDom();
page._initialize(backDom);
}
});
},
原理非常的的简单，通过一个布尔值来选择那种切换形式。
这里还可以通过增加方法，或者在初始化中传入不同的动画类来切换动画类型。让动画变得非常的容易。
这一篇就是为多页面切换的最后一篇， 做到了这篇后，做到了单页面的基础。页面切换的动态效果是单页面和多页面的最大区别，多页面是无法做到的。虽然这里的代码非常简单，App对象， History对象和Page对象加起来才500行代码有余， 却让单调的多页面改成交互优雅的单页面， 这里虽然只有4个简单的页面， 但是这一套逻辑可以为转化任意多个页面的项目，把它转化为你想要的单页面。 现在正是你实践的时候，选一个自己做过的多页面，或者随便想一个自己想做的， 可以按照1-8篇的的顺序，把它们改造为单页面。改造的效果会让你得到真正的收获。
总结：单页面的灵活性增加了开发的无限玩法， 不变的是css， html和js基础， 不用多增加任何的其它的知识就能做一个优质的单页面。如果你已经通过上面的教程改编过了一个单页面， 你觉得你自己可以把它引入项目中了， 事实告诉你， 离真正要做成一个项目， 现在才刚刚开始，后面还有很多坑需要填补。在多页面开发时，你不用关心一个页面切换到另外一个页面后， 之前的页面怎么办， 然而单页面却要异常关心，你需要把之前页面的无关数据（包括组件）给清理了，防止垃圾累计导致页面的卡顿以及移动端电量的消耗， 另外就是异步的操作， 单页面频繁使用异步的操作， 比如ajax与indexdb操作， 一个微小的异步操作就会带来整个应用的崩溃。 因此这里推荐每个Page页面都应该是单独的个体，它与其它页面没有任何关系，它只能通过App对象来选择渲染与否。
后续更新：之前的篇章都是静态的页面，接下来就要转化为动态的，通过ajax与后端交互数据，然后更新前端显示的信息。在这之前， 需要给之前创建的服务器加上POST应答的功能。
请用移动设备打开该案例
案例链接
原生开发移动web单页面(step by step)1——传统页面的开发
原生开发移动web单页面(step by step)2——Page对象
原生开发移动web单页面(step by step)3——App对象
原生开发移动web单页面(step by step)4——tap事件与slide事件
原生开发移动web单页面(step by step)5——nodejs服务器的搭建
原生开发移动web单页面(step by step)6——history api应用
原生开发移动web单页面(step by step)7——页面切换动画
网友评论