javascript - 最佳实践 - 在显示 :none, 的文档中预写 HTML 或使用 JS 创建？

Question

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

我想知道什么是最佳实践 - 在 HTML 文档中编写所有对话框和选项卡，并显示:对所有这些都没有，或者每次用户进行相关操作时使用 JS 或 jQuery 即时创建这些 HTML 部分互动。

在性能、易于开发、可读性等方面哪个更好？

任何帮助将不胜感激。

Answer 1

我会尽力解决这个问题。

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

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

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

现在，谈谈性能。

当您使用内联样式时，您告诉浏览器的基本上是“嘿，对于每个页面页面 View ，将这些样式应用于所有这些元素”。现在，这很明显为什么这是不好的。您无法缓存和存储您的 css，并且基本上每次都会强制浏览器重新呈现您的样式。使用外部 CSS 文件实际上可以帮助您加快网站速度，因为浏览器会对其进行缓存。

那是 css 部分。

您询问的 javascript。

正如我所说，用 css 隐藏东西，用 javascript 显示。现在你为什么要这样做而不是把所有东西都拉进去？好吧，你可以两者兼顾。如果你只是一个网络浏览器体验那么你可以做任何一个，没关系。我自己更喜欢在 DOM 中包含一些东西，因为它与内容相关，如果你是一个拥有数十个 ajax 调用的大型应用程序，只会让维护变得更加困难。我相信如果你必须使用 ajax 来确保它是重要的并且是合乎逻辑的，而不仅仅是为了好玩(我认为这适用于你可以随意使用 jQuery 和纯 javascript 的情况)。

例如，如果您使用的是 backbone.js，它基于 View 并在您的前端引入某种形式的“MVC”，使您能够拥有可以从服务器拉取内容的 subview 的 View 。

希望对做出决定有所帮助! :)