我正在开发一个大型 HTML5 应用程序，我真的很想知道这个问题。我将有很多对话框和选项卡将通过用户交互打开。
我想知道最佳实践是什么——在 HTML 文档中使用 display:none 编写所有对话框和选项卡，或者在用户每次进行相关交互时使用 JS 或 jQuery 动态创建这些 HTML 部分。
在性能、易于开发、可读性等方面有什么更好的？
任何帮助将不胜感激。
问问题
437 次
2 回答
3
我会尽量解决这个问题。
1 - 正如我在评论中所说，避免内联样式。首先，这是因为内联样式会破坏 DRY。不得不一遍又一遍地重复同样的事情对于维护和开发来说是非常不利的，因为一旦你不得不在大约 100 个地方更改代码，而不是更改代码。
2 - 避免内联样式也有利于可访问性，一些屏幕阅读器和搜索引擎爬虫基于 css 选择器进行索引工作和阅读工作，因此使用内联样式将迫使他们忽略或误解事物。
3 - 作为开发人员工作时，很容易“只是为了好玩”来做内联样式，但你实际上在做的是混合关注点。HTML 是内容，CSS 是设计。将这两者混合通常会导致头痛，并使我作为开发人员的工作在你感到痛苦之后，因为我不知道样式是什么以及如何。
现在，进入性能。
当您使用内联样式时，您告诉浏览器的内容基本上是“嘿，对于每个页面页面视图都将这些样式应用于所有这些元素。” 现在，这变得非常明显，为什么这是不好的。您无法缓存和存储您的 css，并且基本上每次都强制浏览器重新呈现您的样式。使用外部 CSS 文件实际上会帮助您加快网站速度，因为浏览器会缓存它。
这就是css部分。
你问过的javascript。
正如我所说，用 css 隐藏东西并用 javascript 显示。现在你为什么要这样做而不是把所有东西都拉进去？好吧，你可以两者都做。如果您只是一个网络浏览器体验，那么您可以做任何一个，没关系。我自己更喜欢在 DOM 中包含内容，因为它与内容有关，如果你是一个大型应用程序，有几十个 ajax 调用只会使维护变得更加困难。我相信如果你必须 ajax 确保它是重要的并且是合乎逻辑的，而不仅仅是为了踢球（我认为这适用于只有你有 jQuery 和纯 javascript 供你使用）。
例如，如果您正在使用backbone.js，它基于视图并将某种形式的“MVC”引入您的前端，使您能够拥有可以从服务器拉入内容的带有子视图的视图。
希望对做出决定有所帮助！:)
于 2013-04-24T07:21:38.077 回答
1
我想说这取决于您的应用程序有多少选项卡以及这些选项卡有多大。
- 选项卡内的大内容意味着应用程序在启动时需要很长时间才能加载并消耗大量内存。如果是这种情况，我想根据需要加载它们。
- 选项卡内的小内容将快速加载，因此在单击选项卡时一次加载所有内容以提高性能。
不要忘记在互联网连接速度较慢的旧计算机上运行一些测试，以查看您的应用程序的行为方式。不是每个人都拥有最新最快的硬件。
于 2013-04-24T07:03:46.963 回答