jQuery和动态元素vs显示css属性 [英] jQuery and dynamic elements vs display css attribute

问题描述

在设计html界面元素时，这是一个很常见的情况，DOMs显示/隐藏取决于某些事件。我的问题很简单，但每次我遇到这个我总是想知道：更好有元素硬编码在html和简单地切换显示属性（例如与.show / .hide）或动态添加/删除它们根据需要通过JS？这两个都很容易实现，但我不禁想知道他们如何比较，以及是否有任何优点/缺点使用一个在另一个。

While designing html interface elements it's a pretty common scenario having DOMs show/hide depending on certain events. My question is simple, but every time I run into this I always wonder: is it "better" to have the elements hardcoded in the html and simply switch the display attribute (eg with .show/.hide) or dynamically add/remove them as needed via JS? Both are trivial to implement but I can't help but wonder how do they compare and whether there's any advantage/drawback of using one over the other.

有些情况下，例如当同一个元素被逐字地在几个地方使用时，看起来有意义的是动态创建DOM，但另一方面，硬编码他们在理论上是更可维护的，因为你可以移动DOMs，并将它们改为你需要，他们将按预期工作，只要选择器仍然是相同的jQuery。一般来说，从设计师的角度看，似乎硬编码是走的路，但我期待着想法，也许我可能会忽略这里的东西。

There are cases, such as when the same element is used verbatim in several places, where it seemingly makes sense to create the DOMs dynamically as you go, but on the other hand hardcoding them theorically is more maintainable in that you can move the DOMs around and change them as you need and they will work as expected as long as the selector is still the same for jQuery. Generally speaking from a designer prespective it seems like hardcoding is the way to go, but I look forward for thoughts and perhaps things I may be overlooking here.

编辑：硬编码我的意思是没有通过JS插入的元素;也就是说，在原始html标记中的父文档中已经指定了位置的元素，而不是JS。

By "hardcoded" I meant elements that are not inserted via JS at all; that is, elements that have their position already designated within its parent document in the original html markup rather than by JS.

推荐答案

，它真的取决于你的工作和你的应用程序，但是：

Ultimately, it really depends on what you're working with and what your application does, but:

• 静态标记意味着更多的工作 （但是，只有页面动态生成，静态页面的效果可以忽略不计）。

• Static markup means more work for the server (but only if the page is generated dynamically in the first place, for static pages the effect is negligible).

动态标记意味着更多的客户端工作 ，这并不总是一件坏事，取决于您的目标受众。

Dynamic markup means more work for the client, which is not always a bad thing, depending on your target audience.

但从技术上讲，优雅退化建议静态标记是要走的方式，因为理想情况下页面应该保持可用的脚本禁用（动态标记是工作静态核心之上的可选层）。

Technically, however, Graceful Degradation suggests that static markup is the way to go, as ideally the page should remain usable with scripting disabled (dynamic markup being an optional layer above a working static core).

另一方面， Progressive Enhancement 从那里构建，基本上说，因为我们已经在使用一个裸机核心，我们可以在客户端所有汽缸上启动，并动态增强利用最新浏览器技术的内容的静态标记。

On the other hand, Progressive Enhancement builds from there and basically says that since we're already working with a bare-bones core, we can fire on all cylinders client-side, and dynamically enhance the static markup with content that takes advantage on the latest browsers' technologies.

实例， jQuery UI 和 jQuery移动设备围绕逐步增强而设计，因为他们的策略是通过更丰富的客户端行为扩展现有的标记，通常通过动态创建的元素进行展示。

For instance, jQuery UI and jQuery Mobile are designed around progressive enhancement, as their strategy is to extend existing markup with richer client-side behavior, generally exposed through dynamically created elements.

您的标题中的两个选项都可以并且可争辩地应该一起实现。在一般情况下，如果可能，渲染您的应用程序必需的标记在无脚本平台上工作，然后从客户端增强该标记看起来是个好主意。

So, both options in your title can and arguably should be implemented together. In the general case, and if possible, rendering the markup necessary for your application to work on a scriptless platform, then enhancing that markup from the client side looks like a good idea.

这篇关于jQuery和动态元素vs显示css属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！