icode9的 JavaScript 伪代码步骤。
作者：互联网
虽然我刚刚开始成为一名Web开发人员，但我相信解决问题和从不同角度看待问题的整体能力将帮助您在开发位置上取得成功。当您遇到特定问题时，简化问题并为自己创建任务列表确实有帮助。这就是我的伪代码对我自己派上用场的地方。让我们将其分解为几个步骤，以使其更易于理解。
首先，让我们从一个需要解决的问题开始。我有一个 Web 应用程序，我想从 JSON 服务器获取信息，并将此信息分发为服务器内每个项目的卡片格式。我想在 DOM 加载时执行此操作。
现在这是一个需要解决的非常具体的问题，但是将本段分成伪代码步骤将有助于解决您可能遇到的几个问题。首先，我从哪里开始？好吧，我们可以从我们希望此代码运行的“时间”开始。
// Add an event listener for when the DOM is loaded
document.addEventListener("DOMContentLoaded", () => {
getAllNinjas()
})
这是第一步，非常重要，因为它将引导我们朝着正确的方向前进。随着事件侦听器的添加，我们知道这将使用回调函数。这是我们的下一步！我们还将使用伪代码来分解我们的获取函数。"DOMContentLoaded"
// Create a callback function that "gets" the needed information
function getAllNinjas() {
// "GET" fetch from JSON server
fetch("http://localhost:3000/ninjas")
// Convert result to "json"
.then(res => res.json())
// take json data and send to callback function to render a card for each item within the data object
.then(ninjaData => ninjaData.forEach(ninja => renderOneNinja(ninja)))
}
因此，在伪编码和编码下一步之后，您可以看到问题开始变得多么复杂，但是我们正在创建的步骤是多么基本和简单。这些基本步骤有助于保持专注并指导您完成创建工作代码的过程。
因此，让我们看一下我们的整体步骤。
// Add an event listener for when the DOM is loaded
// Create a callback function that "gets" the needed information
看看弄清楚下一步是多么容易！我们需要创建另一个回调函数来处理我们刚刚从 JSON 服务器获取的数据。在创建函数的过程中，再次重要的是，我们使用伪代码来创建创建“handle”函数的步骤。
// Create a callback function that "handles" the fetch data and renders each item to the DOM or a "DOM manipulation function
function renderOneNinja(ninja) {
// Create an container element to hold our card
const ninjaCard = document.createElement("div")
// Add a class name to each card
ninjaCard.classList.add("ninja-card")
// Add an ID to the element that includes the `dataitem.name`
ninjaCard.id = `${ninja.name}`
// Format the elements innerHTML using iteration through the item within the data object
ninjaCard.innerHTML =`
<div class="front">
<img class="img" src="${ninja.imageUrl}">
<p class="name">Name:${ninja.name}</p>
<p class="village">Village:${ninja.village}</p>
<p class="rank">Rank:${ninja.rank}</p>
<p class="power" style="display:none;">${ninja.power}</p>
</div>
<div class="back">
<button id=one class=addBtn>Add to Squad 1</button>
<button id=two class=addBtn>Add to Squad 2</button>
</div>
`
// Add event listeners for the two buttons and the mouseenter and mouseleave (these event listeners were added on at a later time due to a different desired outcome or a different "PROBLEM".
ninjaCard.querySelector("#one").addEventListener("click", handleClickOne)
ninjaCard.querySelector("#two").addEventListener("click", handleClickTwo)
ninjaCard.addEventListener("mouseenter", handleMouse)
ninjaCard.addEventListener("mouseleave", handleMouse)
// Append the element to a container already on the DOM
document.querySelector("#ninjaContainer").appendChild(ninjaCard)
}
哇！对于一个函数来说，这需要经历很多事情，但是省略了函数创建的伪代码，让我们看看我们的任务列表是什么样子的。
// Add an event listener for when the DOM is loaded
// Create a callback function that "gets" the needed information
// Create a callback function that "handles" the fetch data and renders each item to the DOM or a "DOM manipulation function
哇！只有三个步骤可以解决我们的问题;但是，在每个步骤中都有一系列“子步骤”，允许开发人员简化获得所需结果的道路。
这是一个大问题，确实需要简化才能让自己指向正确的方向，但让我们来看看一个更简化的问题，我们仍然可以使用伪代码来解决。
所以这是我们的问题：
创建一个函数，当给定一个包含三个包含两个项目的元素对象的数组时，返回一个将幂值组合为一个值的数组。
这是一个更简单的问题，但看看它会变得多么混乱。因此，让我们对此问题进行伪编码。
// Create function "reducePower" that takes in one argument "array of three element objects"
这处理几个简单的任务，例如函数的名称以及我们将用作参数的内容。在编写此伪代码时可以引用该问题。我们的名字描述了我们想要的结果是什么，这个问题给了我们需要使用的参数。现在我们需要写出如何处理这个参数。
// Iterate through each object and find the power value
// Create a variable to hold each power value ([])
// Push each power value to the variable
我们需要获取每个对象的幂值并将它们组合成一个数组。为什么我们需要将它们组合成一个数组？让我们看看为什么。
// Use the reduce method on the array of power values which will return the total of the values.
我们只是对问题进行伪编码，并快速有效地提出了一个任务列表，以在创建代码时用作指南。现在我们像问题解决者一样思考。