详细教程 - 从零开发 Vue 鸿蒙harmonyOS应用 第六节(js版) ——模块化设计实现复杂页面

        

        随着HarmonyOS生态的日渐完善,越来越多的厂商加入鸿蒙系统应用开发的行列。然而从其他系统转到鸿蒙开发,很多开发者还是需要一个适应的过程,特别是面对比较复杂的页面,应该如何合理进行模块化拆分是一个难点。

        本文将通过一个实例,来分析如果采用模块化的方式实现一个包含丰富内容和交互的复杂页面。

一、复杂页面的痛点

        随着智能设备性能的不断提升,我们开发的App页面也日益复杂,包含更多的功能模块和交互需求。直接在一个页面文件中开发所有功能,很容易造成以下问题:

  • 代码量庞大,一个文件上千行代码,极其不利于后续维护
  • 各模块功能高度耦合,测试和迭代非常不方便
  • UI和交互修改会影响到多个模块,冲突概率大

所以我们迫切需要采用模块化的方式来开发复杂页面。

二、页面模块化拆分


1. 复杂页面概览


        我们假设需要开发一个旅游摄影社区的 App,其中有一个发帖页面,包含选择图片、拍摄图片、输入标题和正文、添加地点等多个组件,同时页面交互也非常复杂。

先来看下简单的页面结构,页面可以明显划分为多个功能模块:

  1. 标题输入模块
  2. 内容输入模块
  3. 图片模块
    1. 图片列表
    2. 拍照或从相册选择
  4. 地点模块
  5. 提交按钮

这已经是一个比较复杂的页面了,如果全部写在一个 .hml 文件中,会非常难以维护。

所以我们需要进行模块化拆分。

2.模块化拆分实现


鸿蒙提供了 <import> <include> 标签来进行模块化:

比如我们创建 title-input.hmlcontent-input.hml等组件文件,然后在页面中导入:

<!-- index.hml --><div class="page"><import src="title-input.hml" /><import src="content-input.hml" /><image src=""></image><text class="location"></text><button type="primary">发布</button></div>

这样就实现了模块的解耦。

3. 小组件之间的数据交互

视图拆分完成后,我们还需要thinking数据交互问题。这就需要用到观察者模式

在JS Ability中我们可以定义观察方法,小组件可以调用这些方法主动通知 Ability 数据变化,完成跨组件的数据流转,比如:

// index.js
export default {data: {title: ""  },updateTitle(newTitle) {this.title = newTitle;}  
}// title-input.js
import ability from "../index.js";function onTitleChange(newTitle) {ability.updateTitle(newTitle); 
}

        这样title-input组件就可以通过updateTitle方法来改变index页面的数据。       

        标题和内容输入组件可以在输入时主动调用这些方法更新ability中保存的数据,这样就实现了跨组件通信。

        页面提交按钮的点击事件,也可以直接获取ability上已经更新过的最新数据后处理。

        通过以上方法,我们实现了页面的模块化拆分,并处理了组件之间的数据交互问题。这样代码结构清晰,可维护性也大幅提高。

三、页面数据管理

复杂页面中,不同模块都可能改变ABILITY中的数据。为了规范数据流向,我们通常会设置一些数据管理规则:

  1. 所有页面数据只能通过Ability管理,不能由单个组件自己保存
  2. 数据更新必须通过Ability暴露出来的方法,不能私自修改其它数据
  3. 对于不确定的中间状态数据,应封装为JS函数内部变量,不暴露到ABILITY中

按照这些原则,可以保证数据流向清晰,修改 predictable。

四、总结

        模块化设计是开发复杂页面的关键。本文通过一个实例,介绍了如何利用鸿蒙的import/include以及观察者模式实现模块化拆分,并处理好组件间的数据交互问题。

        模块化开发能大幅提高代码质量,如果你在鸿蒙应用开发过程中也遇到类似复杂页面的困扰,不妨借鉴本文的解决方案。

欢迎大家在评论区分享你的模块化设计经验!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/231453.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flink系列之:Table API Connectors之JSON Format

Flink系列之&#xff1a;Table API Connectors之JSON Format 一、JSON Format二、依赖三、创建一张基于 JSON Format 的表四、Format 参数五、数据类型映射关系 一、JSON Format JSON Format 能读写 JSON 格式的数据。当前&#xff0c;JSON schema 是从 table schema 中自动推…

微服务组件Gateway的学习

Gateway Gateway基础概念Gateway简单使用Gateway路由工厂Gateway过滤器Gateway跨域配置 Gateway基础概念 API网关指系统的统一入口&#xff0c;它封装了应用程序的内部结构&#xff0c;为客户端提供统一服务&#xff0c;一些与业务本身功能无关的公共逻辑&#xff0c;可以在这…

WTN6系列语音芯片:PWM与DAC音频输出在PCB设计中的优势

随着科技的飞速发展&#xff0c;语音芯片在电子产品中的应用越来越广泛。其中&#xff0c;唯创知音的WTN6系列语音芯片凭借其卓越的性能和多样的功能&#xff0c;受到了市场的热烈欢迎。特别是其支持PWM和DAC两种音频输出方式的特点&#xff0c;使得工程师在PCB设计时能够更加灵…

【个人版】SpringBoot下Spring-Security自定义落地篇【四】

SpringBoot Spring-Security 背景&#xff1a; 上篇文章在源码读取的基础上&#xff0c;根据自身代码习惯及需求&#xff0c;总结了一个自定义简单落地版本。后来在看到松哥写的博文&#xff08;不太爱看官网&#xff09;&#xff0c;发现还有新的变种模式&#xff0c;虽然整…

mysql使用全文索引+ngram全文解析器进行全文检索

表结构&#xff1a;表名 gamedb 主键 id 问题类型 type 问题 issue 答案 answer 需求 现在有个游戏资料库储存在mysql中&#xff0c;客户端进行搜索&#xff0c;需要对三个字段进行匹配&#xff0c;得到三个字段的相关性&#xff0c;选出三个字段中相关性最大的值进…

【MYSQL】-库的操作

&#x1f496;作者&#xff1a;小树苗渴望变成参天大树&#x1f388; &#x1f389;作者宣言&#xff1a;认真写好每一篇博客&#x1f4a4; &#x1f38a;作者gitee:gitee✨ &#x1f49e;作者专栏&#xff1a;C语言,数据结构初阶,Linux,C 动态规划算法&#x1f384; 如 果 你 …

在Idea中创建基于工件的本地服务

目录 1、创建基于工件的Tomcat服务器&#xff1a; 2、修改名称&#xff1a; 3、修改服务器项&#xff1a; 4、部署项 5、最后记得点右下角的【应用】和【确定】保存。 1、创建基于工件的Tomcat服务器&#xff1a; 运行->编辑配置->【Tomcat服务器】->本地 2、修…

前端框架如何帮助开发者构建应用程序?

目录 前言 1.项目简介 2. 平台特性 2.1 构架特性 2.2 功能特性 3. 整体架构 4. 技术栈 平台的开放性&#xff1a; 平台高拓展性&#xff1a; 5. 基础功能及搭建 5.1 代码生成器 5.2 工作流程 5.3 门户设计 5.4 大屏设计 5.5 报表设计 5.6 第三方登录 5.7 多租…

ceph更换硬盘

ceph -s //检查故障 k8s70132:~$ ceph -scluster:id: d10b3028-b78d-4b23-bacb-ca26c0a35c99health: HEALTH_WARN1 daemons have recently crashedservices:mon: 5 daemons, quorum k8sceph70201,k8sceph70202,k8sceph70203,k8sceph70204,k8sceph70205 (age 4d)mgr: k8sc…

vscode 同步插件

vscode 扩展商店链接 https://marketplace.visualstudio.com/vscode settings sync 插件

apache shiro 反序列化漏洞解决方案

apache shiro 反序列化漏洞解决方案 反序列化漏洞解决方案产生原因解决方案1&#xff1a;1.升级shiro至最新版本1.7.1解决方案2&#xff1a;修改rememberMe默认密钥&#xff0c;生成随机密钥。 反序列化漏洞解决方案 反序列化漏洞介绍 序列化&#xff1a;把对象转换为字符串或…

opencv、pillow和matplotlib的区别

参考文章&#xff1a;Python学习小技巧——opencv、pillow和matplotlib的区别_pillow和opencv区别-CSDN博客 1 概念的比较&#xff1a; opencv &#xff08;1&#xff09;默认不支持中文文件名 &#xff08;2&#xff09;数据为numpy&#xff0c;维度&#xff1a;高&#xff…

每日一练,蓝桥杯

蓝桥杯---链表类型题&#xff1a; 小王子排序 这一题要求用到单项列表来解决。也可以使用跨行接受解决&#xff0c;事不宜迟&#xff0c;直接上代码。 第一个&#xff0c;我使用的是链表法解决问题。 一.创建链表。 class Node:def __init__(self,data):self.data datase…

图片速览 PoseGPT:基于量化的 3D 人体运动生成和预测(VQVAE)

papercodehttps://arxiv.org/pdf/2210.10542.pdfhttps://europe.naverlabs.com/research/computer-vision/posegpt/ 方法 将动作压缩到离散空间。使用GPT类的模型预测未来动作的离散索引。使用解码器解码动作得到输出。 效果 提出的方法在HumanAct12&#xff08;一个标准但小规…

AWS-WAF-CDN基于速率rate的永久黑名单方案(基于lambda实现)

参考方案&#xff08;有坑&#xff09;&#xff0c; 所以产生了这篇博客&#xff1a; 点击跳转 1. 部署waf &#xff08;有则跳过&#xff09; 必须存在一个rate速率规则&#xff0c;后面的方案堆栈要用 新建rate速率规则 关联cdn资源 2.部署堆栈 (美国东部 (弗吉尼亚北部 …

短视频账号剪辑矩阵系统源码技术3年自研开发框架

短视频账号剪辑矩阵系统源码技术3年自研开发框架&#xff0c;这个市场截至到现在基本上违规开发的&#xff0c;没有正规接口开发的&#xff0c;基本上都已经筛选完了&#xff0c;目前各位技术者公司想要考察的话&#xff0c;只需要甄别3方面即可 1.剪辑是不是自己核心研发的&a…

正则表达式:简化模式匹配的利器

正则表达式&#xff1a;简化模式匹配的利器 一、正则表达式简介1.1 正则表达式介绍1.2 正则表达式使用场景 二、正则表达式语法2.1 正则表达式元字符和特性2.2 正则表达式常用匹配 三、正则表达式实战3.1 常见的正则表达式用法3.2 正则表达式的过滤用法3.3 正则表达式的代码用法…

Hadoop Single Node Cluster的安装

Hadoop Single Node Cluster的安装 安装JDK查看java -version更新本地软件包安装JDK查看java安装位置 设置SSH无密码登录安装hadoop下载安装设置hadoop环境变量修改hadoop配置设置文件设置core-site.xml设置YARN-site.xml设置mapred-site.xml设置HDFS分布式文件系统创建并格式化…

关于opencv,sitl仿真环境等问题报错解决

multirotor The first day ——12.10 1.install vmware-workstation and ubuntu swap sources and 换输入法 2.learn git github关联远程仓库 3.install and use Typora Git codemeaningmkdir test创建目录cd test进入目录git init初始化仓库ls &#xff1b;ls -ah查看目…

华为配置OSPF与BFD联动示例

组网需求 如图1所示&#xff0c;SwitchA、SwitchB和SwitchC之间运行OSPF&#xff0c;SwitchA和SwitchB之间的交换机仅作透传功能。现在需要SwitchA和SwitchB能快速感应它们之间的链路状态&#xff0c;当链路SwitchA-SwitchB发生故障时&#xff0c;业务能快速切换到备份链路Swi…