javascript - 是否可以在 HTML 文件中创建一个可以在同一 HTML 文件中编辑的 Javascript 对象？

Question

我目前正在设计一个网站，并且正在创建 Javascript 对象，然后这些对象将通过 fetch() API 发送到服务器。因此，目前在我的代码中，我使用输入组来让用户输入一些参数。出于效率原因，我决定用户输入的每个输入都将成为我的 Javascript 对象的参数，但我想知道是否可以创建某种“全局可访问”(或类似的东西)对象，让我基本上将每个输入放入某个对象参数中。

<div class="col-xs-2">
    <div class="input-group mb-3">
        <input type="text" class="form-control" 
                 placeholder="Feed Flow" aria-label="Feed Flow" 
                 aria-describedby="basic-addon2">
        <div class="input-group-append">
            <span class="input-group-text" id="basic- 
                         addon3">m<sup>3</sup>/d</span>
        </div>
    </div>
</div>

这就是代码。这将要求用户输入海水淡化过程中水的供给流量的数字。我想扫描输入框中的所有内容并将其传递给名为 ReverseOsmosis 的对象的参数。那么在另一种语言中看起来像:ReverseOsmosis.feed_flow=input(假设输入是用户输入的内容)

Answer 1

当您将输入控件放入 form 标记中时，您可以使用 FormData构造函数来获取键/值对。这些表示为对(具有 2 个元素的数组)，但可以轻松转换为普通对象，例如使用 Object.fromEntries :

document.querySelector('form').addEventListener("change", function () {
  var data = new FormData(this);
  console.log(Object.fromEntries(data.entries()));
});

<form onsubmit="return false;">
  name: <input name="name"><br>
  address: <input name="address"><br>
</form>

上面使用的 onsubmit 属性将阻止表单在单击 button 元素时提交(因为它们默认为“submit”类型)。请参阅"Can I make a button not submit a form?"有关这方面的更多信息和替代方案。