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

        接下来就是将多页面组合在一个页面上，首先要将每个页面对象化，通过调用对象，来实现页面的切换，比如要从index页面跳转到register页面，只需要在js上调用类似以下的语句

        indexPage.unit();  //页面卸载

        registerPage.init();  //页面装载

下图表示页面卸载以及装载的过程

page装载以及卸载的流程

根据图上的流程，我们创建Page对象，代码如下

Page对象的源代码

        Page对象的getDomObj与removeDomObj方法，需要手动重写，不然调用原型函数提前报错。新建Page对象中传入一个id，对应的script里面存放着html。因此将html全部通过script标签全部引入head标签中。如下代码

对应的index代码

对应的login代码

对应的register代码

对应的goal代码

css代码完全不变，和上一篇的完全相同

在页面的body元素上加入容器，放置页面，如下图

container元素

在js上，我们新建4个对象，分别如下代码

indexPage对象

indexPage的js代码

loginPage对象

loginPage的js代码

registerPage的js代码

goalPage对象

goalPage的js代码

最后通过该语句初始化页面

        indexPage.init(pageContainer);

        成功的将多页面拼凑到了一个页面上，切换的时候不需要等待页面切换之前的白屏。然而却多了很多步骤，需要手动的去清除dom与解绑事件。我们需要新的一个对象去管理Page对象，把无关于业务逻辑的事情都抽离出来，让Page更专注于业务逻辑。

总结：很多时候，可以通过面向对象，然后通过操作对象来对代码以及业务逻辑进行更好的管理。在这里，可以不采用Page对象同样可以进行同样的操作，为了后续业务的增加，导致页面的不断增加，通过管理对象会让开发更加省力。如何创建的对象模板，需要开发者自己抽出流程的共同点，比如画一张流程图是非常有必要的，然后根据流程图进行实现过程。

后续更新：下一篇将引入新的对象，用于管理Page对象，把除了业务逻辑以外的操作转移到该对象去实现，比如这里的解除事件，清理dom对象以及后续的更改title， history，过场动画等。

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

---

原生开发移动web单页面(step by step)1——传统页面的开发

原生开发移动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对象