【青训营】月影老师告诉我写好JavaScript的三大原则之——各司其责

YK菌从大学开始到现在一共学习了挺多语言的(C/java/matlab/pathon/)，最后终于确定了JavaScript是我的本命语言，刚开始学的时候觉得JavaScript上手真的很快，很简单，但是随着自己学习的深入，发现JavaScript真的特别有意思，原型、闭包等特性，太有意思了！我爱JavaScript~

参加了这次字节青训营的活动，见到了传说中的月影老师，关键还听他给我们上了两节如何写好JS的课! 太赚啦，今天我把上课学的东西分享出来，和大家一起学习学习!~

月影老师告诉我们写好JavaScript（包括其他语言）的三大原则 ① 各司其责 ② 组件封装 ③ 过程抽象

当然其实不止这三个原则，但这三个可以说是相对重要的原则，所以我直接说的三大原则，实际上应该叫几大原则

今天我们来看看 第一大原则——各司其责

1. 起步

上次在HTML基础中说到前端的“三驾马车”，其中一个就是JavaScript，主要是负责页面的行为

那我们就要让 JavaScript 专门负责页面的行为，下面我们来看个例子

2. 深色模式

现在很多网页都支持浅色模式和深色模式的切换，那用 JavaScript 应该怎么实现呢?

新手版

首先我们来看看页面的结构 HTML

  <header>
    <button id="modeBtn">🌞</button>
    <h1>YK菌的博客写的特别不错~</h1>
  </header>

  <main>
    <div class="pic">
      <img src="https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/154b55eb36c8ae10f701e2d3d6cfb138~300x300.image">
    </div>
    <div class="description">
      <p>
        这里就是YK菌的博客啦，我之前是在C站写博客的，后来参加了青训营的活动，转来了掘金，社区很好~很多活动~以后常来掘金啦~~
        <hr />
        之前的博客和现在的一样，都是一些笔记之类的，我是前端新人，先以记笔记为主吧~~把笔记记好，慢慢拓展~
        <hr />
        <strong>YK菌</strong>，冲啊~~~~
      </p>
    </div>
  </main>

然后我们来看看我们页面的样式 CSS

    body,
    html {
   
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden;
    }

    body {
   
      padding: 10px;
      box-sizing: border-box