【React】04.MVC模式和MVVM模式
React是Web前端框架
1、目前市面上比较主流的前端框架
- React
- Angular（NG框架）
- Vue
主流的思想：
不在直接去操作DOM，而是改为“数据驱动思想”
操作DOM思想：
- 操作DOM比较消耗性能[主要原因就是，可能会导致DOM重排（回流）/重绘]
- 操作起来也相对麻烦一些
数据驱动思想：
- 我们不会在直接操作DOM
- 我们去操作数据[当我们修改了数据，框架会按照相关的数据，让页面重新渲染]
- 框架底层实现视图的渲染，也是基于操作DOM完成的。
构建了一套虚拟DOm -> 真实DOM 的渲染体系
有效避免了DOm的重排/重绘 - 开发效率更高、最后的性能也相对较好
stackoverflow
操作DOM的demo
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="theme-color" content="#000000" /><metaname="description"content="Web site created using create-react-app"/><title>操作DOM的demo</title></head><body><span id="textBox">0</span><br /><button id="submit">累加</button><script>// 想操作谁，先获取谁let textBox = document.querySelector("#textBox"),submit = document.querySelector("#submit");// 事件绑定let num = 0;submit.addEventListener("click", function () {num++;textBox.innerHTML = num;});</script></body>
</html>
2、React框架采用的是MVC体系；Vue框架采用的是MVVM体系
MVC：modal数据层 + view视图层 + controller控制层
- 按照专业的语法去构建试图（页面）：React中是基于jsx语法来构建视图的
- 构建数据层：但凡在视图中，需要“动态”处理的（获取需要变化的，不论是样式还是内容），我们都要有对应的数据模型
- 控制层：当我们在视图中（或者根据业务需求）进行某些操作的时候，都是去修改相关的数据，然后React框架会按照最新的数据，重新渲染视图，以此让用户看到最新的效果。
单项数据驱动：数据驱动视图的渲染！！
视图中的表单内容改变，想要修改数据，需要开发者自己去写代码实现
“单向驱动”
MVVM：modal数据层 + view视图层 + viewModel数据/试图监听层
- 数据驱动视图的渲染：修改数据，视图会跟着更新
- 试图驱动数据的更改：监听页面中表单元素内容改变，自动去修改相关的数据
“双向驱动”
相关文章：
【React】04.MVC模式和MVVM模式
React是Web前端框架 1、目前市面上比较主流的前端框架 ReactAngular（NG框架）Vue 主流的思想： 不在直接去操作DOM，而是改为“数据驱动思想” 操作DOM思想： 操作DOM比较消耗性能[主要原因就是，可能会导…...
调试代码0
dev_update_off () * read_image (Image, C:/Users/Public/Documents/MVTec/HALCON-12.0/examples/images/smd/smd_on_chip_01.png) read_image (Image, D:/图像文件/图片/图片/基板/20230609-103004-0.bmp) get_image_size (Image, Width, Height) * dev_close_window () * de…...
【C++心愿便利店】No.12---C++之探索string底层实现
文章目录 前言一、写实拷贝（了解）二、string类常用接口实现2.1 成员变量2.2 默认构造函数2.3 拷贝构造函数2.4 operator2.5 operator[]2.6 c_str2.7 size()2.8 capacity() 三、迭代器的实现3.1 begin()和end()3.2 范围for 四、string类增删查改4.1 reser…...
Android Studio(列表视图ListView)
前言 前面在适配器章节，已经介绍了ListView的作用(干什么的)，这节将主要介绍如何去设计ListView页面视图。 思考 列表视图需要些什么？ 1. 列表项容器（装载各列表项的容器）：<ListView/> 2. 列表项布局…...
让深度神经网络绘画以了解它们是如何工作的
一、说明 深度学习如此有效，这真是一个谜。尽管有一些关于深度神经网络为何如此有效的线索，但事实是没有人完全确定，并且深度学习的理论理解是一个非常活跃的研究领域。 在本教程中，我们将以一种不寻常的方式触及问题的一个小方面…...
https://www.jianshu.com/p/34bf240b85a9
https://www.jianshu.com/p/34bf240b85a9 https://www.eccee.com/soft-platform/991.html...
如何导出PPT画的图为高清图片？插入到world后不压缩图像的设置方法？
期刊投稿的时候，需要图片保持一定的清晰度数，那么我们怎么才能从PPT中导出符合要求的图片呢？ 对于矢量图绘图软件所画的图，直接导出即可。 而PPT导出的图片清晰度在60pi，就很模糊。 整体思路： PPT绘图——…...
【Spring】Spring IOC DI
Spring IOC & DI IOC DI入门什么是Spring什么是容器什么是IOC IOC介绍传统程序开发解决方案 DI IOC详解Bean的存储Controller(控制器存储)Service(服务存储)Repository(仓库存储)Component(组件存储)Configuration(配置存储) 为什么需要这么多类注解类注解之间的关系方法注…...
一招解密网络流量瓶颈！
前言 我们曾介绍过观测云提供全面的基础设施监测方案（参见《全方位监控基础设施，坚实守护您的业务稳定！》），能够高效全面地帮助您实时观测所有的基础设施对象及云产品等，赋能您的业务稳定发展。今天我们将…...
某校帮签到小程序m 加密参数解析
小程序解密清参考我以前的文章 VX小程序逆向 js版本 function n(e, a) {var t (65535 & e) (65535 & a);return (e >> 16) (a >> 16) (t >> 16) << 16 | 65535 & t };function i(e, a, t, n, r, i, s) {return o(a & n | t &…...
Node.js |（六）express框架 | 尚硅谷2023版Node.js零基础视频教程
学习视频：尚硅谷2023版Node.js零基础视频教程，nodejs新手到高手 文章目录 📚express使用🐇初体验🐇express路由⭐️路由的使用⭐️获取请求参数⭐️获取路由参数🔥练习：根据路由参数响应歌手信息…...
包教包会：Mysql主从复制搭建
笑小枫的专属目录 一、无聊的理论知识1. 主从复制原理2. 主从复制的工作过程3. MySQL四种同步方式 二、docker下安装、启动mysql1. 安装主库2. 安装从库 三、配置Master(主)四、配置Slave(从)五、链接Master(主)和Slave(从)六、主从复制排错1. 错误：error connectin…...
Subset Selection
白话解释：https://www.geeksforgeeks.org/feature-subset-selection-process/ 貌似有一种比较常见的方法，称为多元逐步回归有3种筛选自变量的方法 （1）向前法：n个因变量情况，慢慢增加因变量到方程中&#x…...
【测开求职】面试题：计算机网络 精简版整理
本篇文章整理的是在秋招过程中遇到的计算机网络高频面试题，应付部分中小厂的测试开发工程师面试完全没有问题，如果时间充足的话，建议再看一下笔者的另外一篇文章：【测开求职】面试题：计算机网络 详细版整理，会让你对整个计算机网络有足够全面深刻的理解，亲测应付各个大厂…...
)
设计模式-代理模式(delegate)
什么是代理？ 代理(Proxy)是一种设计模式,提供了对目标对象另外的访问方式;即通过代理对象访问目标对象.这样做的好处是:可以在目标对象实现的基础上,增强额外的功能操作,即扩展目标对象的功能. 这里使用到编程中的一个思想:不要随意去修改别人已经写好的代码或者方…...
MongoDB 安装与配置
MongoDB 安装与配置 MongoDB 是一个高性能、开源的 NoSQL 数据库，它提供了丰富的查询功能和高可用性。本文将详细讲解 MongoDB 的安装与配置过程。 1. MongoDB 安装 1.1 Windows 平台安装 下载 MongoDB 安装包 访问 MongoDB 官方下载页面（https://w…...
rabbitMq创建交换机，以及路由键绑定队列教程
创建交换机： 创建队列： 创建路由，绑定到交换机：...
odoo16前端框架源码阅读——ormService.js
odoo16前端框架源码阅读——ormService.js 路径：addons\web\static\src\core\orm_service.js 简单翻译一下代码中的注释： ORM服务是js代码和python的ORM层通信的标准方法。 然后讲了One2many and Many2many特使的指令格式，每个指令都是3元…...
详谈滑动窗口算法与KMP算法区别以及二者在什么场景下使用
什么是滑动窗口算法 滑动窗口算法是一种用于解决数组（或字符串）中子数组（或子字符串）问题的算法。该算法通过维护一个固定大小的窗口（通常是两个指针），该窗口在数组上滑动，以寻找符…...
k8s、数据存储
数据存储的概念 容器磁盘上的文件的生命周期是短暂的，这就使得在容器中运行重要应用时会出现一些问题。首先，当容器崩溃时，kubelet 会重启它，但是容器中的文件将丢失——容器以干净的状态（镜像最初的状态）…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架，它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用，和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
: K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？)
云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？
大家好，欢迎来到《云原生核心技术》系列的第七篇！ 在上一篇，我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在，我们就像一个拥有了一块崭新数字土地的农场主，是时…...
React hook之useRef
React useRef 详解 useRef 是 React 提供的一个 Hook，用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途，下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...
【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成：MAC头部frame bodyFCS，其中MAC是固定格式的，frame body是可变长度。 MAC头部有frame control，duration，address1，address2，addre…...
苍穹外卖--缓存菜品
1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得，如果用户端访问量比较大，数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据，减少数据库查询操作。 缓存逻辑分析： ①每个分类下的菜品保持一份缓存数据…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums，返回 数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法，且在 O(n) 时间复杂度…...
智能AI电话机器人系统的识别能力现状与发展水平
一、引言 随着人工智能技术的飞速发展，AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术，在客户服务、营销推广、信息查询等领域发挥着越来越重要…...
Java + Spring Boot + Mybatis 实现批量插入
在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法：使用 MyBatis 的 <foreach> 标签和批处理模式（ExecutorType.BATCH）。 方法一：使用 XML 的 <foreach> 标签ÿ…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数（函数作为参数、返回值） 三、匿名函数与闭包1. 匿名函数（Lambda函…...
PAN/FPN
import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...