当前位置： 首页 > news >正文

【学习】【记录】【分享】微型响应系统

news 2025/9/19 7:12:26

前言

本篇博客源于对Vue和React框架中响应式系统的好奇与探索。若文中存在任何错误或有更优的解决方案，欢迎各位读者不吝指正，让我们一起学习，共同进步。

1. 什么是响应式系统

响应式系统是一种编程范式，它允许数据的变化自动地反映在用户界面上。Vue和React等现代前端框架都使用了响应式系统来简化数据驱动的开发。

2. 实现一个简单的响应式系统

在这篇博客中，我们将实现一个简单的响应式系统。这个系统包括以下几个部分：

(1) 数据代理：通过Proxy对象来拦截对数据的访问和修改。
(2) 副作用函数：当数据变化时，自动执行相关的副作用函数。
(3) 调度执行：在数据变化时，调度执行副作用函数。

3. 代码实现

3.1 初始化项目
mkdir demo
cd demo
npm init -y
npm install http-server -D
3.2 根目录下创建index.html和index.js文件
<!-- path demo/index.html -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>微型响应系统</title></head><body><script src="./index.js"></script></body>
</html>

// path demo/index.js
/*** 用一个全局变量存储被注册的副作用函数*/
let activeEffect;
/*** @description 原始数据*/
const data = { text: "Hello, World!" };/*** @description 存储副作用函数的桶*/
const bucket = new Set();/*** @description 代理对象*/
const obj = new Proxy(data, {get(target, key) {if (activeEffect) {bucket.add(activeEffect);}return target[key];},set(target, key, newVal) {target[key] = newVal;bucket.forEach((f) => f());},
});/*** @description 副作用函数*/
const effect = (fn) => {activeEffect = fn;fn();
};/*** @description 执行副作用函数，触发读取*/
effect(() => {document.body.textContent = obj.text;
});/*** @description 1 秒后修改响应式数据*/
setTimeout(() => {obj.text = "微型响应系统";
}, 1000);

当前目录结构
demo
├── index.html
├── index.js
└── package.json

3.3 package.json中添加指令
 // ..."scripts": {"start":"http-server",},//...
3.4 启动项目
npm start

4. 总结

通过以上代码，我们实现了一个微型响应式系统。这个系统可以追踪数据的变化，并在数据变化时执行相关的副作用函数。如果你有任何问题或建议，欢迎在评论区留言。让我们一起学习，共同进步！

相关文章：

【学习】【记录】【分享】微型响应系统

前言 本篇博客源于对Vue和React框架中响应式系统的好奇与探索。若文中存在任何错误或有更优的解决方案&#xff0c;欢迎各位读者不吝指正&#xff0c;让我们一起学习&#xff0c;共同进步。 1. 什么是响应式系统 响应式系统是一种编程范式&#xff0c;它允许数据的变化自动地…...

编程日记 2025/1/14 16:30:33

vue城市道路交通流量预测可视化系统

文章结尾部分有CSDN官方提供的学长 联系方式名片 文章结尾部分有CSDN官方提供的学长 联系方式名片 关注B站、收藏、不迷路&#xff01; 项目亮点 编号&#xff1a;R09 &#x1f687; 网站大屏管理三大前端、vuespringbootmysql、前后端分离架构 &#x1f687; 流量预测道路查询…...

编程日记 2025/1/14 16:27:29

Windows7 Emacs设置及中文乱码解决

个人博客地址&#xff1a;Windows7 Emacs设置及中文乱码解决 | 一张假钞的真实世界 环境说明 Windows7GNU Emacs 25.1.1安装路径&#xff1a;D:/apps/emacs/ 配置Emacs 在Windows7下安装完Emacs后&#xff0c;默认情况下Emacs不会在一启动的时候就生成.emacs配置文件和.ema…...

编程日记 2025/1/14 16:26:27

Python AI教程之十五：监督学习之决策树（6）高级算法C5.0决策树算法介绍

C5.0决策树算法 C5 算法由 J. Ross Quinlan 创建，是 ID3 决策树方法的扩展。它通过根据信息增益（衡量通过按特定属性进行划分而实现的熵减少量）递归地划分数据来构建决策树。 对于分类问题，C5.0 方法是一种决策树算法。它构建规则集或决策树，这是对 C4.5 方法的改进。根…...

编程日记 2025/1/14 16:25:26

MOS管为什么会有夹断，夹断后为什么会有电流？该电流为什么是恒定的？

以下是对MOS管MOS管为什么会有夹断&#xff0c;夹断后为什么还会有电流&#xff1f;该电流为什么是恒定的&#xff1f;的一些心得体会。 1. MOS管为什么会有夹断&#xff1f; 可以认为D极加压使得D极的耗尽层增大(原因是N极接正极&#xff0c;P极接负极&#xff0c;电子被吸引…...

编程日记 2025/1/14 16:24:22

网络安全-RSA非对称加密算法、数字签名

数字签名非常普遍&#xff1a; 了解数字签名前先了解一下SHA-1摘要&#xff0c;RSA非对称加密算法。然后再了解数字签名。 SHA-1 SHA-1&#xff08;secure hash Algorithm &#xff09;是一种 数据加密算法。该算法的思想是接收一段明文&#xff0c;然后以一种不可逆的方式将…...

编程日记 2025/1/14 16:22:19

【AI日记】25.01.13

【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】【读书与思考】 AI kaggle 比赛&#xff1a;Forecasting Sticker Sales 读书 书名&#xff1a;罗素论幸福 律己 AI&#xff1a; 8 小时&#xff0c;良作息&#xff1a;1:00-9:00&#xff0c; 良短视频&…...

编程日记 2025/1/14 16:20:16

Mysql--运维篇--空间管理（表空间，索引空间，临时表空间，二进制日志，数据归档等）

MySQL的空间管理是指对数据库存储资源的管理和优化。确保数据库能够高效地使用磁盘空间、内存和其他系统资源。良好的空间管理不仅有助于提高数据库的性能&#xff0c;还能减少存储成本并防止因磁盘空间不足导致的服务中断。MySQL的空间管理涉及多个方面&#xff0c;包括表空间…...

编程日记 2025/1/14 16:19:14

JVM面试相关

JVM组成 什么是程序计数器 详细介绍Java堆 什么是虚拟机栈 能不能解释一下方法区&#xff1f; 直接内存相关 类加载器 什么是类加载器&#xff0c;类加载器有哪些 什么是双亲委派模型 类加载过程 垃圾回收 对象什么时候可以被垃圾回收器回收 JVM垃圾回收算法有那些 JVM的分代…...

编程日记 2025/1/14 16:18:14

【leetcode 13】哈希表 242.有效的字母异位词

原题链接 题解链接 一般哈希表都是用来快速判断一个元素是否出现集合里。 当我们想使用哈希法来解决问题的时候&#xff0c;我们一般会选择如下三种数据结构。 数组 set &#xff08;集合&#xff09; map(映射) 如果在做面试题目的时候遇到需要判断一个元素是否出现过的场景…...

编程日记 2025/1/14 16:17:12

Blazor开发复杂信息管理系统的优势

随着现代企业信息管理需求的不断提升&#xff0c;开发高效、易维护、可扩展的系统变得尤为重要。在这个过程中&#xff0c;Blazor作为一种新兴的Web开发框架&#xff0c;因其独特的优势&#xff0c;逐渐成为开发复杂信息管理系统的首选技术之一。本文将结合Blazor在开发复杂信息…...

编程日记 2025/1/14 16:15:10

ue5 1.平A，两段连击蒙太奇。鼠标点一下，就放2段动画。2，动画混合即融合，边跑边挥剑，3，动画通知，动画到某一帧，把控制权交给蓝图。就执行蓝图节点

新建文件夹 创建一个蒙太奇MA_Melee 找到c_slow 调节一下速度 把D_slow拖上去 中间加一个片段 哎呀呀&#xff0c;写错了&#xff0c;我想写2 把这个标记拖过来&#xff0c;点击默认default 弄第二个片段 就会自己变成这个样子 把2这个标记拖到中间 鼠标左键&a…...

编程日记 2025/1/14 16:13:07

2025，AI走向何方？暴雨技术专家为您展望

过去一年中&#xff0c;人工智能技术飞速发展&#xff0c;在各行各业都收获了巨大进展。面对即将到来的2025年&#xff0c;暴雨技术研发团队的专家对AI领域的发展趋势进行了展望&#xff0c;让我们来看看未来一年&#xff0c;有哪些重要趋势值得关注。 迈向关键转折的一步 20…...

编程日记 2025/1/14 16:12:06

Threejs实现 区块链网络效应

大家好&#xff01;我是 [数擎 AI]&#xff0c;一位热爱探索新技术的前端开发者&#xff0c;在这里分享前端和 Web3D、AI 技术的干货与实战经验。如果你对技术有热情&#xff0c;欢迎关注我的文章&#xff0c;我们一起成长、进步&#xff01; 开发领域&#xff1a;前端开发 | A…...

编程日记 2025/1/14 16:10:04

宁德时代C++后端开发面试题及参考答案

请阐述面向对象的三大特性。 面向对象编程有三大特性，分别是封装、继承和多态。 封装是指将数据和操作数据的方法绑定在一起，对数据的访问和操作进行限制。这样做的好处是可以隐藏对象的内部细节，只暴露必要的接口给外部。例如，我们可以把一个汽车类的内部引擎状态、速度等…...

编程日记 2025/1/14 16:06:00

【三维数域】三维数据调度-负载均衡和资源优化

在处理大规模三维数据时&#xff0c;负载均衡和资源优化是确保系统高效运行、提供流畅用户体验的关键。这两者不仅影响到系统的性能和稳定性&#xff0c;还直接决定了用户交互的质量。以下是关于如何在三维数据调度中实现有效的负载均衡和资源优化的详细探讨。 一、负载均衡 负…...

编程日记 2025/1/14 16:03:58

Linux服务器网络丢包场景及解决办法

一、Linux网络丢包概述 在数字化浪潮席卷的当下&#xff0c;网络已然成为我们生活、工作与娱乐不可或缺的基础设施&#xff0c;如同空气般&#xff0c;无孔不入地渗透到各个角落。对于 Linux 系统的用户而言&#xff0c;网络丢包问题却宛如挥之不去的 “噩梦”&#xff0c;频繁…...

编程日记 2025/1/14 16:01:55

【信息系统项目管理师】高分论文：论信息系统项目的采购管理（数据中台项目）

更多内容请见： 备考信息系统项目管理师-专栏介绍和目录 文章目录 1、规划采购管理。2、实施采购3、控制采购2022年3月，我以项目经理的身份参加了xx银行xx省分行的数据中台项目。该项目历时10个月，项目经费500万。通过该项目，我们搭建了数据中台，实现了实时的、灵活可配的数…...

编程日记 2025/1/14 15:58:52

AI语音机器人大模型是什么?

AI语音机器人的大模型通常是指具有庞大参数规模和复杂结构的深度学习模型&#xff0c;这些模型能够处理大量数据并从中学习复杂的模式和关系&#xff0c;从而在语音识别、自然语言处理、语音合成等任务上表现出色。以下是AI语音机器人中大模型的具体介绍&#xff1a; 1.大模型…...

编程日记 2025/1/14 15:53:46

极客说｜Azure AI Agent Service 结合 AutoGen/Semantic Kernel 构建多智能体解决⽅案

作者&#xff1a;卢建晖 - 微软高级云技术布道师 「极客说」 是一档专注 AI 时代开发者分享的专栏&#xff0c;我们邀请来自微软以及技术社区专家&#xff0c;带来最前沿的技术干货与实践经验。在这里&#xff0c;您将看到深度教程、最佳实践和创新解决方案。关注「极客说」&am…...

编程日记 2025/1/14 15:49:41

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2025/9/18 1:41:40

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2025/9/18 13:13:59

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/9/10 21:08:11

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

编程新知 2025/9/15 12:06:17

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/9/15 8:33:21

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

编程新知 2025/9/12 0:24:07

CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

编程新知 2025/9/12 22:08:06

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...

编程新知 2025/6/15 11:47:07

Python竞赛环境搭建全攻略

Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型&#xff08;算法、数据分析、机器学习等&#xff09;不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...

编程新知 2025/9/5 19:04:58

JDK 17 序列化是怎么回事

如何序列化&#xff1f;其实很简单&#xff0c;就是根据每个类型&#xff0c;用工厂类调用。逐个完成。 没什么漂亮的代码&#xff0c;只有有效、稳定的代码。 代码中调用toJson toJson 代码 mapper.writeValueAsString ObjectMapper DefaultSerializerProvider 一堆实…...

编程新知 2025/9/7 8:45:13