更高级的 Web 开发练习和技巧

本文最初发表于codebushi.com

这篇文章面向的是希望将开发技能提升到更高水平的 Web 开发者新手。也许你已经对 HTML、CSS 和 JavaScript 的基础知识相当熟悉，并且正在寻找提升知识和职业发展的方法。

让我们开始吧！以下是一些你可以立即练习的主题和练习，帮助你成为一名更优秀的 Web 开发者。

从 API 获取数据

数据，数据，数据！熟练掌握数据获取和操作方法对于开发人员来说至关重要。

当你构建一个简单的网站时，不需要太多地使用 API 和数据。在浏览器的 DevTools 中，你大部分时间都花在了“元素”和“CSS”选项卡上。

当你进入高级网站和应用的世界时，数据为王，你将时刻与数据打交道。你开始在 DevTools 的“网络”选项卡中查看各种请求和响应。

练习时间到了！不需要什么复杂的框架或库。我们先从创建一个非常简单的index.html文件开始。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
  </head>
  <body>
    <main id="app"></main>
  </body>
  <script src="practice.js"></script>
</html>

在底部，我们导入了一个practice.jsJavaScript 文件。为了获取数据，我们可以使用浏览器内置的Fetch API。请注意，这是一个浏览器 API，这意味着它是由 Chrome/Firefox/Safari 提供的。一些老版本的浏览器（例如 Internet Explorer）不支持此功能。因此，请不要使用 Internet Explorer。

数据将来自名为https://reqres.in的第三方 API 。第三方 API意味着其他组织已构建此 API 并将其托管在其服务器上。

// practice.js
function getData() {
  fetch("https://reqres.in/api/users")
    .then(res => {
      return res.json();
    })
    .then(json => {
      console.log(json.data);
      const html = json.data
        .map(function(item) {
          return "<p>" + item.first_name + " " + item.last_name + "</p>";
        })
        .join("");
      console.log(html);
      document.querySelector("#app").insertAdjacentHTML("afterbegin", html);
    })
    .catch(error => {
      console.log(error);
    });
}

getData();

打开浏览器，进入Network标签页。您将在控制台中看到请求以及各种日志。为了更好地可视化数据，我们对其进行了映射，并生成一些 HTML 以在页面上呈现。

操作数据、数组和对象

一旦我们获取到数据，就该对其进行处理了。上面的数据以对象数组的形式呈现给我们。熟悉数组和对象的各种用法非常重要。

处理上述数据时，我们对数组中的项进行了“映射”。如果您熟悉 JavaScript 基础知识，您可能之前遇到过该方法。然而，数组.map()上还有许多其他方法可用。

.map()、.filter()和等方法.reduce()可以帮助我们轻松地处理和操作数组。为了练习这些方法，让我们修改一下practice.js文件：

const data = [
  {
    id: 1,
    email: "george.bluth@reqres.in",
    first_name: "George",
    last_name: "Bluth",
    avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"
  },
  {
    id: 2,
    email: "janet.weaver@reqres.in",
    first_name: "Janet",
    last_name: "Weaver",
    avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"
  },
  {
    id: 3,
    email: "emma.wong@reqres.in",
    first_name: "Emma",
    last_name: "Wong",
    avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"
  },
  {
    id: 4,
    email: "eve.holt@reqres.in",
    first_name: "Eve",
    last_name: "Holt",
    avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"
  },
  {
    id: 5,
    email: "charles.morris@reqres.in",
    first_name: "Charles",
    last_name: "Morris",
    avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg"
  },
  {
    id: 6,
    email: "tracey.ramos@reqres.in",
    first_name: "Tracey",
    last_name: "Ramos",
    avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg"
  }
];

const newData = data.map(item => {
  return item.first_name;
});

console.log(newData);

我将使用上一个示例中的数据，并仅返回first_name。该newData数组现在应如下所示：

[
  "George",
  "Janet",
  "Emma",
  "Eve",
  "Charles",
  "Tracey"
]

这是一个非常简单的例子，但我个人在构建基本网站时并没有太多接触过这些方法。自从我开始更多地处理数据后，我发现自己一直在用这些方法。

您还可以使用各种JavaScript“循环”执行相同的操作，熟悉这一点也很重要。

欲了解更多练习想法，请观看Wes Bos 制作的这段精彩视频。

识别重复代码和模式

在构建网站时，我们经常重复 HTML 代码块，例如一系列框：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
  </head>
  <body>
    <main id="app">
      <section class="grid">
        <div class="box">
          <h2>Title 1</h2>
          <p>Description 1</p>
        </div>
        <div class="box">
          <h2>Title 2</h2>
          <p>Description 2</p>
        </div>
        <div class="box">
          <h2>Title 3</h2>
          <p>Description 3</p>
        </div>
        <div class="box">
          <h2>Title 4</h2>
          <p>Description 4</p>
        </div>
      </section>
    </main>
  </body>
  <script src="practice.js"></script>
</html>

很明显，我们在重复代码<div class="box">及其内容。那么，我们该如何换一种思路呢？如果我们将每个盒子的内容提取到一个对象数组中，然后让 JavaScript 对其进行映射，会怎么样？

我们可以从删除框标记开始：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
  </head>
  <body>
    <main id="app">
      <section class="grid">
      </section>
    </main>
  </body>
  <script src="practice.js"></script>
</html>

现在，在我们的 JavaScript 文件中，我们为这些盒子创建了一些静态数据。数据不一定非要来自 API，有时我们可以自己创建并循环访问。

const boxes = [
  {
    title: "Title 1",
    description: "Description 1"
  },
  {
    title: "Title 2",
    description: "Description 2"
  },
  {
    title: "Title 3",
    description: "Description 3"
  },
  {
    title: "Title 4",
    description: "Description 4"
  }
];

function renderBoxes() {
  const boxesHtml = boxes
    .map(
      box => `
      <div class="box">
        <h2>${box.title}</h2>
        <p>${box.description}</p>
      </div>
    `
    )
    .join("");
  document.querySelector(".grid").insertAdjacentHTML("afterbegin", boxesHtml);
}

renderBoxes();

我们创建一个名为的数组boxes，并添加静态数据。由于您可以完全控制这些对象的外观，因此您可以随意命名这些属性。

我们在映射时使用了一些箭头函数和模板字面量，但这些都是原生 JavaScript，并且大多数浏览器都支持。最后，我们将渲染后的 HTML 注入到我们的代码中.grid，结果与原始标记相同。

识别这些重复的模式和代码块将帮助你成为更优秀的程序员和开发者。HTML 块可以提取成可复用的“组件”，这在现代前端库中至关重要。常用函数可以合并成“实用函数”，帮助你保持代码的 DRY 原则。

提升技能的其他方法

使用前端框架

从以上示例可以看出，我们无需使用前端框架或库即可开始展现我们的开发能力。您只需使用原生 JavaScript 即可创建整个应用程序。然而，前端框架可以大大简化我们的开发工作，而且大多数公司都希望您至少熟悉一个这样的框架。

目前主流的前端框架有 React、Vue、Angular 和 Svelte。你需要尝试一下，看看哪一个适合你。我建议你选择一个并坚持使用。在你选择的前端框架中尝试一下上面的练习，看看你是否喜欢。

检查 SVG

SVG，即可缩放矢量图形，已经存在一段时间了。它们最常见的用途是图标，但 SVG 的功能远不止于此。

它们可以使用 CSS 轻松地进行样式设置和自定义，并且可以通过动画来产生一些令人惊叹的效果。

上面的文字取自Log Rocket上的这篇精彩文章。

欲了解更多信息，请访问 https://svgontheweb.com，这里是了解 SVG 的功能以及可以使用它们做的所有酷事的好地方。

查看 HTML Canvas

HTML Canvas 元素（简称<canvas>）允许您在网页上绘制各种图形。使用 Canvas，您可以实现无限的精彩内容。

您可以通过尝试此 MDN Canvas 教程来开始。

结论

希望这篇文章能激发你对 JavaScript 和数据进行更多实验和练习。这些基本都是一些入门的小教程。如果你想让我更深入地讲解任何主题，欢迎在下方留言！如果你觉得我应该在这个列表中添加其他内容，也欢迎留言。

鏂囩珷鏉ユ簮锛�https://dev.to/changoman/exercises-and-tips-for-more-advanced-web-development-17i8