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

监听load和hashchange事件

监听load和hashchange事件

上篇文章中,我们已经将菜谱的数据给拿到,并且已经可以渲染到页面上,本篇我们将为程序添加一些事件;

注:本项目来自于Jonas Schmedtmann创建,文章仅仅作为学习作用!

  • 菜谱的切换

我们通过之前的API也已经发现了,菜谱的获取是通过URL加上菜谱的hash值也获取到的

在这里插入图片描述

所以当我们点击切换菜谱的时候只需要在url后面加上菜谱的hash就可以获取到这个菜谱的,那么应该怎么做呢?

 <div class="search-results"><ul class="results"><a href="#664c8f193e7aa067e94e863b">菜谱1</a><a href="#5ed6604591c37cdc054bc886">菜谱2</a>

在这里插入图片描述

  • 那边页面的变化我们就要通过一个监听事件,来监听如果hash发生变化的话,我们来重新调用渲染菜谱的页面;
window.addEventListener('hashchange', showRecipe);
  • 那接下里的话就简单,我们将我们硬编码的id更换成我们浏览器上面的id就可以实现页面的实时渲染了
try {const id = window.location.hash.slice(1);renderSpinner(recipeContainer);const res = await fetch(`https://forkify-api.herokuapp.com/api/v2/recipes/${id}`);

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 但是这里还有一个问题,当我们重新加载的时候会发现页面什么菜谱都没有,这是因为我们没有点击页面中还不知道该渲染怎么样的菜谱,很简单,加一个load事件就可以了
window.addEventListener('load', showRecipe);

在这里插入图片描述

  • 但是很明显,这是两个差不多的代码,我们不应该去重复它,这里我们可以选择使用一个数组循环的方法来实现多个事件调用同一个函数的问题;
['hashchange', 'load'].forEach(e => window.addEventListener(e, showRecipe));

这样的话我们就可以使用一行代码来代替多行代码了;

  • 细心的小伙伴还会发现一个问题,当我们的URL不存在id的时候,就会报错,因为js会将一个空的字符串向API中请求数据,这当然会报错;

在这里插入图片描述

这里我们简单的做一个的返回即可

if (!id) return;

本篇将是这个程序的核心功能,但是我们的代码并不是非常的清晰的书写,这时候就要谈谈我们在流程图里面所说的架构了!下篇文章见;

相关文章:

监听load和hashchange事件

监听load和hashchange事件 上篇文章中&#xff0c;我们已经将菜谱的数据给拿到&#xff0c;并且已经可以渲染到页面上&#xff0c;本篇我们将为程序添加一些事件&#xff1b; 注&#xff1a;本项目来自于Jonas Schmedtmann创建&#xff0c;文章仅仅作为学习作用&#xff01; 菜…...

深度剖析Seata源码:解锁分布式事务处理的核心逻辑

文章目录 写在文章开头如何使用源码(配置转掉)基于AT模式详解Seata全链路流程Seata服务端启动本地服务如何基于GlobalTransaction注解开启事务客户端如何开启分布式事务RM和TC如何协调处理分支事务RM生成回滚日志事务全局提交与回滚小结参考写在文章开头 在当今分布式系统日益…...

在 Ansys Mechanical 中解决干涉拟合

有意和无意的过盈配合在工程设计和有限元分析 &#xff08;FEA&#xff09; 中很常见。当两个组件重叠或接触时&#xff0c;就会发生这种情况&#xff0c;从而产生应力和变形&#xff0c;必须仔细分析以确保功能正常。有意干涉&#xff0c;例如轴和轴承之间的压配合或用于固定金…...

JMeter性能问题

性能测试中TPS上不去的几种原因 性能测试中TPS上不去的几种原因_tps一直上不去-CSDN博客 网络带宽 连接池 垃圾回收机制 压测脚本 通信连接机制 数据库配置 硬件资源 压测机 业务逻辑 系统架构 CPU过高什么原因 性能问题分析-CPU偏高 - 西瓜汁拌面 - 博客园 US C…...

美国国防部(DoD)SysML v2迁移指南项目

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 分享一篇SysML v1向SysML v2迁移的资料。 下载地址&#xff1a;https://ndia.dtic.mil/wp-content/uploads/2023/systems/Thurs_1560710_Stirk.pdf 核心内容用DeepSeek整理如下&#…...

JavaWeb-GenericServlet源码分析(适配器/模板方法)

文章目录 类直接实现Servlet接口的弊端Servlet接口的方法适配器设计模式 适配器对象的改造关于init方法的ServletConfig对象来源使用模板方法设计模式改造init方法 GenericServlet内置抽象类ServletConfig接口ServletConfig接口简介测试再谈GenericServlet抽象类 类直接实现Ser…...

微机原理与汇编语言试题四

一、单项选择 1.(单选题)()指向的内存单元的值被CPU做为指令执行。 A. DS:SI B. CS:IP C. SS:SP D. ES:DI 正确答案:B 2.(单选题)当RESET信号进入高电平状态时&#xff0c;将使8086的()寄存器初始化为0FFFFH A. SS B. DS C. ES D. CS 正确答案:D 3.(单选题)堆栈段寄存器是( …...

[java基础-JVM篇]1_JVM自动内存管理

JVM内存管理涉及但不限于类加载、对象分配、垃圾回收等&#xff0c;本篇主要记录运行时数据区域与对象相关内容。 内容主要来源《深入理解Java虚拟机&#xff1a;JVM高级特性与最佳实践》与官方文档&#xff0c;理解与表述错漏之处恳请各位大佬指正。 目录 运行时数据区域 栈 栈…...

安宝特科技 | Vuzix Z100智能眼镜+AugmentOS:重新定义AI可穿戴设备的未来——从操作系统到硬件生态,如何掀起无感智能革命?

一、AugmentOS&#xff1a;AI可穿戴的“操作系统革命” 2025年2月3日&#xff0c;Vuzix与AI人机交互团队Mentra联合推出的AugmentOS&#xff0c;被业内视为智能眼镜领域的“iOS时刻”。这款全球首个专为智能眼镜设计的通用操作系统&#xff0c;通过三大突破重新定义了AI可穿戴…...

Unity FBXExport导出的FBX无法在Blender打开

将FBX转换为obj&#xff1a; Convert 3D models online - free and secure...

UE5销毁Actor,移动Actor,简单的空气墙的制作

1.销毁Actor 1.Actor中存在Destory()函数和Destoryed()函数 Destory()函数是成员函数&#xff0c;它会立即标记 Actor 为销毁状态&#xff0c;并且会从场景中移除该 Actor。它会触发生命周期中的销毁过程&#xff0c;调用 Destroy() 后&#xff0c;Actor 立即进入销毁过程。具体…...

【python】提取word\pdf格式内容到txt文件

一、使用pdfminer提取 import os import re from pdfminer.high_level import extract_text import docx2txt import jiebadef read_pdf(file_path):"""读取 PDF 文件内容:param file_path: PDF 文件路径:return: 文件内容文本"""try:text ext…...

002简单MaterialApp主题和Scaffold脚手架

002最简单的MaterialApp主题和Scaffold脚手架使用导航栏_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1RZ421p7BL?spm_id_from333.788.videopod.episodes&vd_source68aea1c1d33b45ca3285a52d4ef7365f&p1501.MaterialApp纯净的 /*MaterialApp 是主题,自带方向设…...

jdk21下载、安装(Windows、Linux、macOS)

Windows 系统 1. 下载安装 访问 Oracle 官方 JDK 下载页面 或 OpenJDK 下载页面&#xff0c;根据自己的系统选择合适的 Windows 版本进行下载&#xff08;通常选择 .msi 安装包&#xff09;。 2. 配置环境变量 右键点击 “此电脑”&#xff0c;选择 “属性”。 在左侧导航栏…...

Baklib知识中台引领服务智能化

智能中枢系统架构解析 Baklib 知识中台的智能中枢系统采用分层解耦设计&#xff0c;通过数据接入层、知识处理层与服务输出层的三级架构实现全链路智能化管理。在数据接入层&#xff0c;系统支持多源异构数据的实时采集与标准化清洗&#xff0c;涵盖结构化数据&#xff08;如客…...

Spring源码分析の循环依赖

文章目录 前言一、循环依赖问题二、循环依赖的解决三、整体流程分析 前言 常见的可能存在循环依赖的情况如下&#xff1a; 两个bean中互相持有对方作为自己的属性。   类似于&#xff1a; 两个bean中互相持有对方作为自己的属性&#xff0c;且在构造时就需要传入&#xff1a…...

检查SSH安全配置-关于“MaxStartups参数”

官方文档介绍 在《检查SSH安全配置-sshd服务端未认证连接最大并发量配置》中我们简略地阐述了“MaxStartups参数”在SSH安全配置中的意义。但是&#xff0c;并未对该参数做详细说明。 为啥没有详细说明呢&#xff1f;因为俺也没弄明白&#xff01; 我们先看一下sshd_config的…...

某查”平台请求头反爬技术解析与应对

一、请求头反爬技术概述 请求头&#xff08;HTTP Header&#xff09;是 HTTP 协议中用于在客户端和服务器之间传递信息的一部分。它包含了请求的来源、用户代理、内容类型等关键信息。许多网站通过检查请求头中的特定字段来判断请求是否来自合法的浏览器&#xff0c;从而防止爬…...

MOE结构解读和deepseek的MoE结构

不管dense还是MoE&#xff08;Mixture of Experts&#xff09;都是基于transformer的。 下面回顾下解码器块的主要架构&#xff1a; 注意力机制-层归一化&残差连接-FFN前馈神经网络-层归一化&残差连接。 dense模型是沿用了这个一架构&#xff0c;将post-norm换为pre-no…...

LLM+多智能体协作:基于CrewAI与DeepSeek的邮件自动化实践

文章目录 引言理解 Flows&#xff08;工作流&#xff09;与 Crews&#xff08;协作组&#xff09;一、环境准备与工具安装1.1 Python环境搭建1.2 创建并激活虚拟环境1.3 安装核心依赖库&#xff08;crewai、litellm&#xff09; 二、本地DeepSeek R1大模型部署2.1 Ollama框架安…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

毫米波雷达基础理论(3D+4D)

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

实战三:开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...