Javascript 性能：侦听所有表单元素更改以将所有动态属性与新数据同步

有一种简单的形式：

<form>
    <input type="checkbox" name="checkbox"> Checkbox
    <input type="email" name="email">
    <button>Submit</button>
</form>

复选框
提交

我以前也做过类似的事情，不推荐您当前的路线

原因：

• 您正在使用eval——有一个表达：“eval是邪恶的”，这基本上是正确的，只有在没有其他选择的情况下，您才应该使用eval
• 您每次都在循环所有输入，即使大多数输入没有任何变化。如您所述，这将在浏览器上造成不必要的负载

对于解决方案：

• 尝试将JSON编码块中的字段放入HTML中，如：

• 以上允许对每个元素进行多个检查（您可以选择和/或一起进行检查）
• 使用JSON解析数据。解析
• 基于任何给定输入的ID构建反向查找对象——查找所有依赖于该输入的对象（如果这是动态的，那么这部分将是一个小问题）
• 输入更改时，递归遍历所有依赖项，并显示/隐藏它们

下面是一个实现类似于您正在寻找的东西的提琴：

---

如果这不是您想要的，请务必让我知道。

Big thx，谢谢分享您的经验。据我所知，只有当我们评估用户提交的一些数据时，浏览器JS中的“eval是邪恶的”。顺便说一句，JSON.Parse方法看起来很有前途，必须花一些时间来使用它。再次感谢您，我将在玩了一些沙盒游戏后回来）@MaxCore在这种情况下eval不好的唯一原因是它也会对浏览器造成压力，因为它无法优化您正在做的任何事情。同时享受-这是一个非常有趣的问题@MaxCore还有一件事——您可以通过检查子项在递归部分之前是否已隐藏来进一步优化子项检查。我将把这部分留给你。如果你感兴趣，你不会相信，但我遵循了你的方法，找到了一个避免evals（和json）的解决方案，使代码更干净，并且只设置那些真正受影响的属性（如你所说，通过反向查找对象），最终得到“genius”=）@MaxCore我也创建了类似的东西：-顺便说一句，MaxCore项目非常酷