监听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框架安…...
KubeSphere 容器平台高可用:环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:KubeSphere 容器平台高可用:环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?
编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
挑战杯推荐项目
“人工智能”创意赛 - 智能艺术创作助手:借助大模型技术,开发能根据用户输入的主题、风格等要求,生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用,帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中,iftop是网络管理的得力助手,能实时监控网络流量、连接情况等,帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件,常用于在两个集合之间进行数据转移,如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model:绑定右侧列表的值&…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径, 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解,但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后,通常在该文件中会出现以下配置&…...
C++ 基础特性深度解析
目录 引言 一、命名空间(namespace) C 中的命名空间 与 C 语言的对比 二、缺省参数 C 中的缺省参数 与 C 语言的对比 三、引用(reference) C 中的引用 与 C 语言的对比 四、inline(内联函数…...
python如何将word的doc另存为docx
将 DOCX 文件另存为 DOCX 格式(Python 实现) 在 Python 中,你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是,.doc 是旧的 Word 格式,而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
LLM基础1_语言模型如何处理文本
基于GitHub项目:https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken:OpenAI开发的专业"分词器" torch:Facebook开发的强力计算引擎,相当于超级计算器 理解词嵌入:给词语画"…...
