前端开发的设计思路【精炼】(含数据结构设计、组件设计)

数据结构设计

  • 用数据描述所有的内容
  • 数据要结构化,易于程序操作(遍历、查找),比如数组、对象、对象为元素构成的数组(每个元素记得设置唯一的 id 属性,以便对元素进行删改操作)
  • 数据要可扩展,以便增加新的功能

在这里插入图片描述
在这里插入图片描述

  • list 数组存储所有待办事项,方便增加删除元素和排序
  • 每个待办事项用对象描述,方便增加删除属性
  • id 属性确保事项唯一,数据类型为数字(也可以设计成字符串)
  • title 属性描述事项内容,数据类型为字符串
  • completed 属性描述事项是否完成,数据类型为布尔值

组件设计

  • 从功能上拆分层次
  • 尽量让组件原子化(每个组件只具有一个功能)
  • 容器组件(只管理数据)&UI组件(只显示视图)
    在这里插入图片描述
  • 最外层的红框是整个父组件
  • 父组件内分蓝框子组件新增数据,绿框子组件展示列表
  • 绿框子组件内又有孙组件展示每个事项
  • 父组件(红框)为容器组件,管理所有的数据(声明和操作数据【响应事件】)
  • 其他组件都是UI 组件,渲染数据展示视图

实战范例 – 购物车

数据结构设计

在这里插入图片描述

  • 购物车 cartList 中只需要存商品的 id 和数量即可!

组件设计

在这里插入图片描述

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

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

相关文章

EtherCAT总线掉线如何自动重启

EtherCAT通信如果是从站掉线我们可以勾选上自动重启功能如下图所示: 1、自动重启从站 待续.....

MacOS使用PhpStorm+Xdebug断点调式

基本环境: MacOS m1 PhpStorm 2024.1 PHP7.4.33 Xdebug v3.1.6 1、php.ini 配置 [xdebug] zend_extension "/opt/homebrew/Cellar/php7.4/7.4.33_6/pecl/20190902/xdebug.so" xdebug.idekey "PHPSTORM" xdebug.c…

【数组】Leetcode 452. 用最少数量的箭引爆气球【中等】

用最少数量的箭引爆气球 有一些球形气球贴在一堵用 XY 平面表示的墙面上。墙面上的气球记录在整数数组 points ,其中points[i] [xstart, xend] 表示水平直径在 xstart 和 xend之间的气球。你不知道气球的确切 y 坐标。 一支弓箭可以沿着 x 轴从不同点 完全垂直 地…

Tensors张量操作

定义Tensor 下面是一个常见的tensor,包含了里面的数值,属性,以及存储位置 tensor([[0.3565,0.1826,0.6719],[0.6695,0.5364,0.7057]],dtypetorch.float32,devicecuda:0)Tensor的属…

【机器学习】Python中的决策树算法探索

🌈个人主页: 鑫宝Code 🔥热门专栏: 闲话杂谈| 炫酷HTML | JavaScript基础 ​💫个人格言: "如无必要,勿增实体" 文章目录 Python中的决策树算法探索引言1. 决策树基础理论1.1 算法概述1.2 构建过程 2. P…

解决:LVGL+GUI Guider 1.7.2运行一段时间就会卡死死机,内存泄露溢出的问题

概括: 我在使用NXP官方GUI Guider生成的代码出现了内存泄漏的问题。但我遇到的并不是像其他人所说的style的问题,如下链接。而是因为在页面渲染之前就使用了该页面内的组件,内存就会不断增加。 LVGL 死机 内存泄漏_lvgl 内存溢出-CSDN博客 运…

一文读懂Linux

前言 为了便于理解,本文从常用操作和概念开始讲起。虽然已经尽量做到简化,但是涉及到的内容还是有点多。在面试中,Linux 知识点相对于网络和操作系统等知识点而言不是那么重要,只需要重点掌握一些原理和命令即可。为了方便大家准…

操作系统总结(2)

目录 2.1 进程的概念、组成、特征 (1)知识总览 (2)进程的概念 (3)进程的组成—PCB (4)进程的组成---程序段和数据段 (5)程序是如何运行的呢&#xff1f…

嵌入式开发中树莓派和单片机关键区别

综合了几篇帖子作以信息收录:树莓派和单片机作为嵌入式系统领域中两种广泛使用的设备,各自有着不同的特性和应用场景,文章从五个方面进行比对展开。 架构与性能: 树莓派:是一款微型计算机,通常配备基于AR…

Django性能优化:提升加载速度

title: Django性能优化:提升加载速度 date: 2024/5/20 20:16:28 updated: 2024/5/20 20:16:28 categories: 后端开发 tags: 缓存策略HTTP请求DNS查询CDN分发前端优化服务器响应浏览器缓存 第一章:Django性能优化概述 1.1 性能优化的意义 性能优化是…

Spring中@Component注解

Component注解 在Spring框架中,Component是一个通用的注解,用于标识一个类作为Spring容器管理的组件。当Spring扫描到被Component注解的类时,会自动创建一个该类的实例并将其纳入Spring容器中管理。 使用方式 1、基本用法: Co…

深入浅出MySQL事务实现底层原理

重要概念 事务的ACID 原子性(Atomicity):即不可分割性,事务中的操作要么全不做,要么全做一致性(Consistency):一个事务在执行前后,数据库都必须处于正确的状态&#xf…

vb.net打开CAD指指定路径文件

首先打开vsto,创建窗体,添加一个按钮,双击按钮录入代码: Public Class Form1Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.ClickDim cad As Objectcad CreateObject("autocad.Application")cad…

火箭升空AR虚拟三维仿真演示满足客户的多样化场景需求

在航空工业的协同研发领域,航空AR工业装配系统公司凭借前沿的AR增强现实技术,正引领一场革新。通过将虚拟信息无缝融入实际环境中,我们为工程师、设计师和技术专家提供了前所未有的共享和审查三维模型的能力,极大地提升了研发效率…

Go 语言简介 -- 高效、简洁与现代化编程的完美结合

在现代软件开发领域,选择合适的编程语言对于项目的成功至关重要。Go 语言(又称 Golang )自 2009 年由Google发布以来,以其简洁的语法、高效的并发模型以及强大的性能,迅速成为开发者们的新宠。Go语言不仅融合了传统编译…

博客开始使用 Cache Master 缓存插件

明月在给大家推荐 Cache Master 插件的时候(可参考【推荐个比较纯正的缓存插件——Cache Master】一文),仅仅是在其他站点上试用了一下,今天明月正式在博客上用上了 Cache Master,没有想到对 Dragon 主题的支持竟然是出…

MYSQL之安装

一,下载仓库包 wget -i -c https://dev.mysql.com/get/mysql80-community-release-el7-3.noarch.rpm二,安装仓库 yum -y install mysql80-community-release-el7-3.noarch.rpmsed -i s/gpgcheck1/gpgcheck0/g mysql-community.repo三,安装MY…

GMSL图像采集卡,适用于无人车、自动驾驶、自主机器、数据采集等场景,支持定制

基于各种 系列二代 G MS L 图像采集卡(以下简称 二代图像采集卡)是一款自主研发的一款基于 F P G A 的高速图像产品,二代图像采集卡相比一代卡,由于采用PCIe G en 3 技术,速度和带宽都相应的有了成 倍的提高。该图像…

DataGrip软件执行已将创建好的sql文件步骤

一、在需要导入sql文件上右击找到SQLScript ,然后点击 Run SQL Script 二、找到sql文件,点击OK就可以了

怎么搭建微信留言板功能

在信息爆炸的时代,微信已经成为了我们日常生活中不可或缺的一部分。它不仅仅是一个简单的聊天工具,更是一个充满无限可能的营销平台。今天,我要向大家介绍的是如何在你的微信平台上搭建一个独具特色的留言板功能,让用户能够自由发…