【青训营】- 如何写好JS （上）导读一个好的JS代码要遵守以下一些原则：各司其职。即HTML负责网页结构，CSS负

导读

一个好的JS代码要遵守以下一些原则：

各司其职。即HTML负责网页结构，CSS负责元素样式，JS 则负责交互和行为。
组件封装。组件是指Web页面上抽出来一个个包含模板（HTML）、样式（CSS）和功能（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 = '🌞';
  }
});

通过点击事件，我们实现了浅色和深色的切换。但是这段代码写的好吗？

对于不了解需求的人，能直接看懂含义吗？
这段代码能够实现复用吗？
如果需求改变能便于修改吗？

版本二

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

body.night {
  background-color: black;
  color: white;
  transition: all 1s;
}

#modeBtn::after {
  content: '🌞';
}
body.night #modeBtn::after {
  content: '🌜';
}

在这个版本，我们通过点击事件改变了<body>的类名，从而通过CSS去修改样式，className为night意味着是夜间模式。相比于上个版本，这一版本通过类名透露出了需求信息，且一旦需求更改可以直接修改CSS样式。

版本三

<input id="modeCheckBox" type="checkbox">
  <div class="content">
    <header>
      <label id="modeBtn" for="modeCheckBox"></label>
      <h1>深夜食堂</h1>
    </header>
    <main>
      <div class="pic">
        <img src="https://p2.ssl.qhimg.com/t0120cc20854dc91c1e.jpg">
      </div>
      <div class="description">
        <p>
            这是一间营业时间从午夜十二点到早上七点的特殊食堂。这里的老板，不太爱说话，却总叫人吃得热泪盈
            眶。在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前辈不惜讲述自己不堪回首的经历不断鼓舞年轻人，最终令其重拾自信；轻言绝交的闺蜜因为吃到共同喜爱的美食，回忆起从前的友谊，重归于好；乐观的绝症患者遇到同命相连的女孩，两人相爱并相互给予力量，陪伴彼此完美地走过了最后一程；一味追求事业成功的白领，在这里结交了真正暖心的朋友，发现真情比成功更有意义。食物、故事、真情，汇聚了整部剧的主题，教会人们坦然面对得失，对生活充满期许和热情。每一个故事背后都饱含深情，情节跌宕起伏，令人流连忘返 [6]  。
        </p>
      </div>
    </main>
  </div>

#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: '🌜';
}

在这一版本中，我们直接使用伪元素代替JS的点击事件，实现了0代码，这样就不用维护JS代码，也就不可能产生bug了。

结论

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