构建基于小型表单的JS应用程序：使用ES6的分步指南

在下面的文章中，我将概述在学习如何使用ES6构建基于表单的JS应用程序时使用的注释。这个特定的示例是“食谱箱”（在Flatiron学校进行的出色，深入的讨论会是基于此的！）。

开始之前的注意事项

请记住：在构建函数时，请始终在每个函数的主体中包含console.log（某些东西），以确保所有内容均已连接！我开发程序时控制台记录是我作为开发人员学到的最好的东西之一。当我刚起步时，它似乎没有用，但是我拥有的工作和生活经验越多，我越意识到细致的事情。在厨房打线的人们已经到位。作家使用大纲和注释。程序员在进行调试时会进行某种方式的调试（无论是使用调试器，控制台日志，TDD还是任何其他工具，重点实际上只是您在做某事 。）

从HTML开始

对第一部分进行HTML建模（静态），该部分将是用户要与之交互的第一个屏幕：

在没有javascript文件之前，不会有任何交互，因此我们将从连接页面开始。

将JavaScript文件链接到文档，并确保刷新页面后，您看到控制台中正在执行的代码。确保在HTML中包含<script src =” index.js”> </ script>。请记住，底部脚本src可以访问其上方源中的所有信息，但是顶部脚本src不能访问其下方源中的内容。经常在头脑中，至少现在使用应用程序

启动index.js

使用“ DOMContentLoaded”添加一个事件侦听器。请记住，我们所有的javascript代码主体最终都将驻留在此函数内。您还可以在这里使用其他功能，例如window.onload（）

开始将事件处理程序绑定到HTML

首先，创建一个连接到表单的简单事件处理程序。从提交事件触发的事件开始。提交表单时，控制台会记录一些日志以查看事件处理程序是否正常工作。

请记住，JavaScript处理事件的方式是通过父节点和子节点。每当我们触发事件时，事件就会冒起，从孩子和父母到最高的父母，然后又回落。这是什么意思？这意味着所有被单击（或附加了某种事件处理程序）的元素的所有父项都将接收该click事件。这允许事件委托。

注意：如果突然发生了多个事件，或者一个事件触发了太多或不正确的响应，则说明事件处理程序存在问题

现在，在提交表单时，在这种情况下（或表单的任何输入内容）将成分名称写入控制台。

这样可以确保事件处理程序正常工作并在适当的时间被触发。这意味着您可以获取表单的VALUE并将其写入控制台。确保它是表单输入字段中的值（与事件侦听器中的表单ID值不同！），然后将其记录到控制台后清除该值。

渲染到页面

由于连接已经过测试，并且您可以确定正确的信息，因此我们希望动态生成一个订单项，并将其附加到页面提交时HTML表单中的无序列表中。

首先，我们将以不跟踪成分的方式进行此操作。没有任何对象，等等。第一步只是使它出现在页面上。

通过创建所需类型的元素来制作新成分。在此示例中，这是一个<li>。

然后将新实例设置为此值。将新成分附加到元素的类型。

从本质上讲，以上三个步骤：制作了元素，有了值，现在将值附加到元素上。

然后，从您创建的HTML中找到UL，并在index.html文件上添加一个id标记。然后，使用getElementByID（）将刚刚创建的新元素（带有值）添加到此UL中。

重构为单独的功能

现在，我们将其分离为自己的函数，并将该函数作为参数传递给顶部的事件侦听器

切记不要调用该函数，而只是将其称为参数。（这是关于JavaScript的最好的事情之一-通过引用传递非常有用！）

这正在以一种无状态的方式解决该问题-我们添加了一个LI元素，然后该元素基本上不再可访问。但是，如果我们要跟踪此情况，则必须添加一些内容来跟踪状态和上下文-我们要维护状态和运行时以某种程度了解我们拥有多少成分的上下文…

这是无状态方式：

如果要列出成分清单，我们怎么能代表一种成分？我们基本上只需要知道一种成分看起来最简单的形式即可。那是什么？具有name属性和字符串的javascript对象。

关于数据结构的思考

我们如何做到这一点？您可以创建一个JavaScript“类”以生成对象的实例，也可以仅创建一个对象！

对象和类实例之间有什么区别？上课更像是工厂。它可以一遍又一遍地使该类的许多对象遵循相同的规范。

另外，您可以使用数组来跟踪对象。

这个例子是关于什么是最小的方法，我们可以访问，存储和使用数据的最简单的方法。其他更复杂的数据结构将适用于较大的应用程序。

因此，在这种情况下，使用键“ name”创建一个对象，并将所有这些对象存储在一个数组中。因此，首先将数组分配给一个常量。

关于let vs. const的注释

我们如何确定let或const？这取决于重新分配。每当我们说var x =就是一个赋值。因此，如果我们更改此设置，并更改其指向的位置，则应使用LET。如果它永远不会改变，那么我们可以使用CONST。

考虑状态

我们还将创建一个将状态考虑在内的新功能。请记住，始终要防止default（）。删除对先前函数（addAnIngredient）的引用，并用我们现在正在制作的新函数替换它：

然后，在对象上工作。这个新函数应该创建一个带有名称的新函数，并且我们应该将该对象登录到控制台。创建一个新对象，添加name属性，并将其设置为输入值。

这是使用对象的新重构函数：

这是功能使用Chrome开发人员工具打印到控制台的对象的示例。

现在，每次添加元素时，它仅创建一个对象。但是，创建了一个新元素，而另一种则被丢弃。那不是很好！因此，现在，在创建每个对象时，将其添加到数组中。每次更新时，让功能控制台记录整个阵列，以确保对象添加正确。

概述：

使用新功能附加到HTML

现在，有一个JS版本的配料，但是需要有一个<li>附加到HTML上，这些对象才能在页面上显示为文本。为此，请遍历该数组并生成一个字符串，该字符串表示同一函数中的所有<li>。

然后，在index.html文件中找到应包含文本的div并替换其内容。为什么要更换？它的效率略低，并且如果数组变大，效率可能会极低，但是通过每次重新渲染，拥有单一的事实来源或一个用于管理我们状态的变量会更容易。

怎么写

<li>标记始终包围传递并随后加入的任何插值。整个字符串将传递到内部HTML，然后HTML将其读取为HTML文件。

那真的是什么样子？

"<li>Salt</li><li>Pepper</li><li>Onions</li><li>Butter</li><li>Stock</li>"

然后，此字符串将传递到index.html文件，在该文件中，该字符串与其他任何HTML一样被读取。如何通过？将div的innerHTML设置为该字符串的值（如上所述）。

向表单添加其他元素

现在，继续从食品储藏室中选择配料，将它们添加到配方中（复选框），并在配方中添加注释（大文本字段）以制作完整的配方！

从静态模型开始，以确保复选框可以正常工作；文本区域描述步骤或注释；以及保存配方。所有这些都应该放在配料容器下面的div中，您可以将其视为应用程序的单独部分。

现在已经完成了模拟，遍历数组，并将成分添加到复选框列表中，然后确定是否已将其选中。

如何用代码做到这一点？ .checked（）返回一个布尔值！

首先，动态生成复选框HTML字符串。

就像以前一样，一个函数会返回带有适当html标签的长文本字符串（从所有Ingredients数组），以生成这些复选框。

现在，将此函数的结果传递给HTML。添加成分时，列出并输入复选框。

现在，遍历数组并找到所有选中的复选框并找到匹配的成分（已连接到选中的复选框）

在此实例中使用的一个很好的CSS选择器是document.querySelectorAll（“ input [type ='checkbox']”））），用于选择所有复选框。

注意：这不是数组！它看起来像一个数组。它是一个节点列表 -与该查询选择器匹配的所有元素。我们可以在这里使用forEach（），但随后我们将不得不做一些不同的事情。

对于每个我们要传递的回调函数 ，请查看是否选中了这些框，找到匹配的成分，然后将匹配的成分对象的名称添加到数组中。

参见下文，使用匿名箭头功能（此示例中ES6的许多优点之一！）

将其与带有三个键的JavaScript对象放在一起：名称，描述和成分（成分是此最新函数的返回值）。

所有这些都来自输入字段，它使我们可以返回代表配方的对象-您可能想要一个配方或配方的对象数组。

再次，如前所述，遍历数组以生成HTML来生成配方。设置container.innerHTML =数组中的字符串。

这会将食谱添加到食谱集合中！

From: https://hackernoon.com/building-small-form-based-js-apps-step-by-step-with-es6-54a73fb8609