dedecms电影网站源码,做湲网站,龙岗网站维护,网站设计app监听load和hashchange事件 上篇文章中#xff0c;我们已经将菜谱的数据给拿到#xff0c;并且已经可以渲染到页面上#xff0c;本篇我们将为程序添加一些事件#xff1b; 注#xff1a;本项目来自于Jonas Schmedtmann创建#xff0c;文章仅仅作为学习作用#xff01; 菜…监听load和hashchange事件 上篇文章中我们已经将菜谱的数据给拿到并且已经可以渲染到页面上本篇我们将为程序添加一些事件 注本项目来自于Jonas Schmedtmann创建文章仅仅作为学习作用 菜谱的切换
我们通过之前的API也已经发现了菜谱的获取是通过URL加上菜谱的hash值也获取到的 所以当我们点击切换菜谱的时候只需要在url后面加上菜谱的hash就可以获取到这个菜谱的那么应该怎么做呢? div classsearch-resultsul classresultsa href#664c8f193e7aa067e94e863b菜谱1/aa 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;本篇将是这个程序的核心功能但是我们的代码并不是非常的清晰的书写这时候就要谈谈我们在流程图里面所说的架构了下篇文章见
