原生开发移动web单页面(step by step)6——history api应用

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

原生开发移动web单页面(step by step)6——history api应用

真五花肉 2018-09-04 18:44:00 浏览820
展开阅读全文

以上几篇的内容成功的将多页面合成到单页面上,然而还是有很多区别的, 多页面切换的时候,通过浏览器的自带后退前进键可以进行导航,然而到目前为止,是没有办法进行的导航的,这一篇主要是引入了这个功能。

在进入正题之前,我们还需要对整体做一下调整, 一般情况下, 一个页面分为两个部分,一部分是静态部分,只要起到布局作用,还有一部分为改变部分,主要用来切换页面的作用。在布局中设置一块改动的区域,放置动态页面, 不同的动态页面调用静态部分提供的方法来调整不同的布局。 这样的结构如下图所示。

界面的布局

这里的做法就是让静态布局部分和动态部分都是Page实例对象,通过App的实例对象初始化并渲染首页,如以下代码:

app.initialize(staticPage, indexPage);

切换页面的代码与之前的一样, 介绍了这个后,接下来介绍history api。

浏览器history记录是类似一个数组, 通过一个索引值代表当前的页面,如果按后退键,将会索引值减一, 跳到之前的页面,按前进键则相反,如下图所示。


history栈

浏览器history api提供了两个方法来操作这个历史数据的数组: pushState和replaceState。 pushState方法的作用为在当前页面所在的索引值插入一个新的记录,然后移除所有后面的记录,与用户单击一个链接大致相同, 并将历史的索引值转到新的记录。如下图所示


pushState操作

replaceState方法的作用为替换当前的记录,不影响历史记录数组中其它数据的更改,如下图所示


replaceState操作

当点击浏览器的前进后退键的时候,就会触发popstate的事件, 通过监听事件获取到的历史数组中状态的改变而动态更改页面,调用history的方法也会触发popstate事件。
下面介绍了如何把它集成到App对象中,App构造函数的代码如下

function App() {
    this.currentPage = null;
    this.staticPage = null;
    this.pageContainer = null;
    this.routeObj = {};
}

staticPage存放静态布局页面,可以调用其方法更改外部布局
pageContainer是可变页面的容器
routeObj对象放置页面对象,key代表页面的url, value为Page对象
nitialize方法代码如下

initialize: function (staticPage, indexPage) {
    staticPage = this.staticPage = staticPage || App.emptyPage;
    var that = this;

    staticPage.render(function (html) {
        var body = document.body;
        body.insertAdjacentHTML("afterbegin", html);
        staticPage._initialize(body);
        if (staticPage.domList.pageContainer) {
            that.pageContainer = staticPage.domList.pageContainer;
        }
        else {
            console.error("staticPage must have pageContainer");
        }
        that.render(indexPage, true);

        window.addEventListener("popstate", function (ev) {
            if (ev.state && ev.state.data) {
                var url = ev.state.data;
                var page = that.routeObj[url];
                that._renderPage(page);
            }
        }, false);
    });
},

这里需要静态布局页面有个PageContainer,让动态页面放置。
_attachHistory方法的代码如下

_attachHistory: function (page, isBack) {
    var newUrl =  page.url;
    
    if (isBack) {
        history.replaceState({data: newUrl}, "", newUrl);
    }
    else {
        history.pushState({data: newUrl}, "", newUrl);
    }
},

_renderPage方法的代码如下

_renderPage: function (page) {
    if (this.currentPage) this.currentPage._dispose();
    this.currentPage = page;
    page.app = this;

    document.title = page.title;
    var pageContainer = this.pageContainer;
    page.render(function (html) {
        pageContainer.innerHTML = html;
        page._initialize(pageContainer);
    });
}

修改Page构造函数与App.createPage函数
Page构造函数如下

function Page(title, url) {
    this.title = title;
    this.url = url;
    this.domList = {};
    this.eventList = [];
}

App.createPage代码如下

App.createPage = function (title, url, options) {
    var page = new Page(title, url);
    App.extend(page, options);
    return page;
}

然后对应创建一个App.emptyPage, 代码如下

App.emptyPage = App.createPage("", "", {
    render: function (fn) {
        fn("<div class='pageContainer'></div>");
    },
    getDomObj: function (dom) {
        this.attachDom(".pageContainer", "pageContainer", dom);
    }
});

修改entry.js, login.js, register.js和goal.js,定义各自Page实例对象的时候,增加url的字段,
分别为/serve/entry, /serve/login, /serve/register和/serve/goal, 以serve开头的,是为了页面刷新的时候,服务器检索到url以/serve开头,然后跳转到首页。

更改提供后台服务页面的serverFile.js修改exports.getFile方法,代码如下

exports.getFile = function (req, res, key, root) {
    if (key.indexOf("/public/")  === 0) {
        serveFile(req, res, root + key, root);
    }
    else if (key.indexOf("/serve") === 0) {
        serveFile(req, res, root + "/public/serve/index.html", root);
    }
    else {
        res.statusCode = 404;
        res.end("404");
    }
}

修改index.js的代码,如下

var app = new App();
app.initialize(null, entryPage);

如果想要刷新跳到当前页面,那就需要在类似在sessionStorage的存储机制中存放当前的页面url,然后在初始化的时候,将entryPage替换为该url的page对象即可。

总结: 加入history api后,页面表现和普通的多页面相差无几了,可以跳转, 可以后退。 改变页面后title和url也随着改变,刷新直接跳到首页也可以跳到当前页。到了这篇为止,单页面改造完毕,然而,单页面的灵活性远非多页面可比的, 如果处理得到,复杂性却不会增加很多。 接下来的篇章就是为了让单页面更加出彩, 甚至达到原生app的水准。

后续更新:下一篇将重点介绍css3的animation, 配合页面切换, 让页面切换动态化。css3的animation模块在后面的部分使用的非常频繁,为理解后面的代码做一下基础。

案例链接


原生开发移动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服务器的搭建

网友评论

登录后评论
0/500
评论