跟着月影学javaScript---青训营

各司其职

例子

根据这个例子我们有两种方案，哪种方案好，好在哪里？

版本一

版本二

第二种好，从代码简洁的角度看，第二种代码更加简洁。从阅读代码的角度，第二种更加利于我们阅读。我们应该把所有的样式交给css来做，从javaScript的角度，我们直接操作css。

版本三

因为我们这个需求是个纯粹的展现类的需求，纯粹的展现类的需求我们是不用JavaScript的，因为JavaScript是负责行为的。所以我们用纯的HTML和css来实现。

    body,
    html {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden;
    }

    body {
      box-sizing: border-box;
    }

    .content {
      padding: 10px;
      transition: background-color 1s, color 1s;
    }

    #modeCheckBox {
      display: none;
    }

    #modeCheckBox:checked+.content {
      background-color: black;
      color: white;
      transition: all 1s;
    }

    #modeBtn {
      font-size: 2rem;
      float: right;
    }

    #modeBtn::after {
      content: '🌞';
    }

    #modeCheckBox:checked+.content #modeBtn::after {
      content: '🌜';
    }

这个我们是通过input元素的id和label里面的for进行绑定，然后再把input 隐藏掉，:checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）

结论

• html/css/js各司其职；
• 应当避免不必要的由Js直接操作样式
• 可以用class来表示状态
• 纯展示类交互寻求零Js方案