初级开发人员如何成功创建项目

原文： https://www.freecodecamp.org/news/how-to-build-projects-as-a-junior-developer/

几个月前，我偶然发现了一个令我感兴趣的编程挑战。事情是这样的：

Fun frontend question I was asked in an interview one time

Build six squares with no color

Every time you click one, it turns green

When the last square turns green, they all go back to no color in backwards sequence to which it was clicked (not all at once)
— Hussien 🇨🇦 (@hussien_coding) October 3, 2022

提到这个编程挑战的推特

任务看似简单：创建六个没有颜色的方块，让每个方块在被点击时都变成绿色。然后，当最后一个方块变成绿色时，让它们按照点击的相反顺序全部变回无色。

我很想测试一下团队中一些刚开始从事技术工作的初级开发人员的技能，因此我与他们分享了这个挑战。但结果却出乎我的意料。

尽管这个挑战看起来很简单，但结果却各不相同。一些学生成功地创建了一个解决方案，而另一些学生则在所需的编程概念上苦苦挣扎。

这时我意识到，这对很多人来说都是一个很好的机会。因此，如果你是一名初级开发人员，发现创建自己的作品集/演示项目具有挑战性，请不要害怕！这篇文章将指导你以简单直接的方式成功创建一个项目。

本文适合哪些人阅读？

这篇文章是专门写给那些在创建自己的个人项目时可能会遇到困难的初级开发人的。

如果你经常发现自己依赖于教程，或者觉得自己缺乏独立创建项目的创造力，那么这篇文章就是为你准备的。

开始

让我们来看看我发给学生们的挑战：

创建六个无色方块
每点击一个方块，它就会变成绿色 
当最后一个方块变绿时，所有方块都会按点击的反向顺序变回无色（而不是同时变回无色）

如果你是面临这一挑战的学生之一，你会先做什么？虽然直接进入代码编写很有诱惑力，但重要的是要认识到，编写代码实际上是构建项目的最后一步。

那么，第一步是什么呢？第一步是思考。是的，我的意思是停下来思考你要解决的问题。

如何思考问题

在处理一个项目时，重要的是将其视为一个需要解决的问题。花点时间仔细考虑问题，然后将其分解成更小的部分。

要做到这一点，你可能会发现离开电脑，拿起笔和纸是很有帮助的。

例如，遇到任何挑战时，你都可以先把项目分解成更容易处理的部分。这可能包括：

创建六个方块
确定在点击时改变方块颜色的方法
创建一种机制来跟踪哪些方块被点击了
设计一种方法，让方块按照点击的相反顺序恢复原状

无论一个项目看起来有多大，把它分解成更小的部分总是很重要的。这样就能更容易地逐一解决每一个单独的部分，同时保持有序和专注。

因此，面对大型项目时，不要被吓倒。相反，你可以花时间将其分解成更小的部分，然后集中精力逐一解决。这样做，你就能井井有条、全神贯注，最终在项目中取得更大的成功。

在花了一些时间仔细考虑这个挑战后，我想出了一个可能的解决方案。以下就是我的想法：

// 第 1 步：创建六个方块

- 在 HTML 中创建六个单独的按钮 
- 给每个按钮一个类名为 square
- 赋予它们唯一的 ID

// 第 2 步：确定在点击时改变按钮颜色的方法

- 为每个按钮添加一个 CLICK 事件监听器
- 调用一个名为 UpdateSquares() 的函数来改变点击按钮的颜色

// 第 3 步：创建一种机制来跟踪哪些方块被点击了

- 创建一个名为 `array_sqr` 的数组，用于存储被点击按钮的唯一 ID
- 当按钮被点击时，将 ID 添加到数组中

// 第 4 步：设计一种方法，使方块按点击的相反顺序恢复到原始状态

- 当 `array_sqr.length == 6` 时，调用一个名为 ReverseSquares() 的函数
- 在 ReverseSquares() 函数中，遍历 `array_sqr`
- 在循环中，用 `array_sqr` 中的唯一 ID 选择每个按钮
- 对选中的按钮移除绿色

在认真思考了项目之后，现在就可以进入下一步，即实际构建项目。

如何解决问题并构建解决方案

在仔细考虑了挑战之后，就该开始构建项目了。让我们来看看具体步骤：

第 1 步：创建六个方块

在这一步中，我们要做三件事：在 HTML 中创建六个单独的按钮，给每个按钮赋予一个 square 类名，并给它们赋予唯一的 ID。

HTML 是这样的：

<body>
    <div class="wrapper">
        <button class="square" id="1">
            Button 1
        </button>
        <button class="square" id="2">
            Button 2
        </button>
        <button class="square" id="3">
            Button 3
        </button>
        <button class="square" id="4">
            Button 4
        </button>
        <button class="square" id="5">
            Button 5
        </button>
        <button class="square" id="6">
            Button 6
        </button>
    </div>
</body>
<script src="script.js"></script>

以上，我们创建了具有唯一 ID 的按钮，就像我们写下的那样。

第 2 步：确定一种在点击时改变按钮颜色的方法

在这一步中，我们只有两项任务：为每个按钮添加一个 CLICK 事件监听器，然后调用一个名为 UpdateSquares() 的函数来更改被点击按钮的颜色。

我们将使用 JavaScript 来完成这项工作，因此我们将创建一个名为 script.js 的新文件，并添加以下代码：

const buttons = document.querySelectorAll(".square");

for (const button of buttons) {
    button.addEventListener("click", UpdateSquares);
}

function UpdateSquares(event) {
    const btn = event.target;
    btn.style.backgroundColor = 'green';
    array_sqr.push(btn.id);
}

第 3 步：创建一种机制来跟踪哪些方块被点击

下一步，我们需要创建一个名为 array_sqr 的空数组，用于存储被点击按钮的唯一 ID。然后，当按钮被点击时，我们需要将 ID 添加到数组中。通过修改代码，我们可以实现上述功能：

…
let array_sqr = []; // 创建一个空数组

function UpdateSquares(event) {
    const btn = event.target;
    btn.style.backgroundColor = 'green';
    array_sqr.push(btn.id); // 将 ID 添加到数组中
}

在上述代码中，我们通过将按钮存储在数组中来跟踪按钮的点击方式。

第 4 步：设计一种方法，让方块按照点击的相反顺序返回到原始状态

在最后一步中，当 array_sqr.length == 6 时，我们必须调用函数 ReverseSquares()。

在 ReverseSquares() 函数中，对 array_sqr 进行遍历。在遍历中，选择 array_sqr 中具有唯一 ID 的每个按钮，并移除所选按钮上的绿色。

下面是执行此操作的代码：

const buttons = document.querySelectorAll(".square");

for (const button of buttons) {
    button.addEventListener("click", UpdateSquares);
}

let array_sqr = [];

function UpdateSquares(event) {
    const btn = event.target;
    btn.style.backgroundColor = 'green';
    array_sqr.push(btn.id);

    if (array_sqr.length == 6) {
        ReverseSquares();
    }
}

function ReverseSquares() {
    array_sqr.reverse();

    for (const id of array_sqr) {
        const reverse_btn = document.getElementById(id);

        // 移除颜色
        reverse_btn.style.backgroundColor = 'white';

        /* 也清空数组 */
        array_sqr = [];
    }
}

有了上面的代码，我们实际上就完成了这个项目，而且它的运行效果与预期的差不多。请看下面的演示：

唯一需要解决的问题是，目前所有颜色都是同时移除的。因此，我们需要解决这个问题，这将是我们构建项目的最后一个环节。

如何改进解决方案

我们的项目目前存在一个问题，即所有方块中的颜色都同时被移除。因此，我们需要解决这个问题。

每个项目都必须经历更新和修复这一关键步骤。在第一次尝试时就做出一个完美的项目是很难的。我甚至没有在第一次尝试时就制作出本教程中的 demo。

改进项目有时甚至比创建项目本身还要困难。有趣的事实是：我花了更多的时间让颜色在不同的时间间隔内变化，而不是为本教程中使用的 demo 编写代码。

在这一步骤中，我通常会上网搜索，有时甚至会向他人寻求帮助。这样做完全没有问题，并不会让你成为一个糟糕的开发者。

我们要做的就是像这样修改 ReverseSquares() 函数：

function ReverseSquares() {
    array_sqr.reverse();
    // 使用 for...of 循环为每个按钮设置不同的 timeout
    for (const [index, id] of array_sqr.entries()) {
        const reverse_btn = document.getElementById(id);

        // 延迟后去除颜色，每个按钮的延迟时间增加
        setTimeout(() => {
            reverse_btn.style.backgroundColor = 'white';
        }, index * 1000);

        /* 也清空数组 */
        array_sqr = [];
    }
}

完成这些后，你就有了可以运行的解决方案。它可能并不完美，但它能解决问题，这就很棒。

结语

对初级开发人员来说，创建项目可能很有挑战性。但是，通过系统地思考问题、规划代码、实际编码，然后改进解决方案，你可以成功地创建项目，展示你的技能和创造力。

不要害怕将大型项目分解成更小、更易于管理的部分。请记住，改进是开发过程中不可或缺的一部分。

如果你有任何问题，请随时在 Twitter 上留言：@sprucekhalifa，不要忘记关注我，查看更多见解和更新。Happy coding!

图片来自 Unsplash，作者 Scott Graham