监听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;

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