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

摘要：

本节课跟随月影老师，针对如何产出高效且优雅的JavaScript代码进行了学习，老师主要从代码的设计、算法的使用两方面阐述了团队合作中或者说项目开发中更倾向于看到的代码

一、代码的设计

1.前端三剑客需要职能分离

众所周知的是，HTML负责结构，CSS负责样式，JS负责行为，这也是任何一个网页基本的组成要素，但实际上，我们可以直接通过JS控制HTML的结构设计，或者是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 = '🌞';
    }
  });

以上代码即为最为简单的实现方式，针对按钮绑定事件，点击时改变html中元素的内容与css属性，实现并没有任何问题，但是没有很好的将js与css、html分离开来，针对这一点我们可以有如下改进:

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

同样实现了该功能，但无论是从代码量还是代码的可维护性上以上改进都更胜一筹，首先，其将不同显示模式（夜间🌜与白天🌞）的样式使用不同的class封装，js只控制选择器的添加或者改变，这样就很好的将各部分的职能分离，更易于维护。
但其实对于纯展示的功能实现,根本上是对于css样式的修改,所以我们更为正确的求解方式应该是尽量只通过css对其进行实现,具体代码如下:

HTML:
<input id="modeCheckBox" type="checkbox">
  <div class="content">
      文本内容
  </div>
CSS:
#modeCheckBox {
    display: none;
  }

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

使用了input的checkbox类型,绑定伪类选择器即可实现功能

总结

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