原生开发移动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应用

上一篇:Jupyter 服务开发指南


下一篇:Json.Net系列教程 2.Net类型与JSON的映射关系