内容、表现和行为每次都可能分离吗？

发布于 2024-08-21 04:43:16 字数 145 浏览 10 评论 0原文

内容、表现和行为每次都可能分离吗？

很多时候，我们通过 javascript 将类添加到 html 中，并在 CSS 中使用 visibility:hidden inline。

我们是否应该始终投入时间将所有内容分开？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧话新听 2024-08-28 04:43:16

虽然这通常是可能的，但通常不切实际。正如您自己所说，这需要时间。你是否愿意投入时间取决于很多因素，纯粹主义只是其中之一。

事实上，可以说（我亲眼目睹了这一点），因为 div 或 span 等标签在以及它们本身，但它们是专门为样式而发明的，当您在页面上使用其中一个时，您就已经在混合内容和演示了。这是一个很好的哲学讨论，但在商业环境中它没有任何结果。

因此，虽然您应该始终尝试尽可能地将内容、表示和行为分开，但您总是必须在某个地方停下来，即使只是为了完成其他事情。

回复收藏 0 原文

叫思念不要吵 2024-08-28 04:43:16

你的问题太笼统了，我们无法给你一个明确的答案。

但是，没有什么是不可能的，我想说，是的，这是可能的。

同时，我想说：

有时候，它会花费太多，所以你不会这样做；
有时候，它会让事情变得比不分开更困难，所以你不会这样做

回复收藏 0 原文

橘虞初梦 2024-08-28 04:43:16

没有过多讨论的一件事是如何使样式远离您的行为 - 也就是说，像 $('element').css({color: 'purple'}) 这样的样式内容只要有可能，就不用你的 Javascript 了。出于代码美观以及一般理智的原因，我发现最好让代码通过更新“类”值来更改样式。换句话说，不要认为代码中的某些东西应该是“紫色的”——认为它应该是“富丽堂皇的”或“独特的”或“有点丑陋的”：

$('.sections li.updated').each(function() {
  // ...
  if (thingsLookRight) $(this).addClass('kind-of-ugly');
  // ...
});

然后你的 CSS 可以接管：

li.updated.kind-of-ugly { color: purple; }

现在你'只要您愿意，您就可以随意对样式进行一些“有点丑陋”的调整，而不必弄乱您的 Javascript。将字体变大，将其隐藏，等等；代码中的逻辑和操作保持不变。

同样，您可以通过在 CSS 中使用父/子类关系来完成一些很棒的事情，以保持您的行为简单、快速且无样式。

One thing that isn't talked about too much is how to keep style out of your behavior - that is, style stuff like $('element').css({color: 'purple'}) out of your Javascript whenever possible. For reasons of code aesthetics as well as general sanity, I've found that it's way better to have code make style changes by having it update "class" values. In other words, don't think in the code that something should be "purple" — think that it should be "regal" or "distinctive" or "kind-of-ugly":

$('.sections li.updated').each(function() {
  // ...
  if (thingsLookRight) $(this).addClass('kind-of-ugly');
  // ...
});

Then your CSS can take over:

li.updated.kind-of-ugly { color: purple; }

Now you're free to make little style tweaks to "kind-of-ugly" whenever you want without having to mess up your Javascript. Make the font bigger, make it hidden, whatever; the logic and the action in the code stays the same.

Similarly, you can do awesome things by using parent/child class relationships in CSS to keep your behaviors simple, fast, and style-free.

回复收藏 0 原文