监听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事件 上篇文章中,我们已经将菜谱的数据给拿到,并且已经可以渲染到页面上,本篇我们将为程序添加一些事件; 注:本项目来自于Jonas Schmedtmann创建,文章仅仅作为学习作用! 菜…...
深度剖析Seata源码:解锁分布式事务处理的核心逻辑
文章目录 写在文章开头如何使用源码(配置转掉)基于AT模式详解Seata全链路流程Seata服务端启动本地服务如何基于GlobalTransaction注解开启事务客户端如何开启分布式事务RM和TC如何协调处理分支事务RM生成回滚日志事务全局提交与回滚小结参考写在文章开头 在当今分布式系统日益…...
在 Ansys Mechanical 中解决干涉拟合
有意和无意的过盈配合在工程设计和有限元分析 (FEA) 中很常见。当两个组件重叠或接触时,就会发生这种情况,从而产生应力和变形,必须仔细分析以确保功能正常。有意干涉,例如轴和轴承之间的压配合或用于固定金…...
JMeter性能问题
性能测试中TPS上不去的几种原因 性能测试中TPS上不去的几种原因_tps一直上不去-CSDN博客 网络带宽 连接池 垃圾回收机制 压测脚本 通信连接机制 数据库配置 硬件资源 压测机 业务逻辑 系统架构 CPU过高什么原因 性能问题分析-CPU偏高 - 西瓜汁拌面 - 博客园 US C…...
美国国防部(DoD)SysML v2迁移指南项目
DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 分享一篇SysML v1向SysML v2迁移的资料。 下载地址: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信号进入高电平状态时,将使8086的()寄存器初始化为0FFFFH A. SS B. DS C. ES D. CS 正确答案:D 3.(单选题)堆栈段寄存器是( …...
[java基础-JVM篇]1_JVM自动内存管理
JVM内存管理涉及但不限于类加载、对象分配、垃圾回收等,本篇主要记录运行时数据区域与对象相关内容。 内容主要来源《深入理解Java虚拟机:JVM高级特性与最佳实践》与官方文档,理解与表述错漏之处恳请各位大佬指正。 目录 运行时数据区域 栈 栈…...
安宝特科技 | Vuzix Z100智能眼镜+AugmentOS:重新定义AI可穿戴设备的未来——从操作系统到硬件生态,如何掀起无感智能革命?
一、AugmentOS:AI可穿戴的“操作系统革命” 2025年2月3日,Vuzix与AI人机交互团队Mentra联合推出的AugmentOS,被业内视为智能眼镜领域的“iOS时刻”。这款全球首个专为智能眼镜设计的通用操作系统,通过三大突破重新定义了AI可穿戴…...
Unity FBXExport导出的FBX无法在Blender打开
将FBX转换为obj: Convert 3D models online - free and secure...
UE5销毁Actor,移动Actor,简单的空气墙的制作
1.销毁Actor 1.Actor中存在Destory()函数和Destoryed()函数 Destory()函数是成员函数,它会立即标记 Actor 为销毁状态,并且会从场景中移除该 Actor。它会触发生命周期中的销毁过程,调用 Destroy() 后,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 下载页面,根据自己的系统选择合适的 Windows 版本进行下载(通常选择 .msi 安装包)。 2. 配置环境变量 右键点击 “此电脑”,选择 “属性”。 在左侧导航栏…...
Baklib知识中台引领服务智能化
智能中枢系统架构解析 Baklib 知识中台的智能中枢系统采用分层解耦设计,通过数据接入层、知识处理层与服务输出层的三级架构实现全链路智能化管理。在数据接入层,系统支持多源异构数据的实时采集与标准化清洗,涵盖结构化数据(如客…...
Spring源码分析の循环依赖
文章目录 前言一、循环依赖问题二、循环依赖的解决三、整体流程分析 前言 常见的可能存在循环依赖的情况如下: 两个bean中互相持有对方作为自己的属性。 类似于: 两个bean中互相持有对方作为自己的属性,且在构造时就需要传入:…...
检查SSH安全配置-关于“MaxStartups参数”
官方文档介绍 在《检查SSH安全配置-sshd服务端未认证连接最大并发量配置》中我们简略地阐述了“MaxStartups参数”在SSH安全配置中的意义。但是,并未对该参数做详细说明。 为啥没有详细说明呢?因为俺也没弄明白! 我们先看一下sshd_config的…...
某查”平台请求头反爬技术解析与应对
一、请求头反爬技术概述 请求头(HTTP Header)是 HTTP 协议中用于在客户端和服务器之间传递信息的一部分。它包含了请求的来源、用户代理、内容类型等关键信息。许多网站通过检查请求头中的特定字段来判断请求是否来自合法的浏览器,从而防止爬…...
MOE结构解读和deepseek的MoE结构
不管dense还是MoE(Mixture of Experts)都是基于transformer的。 下面回顾下解码器块的主要架构: 注意力机制-层归一化&残差连接-FFN前馈神经网络-层归一化&残差连接。 dense模型是沿用了这个一架构,将post-norm换为pre-no…...
LLM+多智能体协作:基于CrewAI与DeepSeek的邮件自动化实践
文章目录 引言理解 Flows(工作流)与 Crews(协作组)一、环境准备与工具安装1.1 Python环境搭建1.2 创建并激活虚拟环境1.3 安装核心依赖库(crewai、litellm) 二、本地DeepSeek R1大模型部署2.1 Ollama框架安…...
7.4.分块查找
一.分块查找的算法思想: 1.实例: 以上述图片的顺序表为例, 该顺序表的数据元素从整体来看是乱序的,但如果把这些数据元素分成一块一块的小区间, 第一个区间[0,1]索引上的数据元素都是小于等于10的, 第二…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中,我们会遇到使用 java 调用 dll文件 的情况,此时大概率出现UnsatisfiedLinkError链接错误,原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用,结果 dll 未实现 JNI 协…...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 (一)概念解析 TRS(Total Return Swap)收益互换是一种金融衍生工具,指交易双方约定在未来一定期限内,基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径:src/utils/timer.ts 完整代码: import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API,查询的是单条数据,比如根据主键ID查询用户信息,sql如下: select id, name, age from user where id #{id}API默认返回的数据格式是多条的,如下: {&qu…...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务: test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...
Linux --进程控制
本文从以下五个方面来初步认识进程控制: 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程,创建出来的进程就是子进程,原来的进程为父进程。…...
面向无人机海岸带生态系统监测的语义分割基准数据集
描述:海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而,目前该领域仍面临一个挑战,即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...
Vue ③-生命周期 || 脚手架
生命周期 思考:什么时候可以发送初始化渲染请求?(越早越好) 什么时候可以开始操作dom?(至少dom得渲染出来) Vue生命周期: 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...
