JavaScript 编码原则之各司其职｜青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第3天。

一、本堂课重点内容：

各司其职 JavaScript 好代码的标准
HTML/CSS/JS 各司其责

二、详细知识点介绍：

各司其责 ·HTML/CSS/JS各司其职
·应当避免不必要的由JS直接操作样式
·可以用class来表示状态
·纯展示类交互寻求零JS方案

三、实践练习例子：

各司其责实现夜间日间切换功能的js代码版本对比
版本一：

const btn = document.getElementById('modeBtn');
btn.addEventListener('click',(e) => {
  const body = document.body;
  if(e.target.innerHTML ===  '🌞'){
    body.style.backgroundColor = 'black';
    body.style.color = 'white';
    e.target.innerHTML = '🌛';
  }else{
    body.style.backgroundColor = 'white';
    body.style.color = 'black';
    e.target.innerHTML = '🌞';
  }
});

版本二：

btn.addEventListener('click',(e) => {
  const body = document.body;
  if(body.className !== 'night'){
    body.className = 'night';
  }else{
    body.className = ' ';
  }
});

分析：版本一是在js代码里直接对页面的样式进行修改，而版本二中页面样式的修改是在CSS中的，JS只负责行为的控制，这更加符合CSS和JS本身的职责，也就是所谓的各司其职。 )

版本三：（纯展示类交互寻求零JS方案）
HTML：

<body>
  <input id = "modeCheckBox" type = "checkbox">
  <div class = "content">
    <header>
        <label id = "modeBtn" for = "modeCheckBox"></label>
        <h1>深夜食堂</h1>
    </header>
    <main>
        ...
    </main>
  </div>
</body>

CSS:

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

四、课后个人总结：

如何采用更加简洁高效的代码是很重要的
需要我们认真了解各个板块的作用和边界，对于基础的要求很高。