【前端进阶】09 编程思维：从事件驱动到数据驱动

事件驱动与数据驱动

    • GUI与事件
    • 事件驱动
    • 数据驱动
    • 事件驱动和数据驱动的区别

GUI与事件

JavaScript作为浏览器的脚本语言，主要用途是与用户互动、操作DOM，实现页面UI和DOM操作，属于GUI（图形用户界面）编程

GUI程序注重用户交互，执行取决于与用户的实时交互情况

事件循环机制：所有的异步事件都会通过执行回调的方式触发相应的逻辑执行

事件驱动

实现页面功能思路
在这里插入图片描述
事件驱动思维：从事件响应出发来完成应用的设计和编程

  1. 编写静态页面
  2. 给对应的元素绑定对应的事件
  3. 事件触发时，进行相关逻辑处理，更新页面内容

数据驱动

在这里插入图片描述
数据驱动的前提，在于将页面内容抽象为数据表达

  • 对页面进行抽象设计 ，使用合适的数据结构来表达，将页面中会变化的和不会变化的内容隔离开，对变化的内容进行抽象设计，再根据抽象结果来设计数据结构
  • 表单除了具备数据，还包括用于改变数据的方法
  • 实现静态页面，并把数据和时间绑定到页面中
    在这里插入图片描述

事件驱动和数据驱动的区别

  • 数据驱动更容易将视图于逻辑解绑，能够快速的适应变更和调整
  • 事件驱动更倾向于流程式开发，数据驱动更倾向于数据状态的变动和流动

在这里插入图片描述

参考教程：前端进阶教程

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

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

相关文章

WPF-3天快速WPF入门并达到企业级水准

WPF-3天快速WPF入门并达到企业级水准

嘿，小伙伴们！如果你已经有一定的C#开发基础，但想快速掌握WPF开发，达到企业级水准，那接下来的这个三天快速入门计划绝对适合你！虽然听起来有点挑战，但别担心，只要跟着这个高强度、结构…
阅读更多...
【实战 ES】实战 Elasticsearch：快速上手与深度实践-1.3.1单节点安装（Docker与手动部署）

【实战 ES】实战 Elasticsearch：快速上手与深度实践-1.3.1单节点安装（Docker与手动部署）

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路 文章大纲 10分钟快速部署Elasticsearch单节点环境1. 系统环境要求1.1 硬件配置推荐1.2 软件依赖 2. Docker部署方案2.1 部署流程2.2 参数说明2.3 性能优化建议 3. 手动部署方案3.1 安…
阅读更多...
小程序中的插槽（Slot）机制及其与 Vue 组件的异同

小程序中的插槽（Slot）机制及其与 Vue 组件的异同

小程序中的插槽（Slot）机制及其与 Vue 组件的异同 引言 在小程序开发中，组件化开发是一种重要的设计模式，而插槽（Slot）机制则是实现组件内容分发的关键。通过插槽，开发者可以更灵活地构建可复用…
阅读更多...
vscode下载安装教程（附安装包）vscode图文安装教程最新版

vscode下载安装教程（附安装包）vscode图文安装教程最新版

文章目录 一、vscode下载二、vscod安装教程1.启动vscode安装程序：2.应对提示：3.接受协议：4.更改vscode安装路径：5.推进安装vscode：6.创建vscode快捷方式：7.开始安装vscode：8.完成vscode安装&…
阅读更多...
Redis 缓存穿透、击穿、雪崩：问题与解决方案

Redis 缓存穿透、击穿、雪崩：问题与解决方案

在使用 Redis 作为缓存中间件时，系统可能会面临一些常见的问题，如 缓存穿透、缓存击穿 和 缓存雪崩。这些问题如果不加以解决，可能会导致数据库压力过大、系统响应变慢甚至崩溃。本文将详细分析这三种问题的起因，并提供有效的解决…
阅读更多...
智能客服进化论：AI呼叫中心系统如何重塑企业服务竞争力？

智能客服进化论：AI呼叫中心系统如何重塑企业服务竞争力？

导语：当客户咨询量激增300%时，你的客服团队还能从容应对吗？ 在数字化转型加速的今天，企业客户服务正经历从"人力密集型"向"智能集约化"的质变。AI呼叫中心系统作为这场变革的核心引擎，已帮助超过…
阅读更多...
异常c/c++

异常c/c++

目录 1.c语言传统处理错误方式 1、终止程序 2、返回错误码 2.c异常概念 3.异常的使用 3.1异常的抛出与捕获 3.2异常安全（还有一些异常重新抛出） 3.3异常规范 4.自定义异常体系 5.c标准库的异常体系 6.异常优缺点 1、优点 2、缺点 7、补充 1.…
阅读更多...
ChatGPT 提示词框架

ChatGPT 提示词框架

作为一个资深安卓开发工程师，我们在日常开发中经常会用到 ChatGPT 来提升开发效率，比如代码优化、bug 排查、生成单元测试等。 但要想真正发挥 ChatGPT 的潜力，我们需要掌握一些提示词（Prompt）的编写技巧，并…
阅读更多...
面试基础---JVM 运行时数据区

面试基础---JVM 运行时数据区

深入理解 JVM 运行时数据区：从源码到实践 在现代互联网大厂的开发环境中，Java 依然是主流语言之一，而 Java 虚拟机（JVM）作为 Java 程序运行的基础，其性能和稳定性直接关系到应用的表现。因此，深…
阅读更多...
PostgreSQL 查看数据库及表中数据占用空间大小

PostgreSQL 查看数据库及表中数据占用空间大小

1、应用场景 场景1：查看数据库占用空间大小 SELECT pg_size_pretty(pg_database_size(database_name));场景2：查看每张表占用空间大小 SELECTtable_schema || . || table_name AS table,#仅表数据pg_size_pretty(pg_relation_size(table_schema || . …
阅读更多...
c++中打印任意类型任意长度数组的各种方式

c++中打印任意类型任意长度数组的各种方式

目录 一、代码 二、详细解释 1. print 函数模板 2. array_size 函数模板 3. print1 函数模板 4. print2 函数模板 5. my_begin 和 my_end 函数模板 6. print3 函数模板 7. main 函数 总结 一、代码 如下代码给出了5种方式打印任意类型任意长度的数组。这段代码定义了…
阅读更多...
ubuntu下r8125网卡重启丢失修复案例一则

ubuntu下r8125网卡重启丢失修复案例一则

刚装的一台服务器，ubuntu24.04，主板网卡是r8125，安装服务后会莫名其妙丢失驱动 按照官网的方法下载最新8125驱动包： Realtek 然后卸载驱动 rmmod r8125 然后在驱动包里安装（幸好我之前装了build-essential&#x…
阅读更多...
[Python学习日记-84] 进程理论

[Python学习日记-84] 进程理论

[Python学习日记-84] 进程理论 简介 进程的概念 并发与并行的区别 进程并发的实现 简介 进程理论是计算机科学中一种重要的概念，用来描述操作系统中执行的程序实例。在操作系统中，每个程序的执行被称为一个进程。进程理论研究进程的创建、调度、通信…
阅读更多...
云创智城YunCharge 新能源二轮、四轮充电解决方案（云快充、万马爱充、中电联、OCPP1.6J等多个私有单车、汽车充电协议）之新能源充电行业系统说明书

云创智城YunCharge 新能源二轮、四轮充电解决方案（云快充、万马爱充、中电联、OCPP1.6J等多个私有单车、汽车充电协议）之新能源充电行业系统说明书

云创智城YunCharge 新能源充电行业系统说明书 ⚡官方文档 ⚡官网地址 1. 引言 随着全球环境保护和能源危机的加剧，新能源汽车行业得到了快速发展，充电基础设施建设也随之蓬勃发展。新能源充电行业系统旨在提供高效、便捷的充电服务，满足电…
阅读更多...
OpenWebUI配置异常的外部模型导致页面无法打开

OpenWebUI配置异常的外部模型导致页面无法打开

一、使用Ollama关闭OpenAI OpenWebUI自带OpenAI的API设置，且默认是打开的，默认情况下，启动后，会不断的去连https://api.openai.com/v1，但是无法连上，会报错，但是不会影响页面，能正常…
阅读更多...
RuntimeWarning: invalid value encountered in scalar power在进行标量的幂运算时遇到了无效值

RuntimeWarning: invalid value encountered in scalar power在进行标量的幂运算时遇到了无效值

year_profit ((profit / initial_cash) ** (1 / yy) - 1) * 100 RuntimeWarning: invalid value encountered in scalar power 这个警告表示在执行标量幂运算 ((profit / initial_cash) ** (1 / yy) - 1) * 100 时遇到了无效值。常见的引发原因及解决办法如下： ###…
阅读更多...
计算机毕业设计 ——jspssm506Springboot 的旧物置换网站

计算机毕业设计 ——jspssm506Springboot 的旧物置换网站

📘 博主小档案： 花花，一名来自世界500强的资深程序猿，毕业于国内知名985高校。 🔧 技术专长： 花花在深度学习任务中展现出卓越的能力，包括但不限于java、python等技术。近年来，花花更…
阅读更多...
Kafka消费者相关

Kafka消费者相关

Kafka生产者相关-CSDN博客 消费者消费数据基本流程 package com.hrui;import org.apache.kafka.clients.consumer.ConsumerConfig; import org.apache.kafka.clients.consumer.ConsumerRecord; import org.apache.kafka.clients.consumer.ConsumerRecords; import org.apache…
阅读更多...
【软考-架构】备战2025软考

【软考-架构】备战2025软考

新老教材对比 科目1（信息系统综合）考点详解 科目2（系统架构设计案例）考点详解 科目3（系统架构设计论文）考点详解 趋于越来越具体 学习方法推荐 第一阶段 – 基础知识阶段 建议一个半月； 先过…
阅读更多...
MMW-1碳棒磨损机设计

MMW-1碳棒磨损机设计

摘 要 为了更好的测量在一定压力下碳棒的磨损量，提高碳棒磨损量的测量精度，本文设计了一种MMW-1碳棒磨损机，该碳棒磨损机属于柱盘式摩擦磨损试验机的一种。该机器主要用于做和碳棒有关的摩擦磨损试验，可以更准确的获得相关的参数…
阅读更多...
最新文章

Copyright @ 2022~2023