接下来就是将多页面组合在一个页面上，首先要将每个页面对象化，通过调用对象，来实现页面的切换，比如要从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事件
网友评论