#21: 改变类名即可！

如果你从这个系列中学到了任何重要的前端架构理念，那就是这个：改变类名。在这个屏幕录像中，我们开始深入一个主要的 JavaScript 问题，然后停下来，意识到我们可以用 CSS 来解决。当你想要改变视觉效果时，CSS 是最佳选择。它不仅擅长处理这个问题，而且通常更有效，并保持健康的“关注点分离”，这使得长期维护网站变得更容易。

在我们恢复理智之后，我们只是交换了 1) 按钮文本 2) 容器上的 data-state 属性。

$(".bigger").on("click", function() {
  var el = $(this);
  
  var module = el.parent();
  
  // Swap expanded state
  module.attr("data-state") == "expanded" 
    ? module.attr("data-state", "")
    : module.attr("data-state", "expanded");
  
  // Swap button text.
  el.text() == el.data("text-swap") 
    ? el.text(el.data("text-original")) 
    : el.text(el.data("text-swap"));
  
});

最终结果如下所示

查看 CodePen 上 Chris Coyier (@chriscoyier) 的 quFCo。

是的，这个视频（以及理念）是“改变类名即可！”，而我们在这里更改了一个 data-* 属性，但我认为它们是相同的。有时我会使用 data-* 属性只是因为我喜欢它们。我认为它们就像命名空间类或带值的类。可以说在 CSS 中比类更有用，而且它们具有完全相同的特异性值。

那个 ? / : 语法看起来很奇怪吗？如果是的话，它被称为三元（或“条件”）运算符。

第一行是一个测试，下一行（或 ? 之后的代码块）是如果测试为真会发生的事情，最后一行（或 : 之后的代码块）是如果测试为假会发生的事情。也许这能帮助你理解

// The boolean (true/false) test
module.attr("data-state") == "expanded" 
  // Do this if the test is true
  ? module.attr("data-state", "")
  // Do this is the test if false
  : module.attr("data-state", "expanded");

不要因为它们看起来很奇怪而避开它们，它们可能更有效（最终读起来和 if/else 逻辑一样好，只要你不过度使用它们）。

Doug Neiner 在他的 文章 中很好地阐述了“改变类名即可！”的理念。类在 CSS 中拥有强大的功能。你可以隐藏/显示内容，移动内容，改变内容的外观，触发动画…… 可能性无穷无尽。而且你在“树”（DOM）中应用类的层次越高，你拥有的级联能力就越强大。在 body 上改变一个类意味着你可以用一个类控制整个页面的任何内容。而且这一切只需要非常少量的 JavaScript 代码。

一旦你接受了这个理念，你将成为一名更快乐的开发者。