我正在开发一个大型HTML5应用程序,我真的很想知道这个问题。我将有很多对话框和标签,可以通过用户交互打开。
我想知道什么是最佳做法 - 在HTML文档中编写所有对话框和选项卡,并将display:none添加到所有对话框中,或者每次用户进行相关操作时使用JS或jQuery动态创建这些HTML部分相互作用。
在性能,易开发性,可读性等方面哪些更好?
任何帮助将不胜感激。
答案 0 :(得分:3)
我会尽力解决这个问题。
1 - 正如我在评论中所说,避免使用内联样式。 首先,这是因为内联样式使DRY成为可能。 不得不一遍又一遍地重复同样的事情对于维护和开发来说是非常糟糕的,因为一旦你必须在大约100个地方改变代码而不是改变代码。
2 - 避免内联样式也有利于可访问性,一些屏幕阅读器和搜索引擎爬虫根据css选择器进行索引工作和阅读工作,因此使用内联样式将迫使他们忽略或错误表达事物。
3 - 当作为开发人员工作时,很容易进行内联样式“只是为了好玩”,但你实际上正在做的是混合关注点。 HTML是内容,CSS是设计。 将这两者混合在一起会导致令人头疼,并使我的工作成为一名开发人员,因为我不知道风格是什么以及如何风格。
现在,进入表演。
当您使用内联样式时,您告诉浏览器的内容基本上是“嘿,因为每个页面视图都将这些样式应用于所有这些元素。”现在,这变得非常明显,为什么这很糟糕。 您无法缓存和存储您的CSS,并且基本上迫使浏览器每次都重新渲染您的样式。使用外部CSS文件实际上可以帮助您加速您的网站,因为浏览器会缓存它。
那就是css部分。
你问过的javascript。
正如我所说,用css隐藏东西并用javascript显示。现在你为什么要这样做而不是拉进去? 好吧,你可以做到这两点。如果你只是一个web浏览器体验,那么你可以做任何一个,这没关系。我自己更喜欢在DOM中拥有东西,因为它与内容有关,如果你是一个拥有数十个ajax调用的大型应用程序,只会使维护变得更难。我相信如果你需要ajax的东西,确保它是重要的,并且是合乎逻辑的,而不仅仅是为了踢(我认为这适用于只有你有jQuery和普通的javascript可供你使用)。
例如,如果您正在使用backbone.js,它基于视图并在您的前端引入某种形式的“MVC”,使您能够获得可以从服务器中提取内容的子视图的视图。
希望有所帮助做出决定! :)
答案 1 :(得分:1)
我想说这取决于您的应用程序有多少个标签以及它们有多大。
不要忘记在连接速度较慢的旧计算机上运行某些测试,以查看应用程序的行为方式。不是每个人都拥有最新,最快的硬件。