使用 Unsplash 构建猫图像生成器😻

封面图片由@kivenzhao提供

你是一个喜欢玩耍的学习者吗？你应该是！玩耍能激发你的创造力，并可能帮助你进入心流状态。我刚接触编程，所以以玩乐的方式学习可以减少挫败感，延长我的练习时间。

我写这篇文章是为了让其他新手看看如何让项目变得有趣。作为新手，我喜欢那些包含更多阅读资源的文章，所以我确保在文章中都包含这些资源！

在我们深入研究代码之前，请先点击下面的随机播放按钮来查看 Unsplash 猫的实际效果 👇

我对这个项目有三个目标：了解 Javascript 函数、For...of 循环，以及与猫一起保持乐趣！

规划你的工作。执行你的计划。

猫图像生成器需要四个东西：

1. 代码之家✔️

Codepen是一款流行的基于浏览器的代码编辑器，对新手非常友好。它非常适合像Unsplash 的 Cats这样的项目。此外，它还支持热加载功能，所以每次我修改代码时，都会出现一组新的猫咪图片！这帮助我在遇到困难时也能保持微笑。

2. 漂亮的猫咪照片✔️

Unsplash拥有众多优秀的摄影师，他们分享免费的高质量图片。他们的Unsplash Source工具提供随机图片，并提供基本的查询参数。它非常适合小型低流量项目。如果您正在构建高流量应用，并且需要强大的参数，则应该使用他们的免费 API。

3. 一点设计✔️

我小时候很喜欢 Lisa Frank 使用的鲜艳色彩。我受其启发，创作了色彩缤纷的背景。我使用了这个CSS 渐变生成器工具来挑选鲜艳的颜色。我喜欢那些让设计更轻松的工具！图片的样式使用了 CSS 网格，但由于本文的重点是 Javascript，我不会详细介绍样式。

4. 一些代码✔️

HTML 标记需要 3 个带有 src 标签的图像元素和一个按钮元素：

<button id="shuffleButton" type="button" class="button" alt="Shuffle Button">Shuffle</button>


<div class="grid">
  <img class="cube" src="" alt="cat picture">
  <img class="cube" src="" alt="cat picture">
  <img class="cube" src="" alt="cat picture">
</div>

我们需要一个函数来请求 Unsplash 的 URL 响应。以下是核心元素：

1. 一个常量，用于保存来自 Unsplash Source 的 URL 及其一些参数。
2. 用于保存 img 元素的常量。
3. 一个用于保存随机数生成器的常量。我们将使用它为每个 URL 请求附加唯一的签名。（您稍后就会明白我们为什么需要它。）
4. For...of 循环遍历 img 元素并修改其 src 值。

首先，让我们声明一个 URL 常量。以下是Unsplash 猫咪的完整 URL 常量：

const url = "https://source.unsplash.com/collection/139386/200x200/?sig=";

以下是 URL 的详细内容：

1. Unplash 的基本 URL：https://source.unsplash.com/

2. 该collection参数后跟唯一的集合编号。例如，我使用了由@d​​ylka
   策划的猫咪图片集合。

   该系列的网址为：https://unsplash.com/collections/139386/cats。

   我们需要 URL 的号码：139386

3. 图像尺寸参数：200x200。

4. sig 参数：?sig=。

接下来，让我们声明保存 img 元素的常量，如下所示：

const images = document.querySelectorAll("img");

现在让我们声明一个常量来保存随机数生成器。每次我们发出新请求时，我们都会在 sig 参数后附加一个唯一的数字。

我们之所以需要这样做，是因为浏览器会尝试提供Unsplash URL 响应的缓存副本，而不是重新生成响应。这通常是有帮助的行为，但在本例中会导致图片重复。唯一的数字签名会强制浏览器重新发起请求，否则会被服务器端忽略。虽然偶尔仍会出现重复图片，但频率会大大降低。

const randomNum = () => {
  return Math.floor(Math.random() * 1000);
};

现在让我们创建一个函数，它遍历 img 元素，并使用我们声明的常量，将随机的 Unsplash URL 填充到每个 img 的 src 属性值中。代码如下：

function shufflePics() {
  for (let att of images) {
    att.src = `${url}${randomNum()}`;
    {
      console.log(att.src);
    }
  }
}

我使用 For...of 循环来迭代 img 元素，因为它可以迭代 NodeList 对象，而这正是 querySelectorAll() 方法返回的图像常量。虽然还有其他方法可以迭代 NodeList 对象，但作为初学者，我发现 For...of 循环更容易理解。

图像常量保存图像元素，但要访问它们的 src 属性值，我们需要使用点符号，如下所示：att.src。

现在我们需要将 URL 和 randomNum 常量赋值给att.src。我们像这样包装它们，${}- 在 ES6 中这被称为表达式。表达式是它们所包含的字符串（URL 和随机数）的占位符。然后，表达式被包裹在反引号中，将它们组合成一个字符串。

现在，该函数会用来自 Unsplash 的唯一 URL 响应填充每个 src 属性值。太棒了！🥳

最后，我们需要将按钮与 shufflePics 函数绑定，以便每次点击时获取三张新的猫咪图片。我们通过使用该方法选择按钮querySelector()并添加事件监听器来实现这一点。代码如下：

document.querySelector("button").addEventListener("click", shufflePics);

就这样！现在我们可以无限次地浏览 Unsplash 收藏里的猫咪照片了！

下次你开始教程或业余项目的时候，我邀请你玩得开心点！这会开阔你的思路，发现新的可能性，如果你和我一样，它还能帮助你保持专注。

制作Unsplash 的猫咪图集超级有趣，我迫不及待地想改进它！我迫不及待地想学习如何使用 Unsplash 的 API，这样我的下一个版本就能展示优秀摄影师的荣誉了。

感谢您阅读我的第一篇 Dev.to 帖子！期待您对我的代码、我们的猫咪霸主以及您如何将趣味性融入工作提出反馈。

—曼迪·哈姆扎

欢迎随时在Twitter上给我留言！

附言：不喜欢猫？试试Unsplash 的狗狗吧🐶

正如承诺的那样，这里有一些可供进一步阅读的资源。

Sheelah Brennan 的这个教程帮助我完成了这个项目。强烈推荐大家去看看！
• ✨如何自动从 Unsplash 中拉取随机图片用于原型设计。✨

理解 For...of 循环
•在 JavaScript 中通过 querySelectorAll 循环遍历 DOM 元素的 5 种方法
• Moz 关于循环和迭代的文档

理解模板文字语法
• Flavio Copes 编写的Javascript 模板文字指南
• Wes bos 编写的模板字符串
• Moz 模板文字文档
•切换到 ES6（第 2 部分：字符串插值和模板文字）

理解 const、var 和 let
• JavaScript 中 let 和 const 的作用域，作者：Wes bos

杂项。
• JavaScript：初学者的箭头函数
• Moz 关于 HTTP 缓存的文档
• $(document).ready() 与 window.onload() 与 $(window).load()