接下来就是将多页面组合在一个页面上,首先要将每个页面对象化,通过调用对象,来实现页面的切换,比如要从index页面跳转到register页面,只需要在js上调用类似以下的语句
indexPage.unit(); //页面卸载
registerPage.init(); //页面装载
下图表示页面卸载以及装载的过程
根据图上的流程,我们创建Page对象,代码如下
Page对象的getDomObj与removeDomObj方法,需要手动重写,不然调用原型函数提前报错。新建Page对象中传入一个id,对应的script里面存放着html。因此将html全部通过script标签全部引入head标签中。如下代码
css代码完全不变,和上一篇的完全相同
在页面的body元素上加入容器,放置页面,如下图
在js上,我们新建4个对象,分别如下代码
indexPage对象
loginPage对象
goalPage对象
最后通过该语句初始化页面
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事件