原生开发移动web单页面(step by step)8——History对象

增加了页面切换效果后，再配合手势以及按键，让单页面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应答的功能。

请用移动设备打开该案例
案例链接

作者：真五花肉
链接：https://www.jianshu.com/p/726e476d0e68