1.举个栗子🌰

如果让我们写一段JS，控制一个网页，让它支持浅色和深色两种浏览模式，那么我们应该去怎样实现？

2.版本一

最容易想到的一种方式——对按钮click添加一个addEventListener监听事件，通过if条件语句对按钮切换的不同状态进行判断，从而切换浅色与深色模式。

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

3.版本二

那么我们能否对版本一的代码进行进一步的优化呢？于是有了下面的代码可以让我们在更多种分类情况时，也可以轻松地修改CSS样式

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

4.版本四

优化完成后，我们是否还有其他解决方案呢？答案是肯定的，事实上，我们还可以通过操纵CSS来实现样式的变化而无需动用JS，是不是很神奇呢？代码如下：

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

 #modeCheckBox {
    display: none;
  }

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

总结

经过跟随月影老师一系列的尝试，对于如何写好JavaScript第一节，我们可以有如下结论：

HTML/CSS/JS 各司其责

应当避免不必要的由 JS 直接操作样式

可以用 class 来表示状态

纯展示类交互寻求零 JS 方案

如何写好JavaScript(1) —— “各司其职” | 青训营笔记

1.举个栗子🌰

2.版本一

3.版本二

4.版本四

总结