这是我参与「第五届青训营 」笔记创作活动的第7天. 今天学习Javascript编码的三大原则中的各司其责.

Javascript编码三大原则

写好JS有三个原则

• 各司其责
• 组件封装 : 和UI打交道, 需要封装UI组件来使用
• 过程抽象 : 可以让代码有更好的拓展性.

各司其责

也就是让HTML(结构), CSS(表现), JavaScript(行为)职能分离, 下面通过几个例子来说明什么是各司其责.

这个例子是通过点击按钮, 改变页面的白天/夜晚的样式. 白天样式为白色背景颜色和太阳图标, 夜晚样式为黑色背景颜色和月亮图标.

版本一

直接使用 JS代码对CSS样式进行修改. 虽然这段代码可以直接看出对网页渲染做了什么样的修改, 但是不利于团队合作, 也不利于进一步拓展.

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 = '🌞';
  }
});

版本二

(更符合各司其责的原则)

与版本一最大的区别是, 在CSS中引入了class="night", JS中仅对className进行操作, 代码变简洁了. 此时也分离了表现和行为. 并且版本二可以更直观的体现需求, 即夜间模式和白天模式切换的问题.

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

版本三

一般控制样式的代码可以直接通过CSS实现(伪类选择器以匹配元素状态)

增加了一个checkbox来控制, 可以在html给label设置一个for元素, 使得label和checkbox链接起来, 这时点击label和点击checkbox的效果是一样的. 并且将checkbox设置为不展示, 则可以在网页上实现点击按钮, 切换日/夜间模型的效果.

<input id="modeCheckBox" type="checkbox">
  <div class="content">
    <header>
      <label id="modeBtn" for="modeCheckBox"></label>
      ......

#modeCheckBox {
  display: none;
}
/* 选中checkbox就对content内容进行修改 */
#modeCheckBox:checked + .content {
  background-color: black;
  color: white;
  transition: all 1s;
}

/* 对按钮进行修改 */
#modeBtn::after {
  content: '🌞';
}
#modeCheckBox:checked + .content #modeBtn::after {
  content: '🌜';
}

::after是伪类元素, 给标签之后增加新内容.

小结

在编写JavaScript时

• 避免使用JS直接操作样式.
• 可以用class来表示状态, 能够更好的满足各司其责的原则, 使代码更简洁.
• 纯展示类交互需求, 如页面文字样式变换等, 可以使用零JS方案解决.