【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 会重启它，但是容器中的文件将丢失——容器以干净的状态（镜像最初的状态）…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中，iftop是网络管理的得力助手，能实时监控网络流量、连接情况等，帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源（HTML/CSS/图片等），响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址，提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树 浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...
ServerTrust 并非唯一
NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...
css的定位（position）详解：相对定位 绝对定位 固定定位
在 CSS 中，元素的定位通过 position 属性控制，共有 5 种定位模式：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和…...
什么是EULA和DPA
文章目录 EULA（End User License Agreement）DPA（Data Protection Agreement）一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA（End User License Agreement） 定义： EULA即…...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术，它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)：由层级结构的骨头组成，类似于人体骨骼蒙皮 (Mesh Skinning)：将模型网格顶点绑定到骨骼上，使骨骼移动…...