javascript - Javascript 最佳实践 - 在 DOM 中隐藏元素或生成 DOM 元素

Question

我有一个关于 javascript 最佳实践的问题。

我有一个包含一些statuts 的下拉菜单。如果状态是：外部，我想显示一个表格。我不知道做到这一点的最佳方法。我是否需要从 DOM 中隐藏一个 DIV 并在需要时显示他，或者我是否需要在 jquery 中动态生成我的表单并调用 ajax 来填充一些数据。

Answer 1

这实际上取决于您的应用程序。如果您在 DOM 中已经有很多元素，并且实际需要显示此表单的可能性很小，您可能希望稍后添加它（使用 ajax），因为在大多数情况下您不需要它。但是，如果您的 DOM 负载很轻，并且在大多数情况下会显示表单，则您希望将其准备好并隐藏，以便可以快速显示。

还有一个中间地带，您可以“延迟加载”它（在页面加载时使用 javascript），并将其保存在 json 对象中，直到可以使用为止。这将使您的 DOM 保持响应，并提供更快加载表单的额外好处。

Answer 2

它取决于用户点击该元素的概率以及 DOM 中已经存在的元素数量。我建议每当用户执行操作而不是隐藏它时创建表单运行时。有一些浏览器插件可以显示页面中的所有隐藏元素。

Answer 3

除非您的页面已经异常大，或者可以从同一页面使用许多不同的表单，否则将 HTML 放入页面并从隐藏开始会给您带来所有标记都在一个中的优势放置（在代表您的页面的 HTML 文件中）并且可以更容易地以这种方式集中维护。

当您开始将标记放入您的 javascript 时，您将标记的维护分为页面的 HTML 和嵌入到页面中的 HTML。

另一方面，如果您有很多这些略有不同的表单都可以在同一个页面中使用，那么在原始 HTML 中预先指定所有可能的表单组合会变得很麻烦，您会最好通过 javascript 动态生成它，或者从模板生成它并稍作修改。