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

相关文章
|
19天前
|
监控 JavaScript 前端开发
《理解 WebSocket:Java Web 开发的实时通信技术》
【4月更文挑战第4天】WebSocket是Java Web实时通信的关键技术,提供双向持久连接,实现低延迟、高效率的实时交互。适用于聊天应用、在线游戏、数据监控和即时通知。开发涉及服务器端实现、客户端连接及数据协议定义,注意安全、错误处理、性能和兼容性。随着实时应用需求增加,WebSocket在Java Web开发中的地位将更加重要。
|
5天前
|
JSON Java fastjson
Spring Boot 底层级探索系列 04 - Web 开发(2)
Spring Boot 底层级探索系列 04 - Web 开发(2)
15 0
|
5天前
|
安全 编译器 PHP
PHP 8.1版本发布:引领Web开发新潮流
PHP编程语言一直是Web开发的主力军,而最新发布的PHP 8.1版本则为开发者们带来了更多创新和便利。本文将介绍PHP 8.1版本的主要特性,包括更快的性能、新的语言功能和增强的安全性,以及如何利用这些功能来提升Web应用程序的质量和效率。
|
8天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
8天前
|
前端开发 数据挖掘 API
使用Python中的Flask框架进行Web应用开发
【4月更文挑战第15天】在Python的Web开发领域,Flask是一个备受欢迎的轻量级Web框架。它简洁、灵活且易于扩展,使得开发者能够快速地构建出高质量的Web应用。本文将深入探讨Flask框架的核心特性、使用方法以及在实际开发中的应用。
|
11天前
|
C++
深入理解 uni-app 页面生命周期(三):onHide vs onUnload
深入理解 uni-app 页面生命周期(三):onHide vs onUnload
|
17天前
|
安全 前端开发 Java
Java Web开发知识点学习总结
Java Web开发涉及Java基础、Servlet、JSP、数据库操作(SQL+JDBC)、MVC设计模式、Spring框架、Hibernate ORM、Web服务(SOAP&RESTful)、安全认证(HTTP Basic/Digest/OAuth)及性能优化(缓存、异步、负载均衡)。
17 3
|
20天前
|
XML JSON JavaScript
使用JSON和XML:数据交换格式在Java Web开发中的应用
【4月更文挑战第3天】本文比较了JSON和XML在Java Web开发中的应用。JSON是一种轻量级、易读的数据交换格式,适合快速解析和节省空间,常用于API和Web服务。XML则提供更强的灵活性和数据描述能力,适合复杂数据结构。Java有Jackson和Gson等库处理JSON,JAXB和DOM/SAX处理XML。选择格式需根据应用场景和需求。
|
设计模式 Web App开发 存储
移动 Web 开发的10个优秀 JavaScript 框架
选择正确的 JavaScript 框架,对于开发移动 Web 应用程序是至关重要的,也是移动应用程序开发的一项重要任务。开发人员可以使用框架实现的功能高效地达到他们的开发目标。这些预实现的组件采用优秀的设计模式和最佳实践,促进应用程序以标准化的方式开发。最重要的是,它让开人员在开发过程中得心应手。
309 0
移动 Web 开发的10个优秀 JavaScript 框架
|
Web App开发 移动开发 JavaScript
【今日推荐】移动 Web 开发的10个最佳 JavaScript 框架
  选择正确的 JavaScript 框架,对于开发移动 Web 应用程序是至关重要的,也是移动应用程序开发的一项重要任务。开发人员可以使用框架实现的功能高效地达到他们的开发目标。这些预实现的组件采用优秀的设计模式和最佳实践,促进应用程序以标准化的方式开发。
1944 0