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

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

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

相关文章
|
23天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
124 45
|
4天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
18 2
|
18天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
33 1
|
21天前
|
XML 安全 PHP
PHP与SOAP Web服务开发:基础与进阶教程
本文介绍了PHP与SOAP Web服务的基础和进阶知识,涵盖SOAP的基本概念、PHP中的SoapServer和SoapClient类的使用方法,以及服务端和客户端的开发示例。此外,还探讨了安全性、性能优化等高级主题,帮助开发者掌握更高效的Web服务开发技巧。
|
24天前
|
安全 数据库 开发者
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
35 2
|
1月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
113 3
|
1月前
|
设计模式 测试技术 持续交付
开发复杂Web应用程序
【10月更文挑战第3天】开发复杂Web应用程序
39 2
WK
|
24天前
|
安全 Java 编译器
C++和Java哪个更适合开发web网站
在Web开发领域,C++和Java各具优势。C++以其高性能、低级控制和跨平台性著称,适用于需要高吞吐量和低延迟的场景,如实时交易系统和在线游戏服务器。Java则凭借其跨平台性、丰富的生态系统和强大的安全性,广泛应用于企业级Web开发,如企业管理系统和电子商务平台。选择时需根据项目需求和技术储备综合考虑。
WK
38 0
|
1月前
|
Java PHP
PHP作为广受青睐的服务器端脚本语言,在Web开发中占据重要地位。理解其垃圾回收机制有助于开发高效稳定的PHP应用。
【10月更文挑战第1天】PHP作为广受青睐的服务器端脚本语言,在Web开发中占据重要地位。其垃圾回收机制包括引用计数与循环垃圾回收,对提升应用性能和稳定性至关重要。本文通过具体案例分析,详细探讨PHP垃圾回收机制的工作原理,特别是如何解决循环引用问题。在PHP 8中,垃圾回收机制得到进一步优化,提高了效率和准确性。理解这些机制有助于开发高效稳定的PHP应用。
47 3
|
2月前
|
数据可视化 图形学 UED
只需四步,轻松开发三维模型Web应用
为了让用户更方便地应用三维模型,阿里云DataV提供了一套完整的三维模型Web模型开发方案,包括三维模型托管、应用开发、交互开发、应用分发等完整功能。只需69.3元/年,就能体验三维模型Web应用开发功能!
313 8
只需四步,轻松开发三维模型Web应用
下一篇
无影云桌面