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

简介:        为了让Page对象更专注于业务逻辑,将其它的操作转移出去,因此引入了App对象。App对象起到了管理多个Page对象的作用。有了App对象后, Page对象只需要负责渲染页面以及绑定事件,其它的都让App自动帮Page解决。

       为了让Page对象更专注于业务逻辑,将其它的操作转移出去,因此引入了App对象。App对象起到了管理多个Page对象的作用。有了App对象后, Page对象只需要负责渲染页面以及绑定事件,其它的都让App自动帮Page解决。类似以下代码:

     首先创建一个App对象

     var app = new App();

     再创建一个Page对象,只需要重写getDomObj方法以及相关的事件方法。然后调用

     var indexPage = new Page();

     indexPage.getDomObj = function () {};

     相关事件的方法定义(省略),最后通过一下代码切换

     app.render(indexPage);

     启用app.render方法后,将会自动卸载之前的页面,将当前的页面初始化插入页面中,从而简化了开发流程。App对象的代码如下

App的对象的代码

        让App对象更好的管理Page对象,改造Page对象,新增_dispose和_initialize方法,分别指向装载和卸载操作,Page构造函数如下代码

Page对象的代码

        其中domList与eventList存放着对应dom元素以及事件方法,通过规范化的数据结构,用于自动化绑定以及卸载。

_dispose和_initialize方法的源代码

         这里是卸载与装载的实现,分别调用了以下方法

         _removeEventListeners(): 移除所有的挂在页面的事件

        _removeDom() : 清除dom元素

        getDomObj(container): 缓存元素以及缓存事件存于domList和eventList     中,然后通过_addEventListener()方法一起绑定,需要开发者重写

        _addEventListeners(); 将事件绑定到页面上。

        这里的命名规则,内部使用的方法以下划线开头,提供用户实现的以驼峰命名。


       以下为domList与eventList存储数据的格式

       domList为简单对象,以key-value的格式, value代表dom元素,通过attachDom方法来存储,比如page.attachDom("#id", "id", dom);  id为key, value为该代码document.querySelector("#id")获得的元素

        eventList是一个数组,每个元素都是一个对象eventObj, eventObj拥有key字段和eventArray字段, key字段与domList的key对应,eventArray是一个数组,存储绑定事件的详情,每个事件详情都有method字段代表事件类型, eventArray字段代表事件函数的数组,每个事件函数都有函数本身,以及事件的传播方向(冒泡或者捕获),还有一个自定义的与bind函数,用于把事件函数的作用域转移到该Page对象,从而达到更好的封装作用。通过attachEvent方法进行存储事件。

         以下为attachDom与attachEvent方法的代码定义

attachDom方法的代码
attachEvent方法的代码

attachEvent事件中,调用了_getEvent方法,主要起到防止多次绑定完全相同的事件。

getEvent方法的代码

         定义完数据结构以及数据的存储方式,下面就是关于数据操作处理,以下是_remvoeDom方法, _addEventListeners方法以及_removeEventListener方法的定义

removeDom方法的代码
addEventListeners方法的代码
removeEventListeners方法的代码

        进行代码重写之前,引入两个常用辅助函数,分别挂在App函数下面。

extend方法的代码
创建Page对象的工厂函数

        预备代码完毕, 接下开始重写页面代码, 这里html以及css完全不变, 只要更改js代码

indexPage的js代码
loginPage的js代码
registerPage的js代码
goalPage的js代码

       最后初始化app

初始化app代码

        总结:引入了App对象管理Page对象是有必要的,可以让使用者更专注自己的习惯来编写代码。与现实中类似的,既然有管理者,被管理者必须要服从管理,因此对于Page对象做了很多相应的更改。这篇的代码有点多,但是这是做单页面的核心部分,通过代码的分离,可以为以后更好的维护打下坚实的基础。

        后续更新:下一篇将引入tap事件和slide事件,这两个事件是移动端非常常用的,通过tap事件来代替click事件, slide事件用于简单的手势操作。

案例链接


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

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

原生开发移动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
|
24天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
24天前
【Azure App Service】PowerShell脚本批量添加IP地址到Web App允许访问IP列表中
Web App取消公网访问后,只允许特定IP能访问Web App。需要写一下段PowerShell脚本,批量添加IP到Web App的允许访问IP列表里!
|
21天前
|
机器人
布谷直播App系统源码开发之后台管理功能详解
直播系统开发搭建管理后台功能详解!
WK
|
24天前
|
安全 Java 编译器
C++和Java哪个更适合开发web网站
在Web开发领域,C++和Java各具优势。C++以其高性能、低级控制和跨平台性著称,适用于需要高吞吐量和低延迟的场景,如实时交易系统和在线游戏服务器。Java则凭借其跨平台性、丰富的生态系统和强大的安全性,广泛应用于企业级Web开发,如企业管理系统和电子商务平台。选择时需根据项目需求和技术储备综合考虑。
WK
38 0
|
25天前
|
JavaScript 前端开发 Java
SpringBoot_web开发-webjars&静态资源映射规则
https://www.91chuli.com/ 举例:jquery前端框架
17 0
下一篇
无影云桌面