如何写好JS | 青训营笔记这是我参与「第四届青训营」笔记创作活动的的第3天写好 JS 的三个原则，各司其责，组件封

这是我参与「第四届青训营」笔记创作活动的的第3天
写好 JS 的三个原则，各司其责，组件封装，过程抽象。下面会分别介绍这三个原则，以及展示其好处。

各司其责

各司其责是指让 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 = '🌞';
    }
  });

JS 不直接操作样式而是改变元素的 clss name ，从而让元素获得不同的样式。

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

使用 HTML 模版化，HTML 提供容器，让 JS 动态创建 HTML 元素放到容器中，这样的好处是能够使得在改变需求的时候，只需要调整 JS 的代码，不用去改 HTML 可维护性更高。

<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>
        ... content
        </p>
      </div>
    </main>
  </div>

通过点击某个元素，实现通过 HTML 来实现切换，完全不依赖 JS 的参与

结论

因此，我们可以得出结论：

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

组件封装

我们定义函数的时候，要做好函数封装，并且尽可能利用到函数的复用优点，尽量不要让一个函数直接处理一个外部的变量，最好把这个变量变成一个参数，传递给函数。封装函数的时候要做好数据抽象与过程抽象。

通过数据抽象，把用到的一些数据进行分离出来，在函数外部定义一个对象数组，将其传入函数中使用，将数据解耦出来，提高函数的可维护性和可复用性。