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

增加了页面切换效果后，再配合手势以及按键，让单页面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——页面切换动画

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

你可能感兴趣的:(原生开发移动web单页面(step by step)8——History对象)