最佳实践 - 使用display:none或使用JS创建文档中的HTML预编写？

Question

我正在开发一个大型HTML5应用程序,我真的很想知道这个问题.我将有很多对话框和选项卡,将通过用户交互打开.

我想知道什么是最佳实践 - 在HTML文档中编写所有对话框和选项卡,并将display:none添加到所有文件中,或者每次用户进行相关交互时,使用JS或jQuery动态创建这些HTML部分.

在性能,易开发性,可读性等方面哪些更好？

任何帮助将不胜感激.

Answer 1

我会尽力回答这个问题。

1 - 正如我在评论中所说，避免内联样式。首先也是最重要的，这是因为内联样式破坏了 DRY。必须一遍又一遍地重复同样的事情，这对于维护和开发来说非常糟糕，因为一旦你必须在大约 100 个地方更改代码，就不要更改代码。

2 - 避免内联样式也有利于可访问性，一些屏幕阅读器和搜索引擎爬虫基于 css 选择器进行索引工作和阅读工作，因此使用内联样式将迫使它们忽略或误解事物。

3 - 当作为开发人员工作时，很容易“只是为了好玩”做内联样式，但你实际上做的是混合关注点。HTML 是内容，CSS 是设计。将这两者混合在一起通常会让人头疼，并且让我作为开发人员的工作变得非常痛苦，因为我不知道什么是样式以及如何样式。

现在，谈谈性能。

当您使用内联样式时，您告诉浏览器的基本上是“嘿，对于每个页面页面视图，将这些样式应用于所有这些元素。” 现在，这为什么不好已经变得非常明显了。您无法缓存和存储 CSS，并且基本上会强制浏览器每次都重新渲染您的样式。使用外部 CSS 文件实际上会帮助您加快网站速度，因为浏览器会缓存它。

这就是 CSS 部分。

你问过的javascript。

正如我所说，用 css 隐藏内容，用 javascript 显示。现在你为什么要这样做而不是把所有东西都拉进去呢？嗯，你可以两者都做。如果您只是一个网络浏览器体验，那么您可以选择其中之一，这并不重要。我自己更喜欢在 DOM 中添加内容，因为它与内容相关，如果您是一个大型应用程序，拥有数十个 ajax 调用，只会使维护变得更加困难。我相信，如果你必须使用 ajax 来确保它有效并且符合逻辑，而不仅仅是为了好玩（我认为这适用于只有你可以使用 jQuery 和纯 JavaScript 的情况）。

例如，如果您正在使用backbone.js，它基于视图，并将某种形式的“MVC”引入您的前端，使您能够拥有带有子视图的视图，这些子视图可以从服务器拉入内容。

希望对做决定有一点帮助！:)