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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

真五花肉 2018-09-09 21:58:00 浏览839
展开阅读全文

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

网友评论

登录后评论
0/500
评论