参考书籍

• 犀牛书
• 红宝书

---

JavaScript 编码原则

---

各司其职

让HTML、CSS、JavaScript 各司其职

深色模式与浅色模式的切换

// 版本1
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 = '🌞';
    } 、
});

代码逻辑

1. 获取切换按钮元素
2. 给按钮绑定鼠标点击事件
3. 获取页面body元素
4. 判断当前按钮元素是🌞还是🌜
5. 是🌞就将页面的背景色改成黑色，字体颜色改成白色，并将按钮元素变成🌜
6. 否则说明按钮就是🌜，我们就将页面背景色改为白色，字体改为黑色，并将按钮元素变成🌞

---

// 版本2 -- 优化版
const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
  const body = document.body;
  if (body.className !== 'night') {
    body.className = 'night';
  } else {
    body.className = '';
  }
});

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

    body {
      padding: 10px;
      box-sizing: border-box;
      transition: all 1s;
    }

    #modeBtn {
      font-size: 2rem;
      float: right;
      border: none;
      outline: none;
      cursor: pointer;
      background: inherit;
    }

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

    #modeBtn::after {
      content: '🌞';
    }

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

代码逻辑

1. 通过给button加after伪元素，提供🌞与🌜的内容，这样就不用JS来修改页面的结构了
2. 通过设定night类名，让页面背景变黑字体颜色变白，实现黑色模式，并且加入过渡效果
3. 这样元素就可以通过设置不同的类名展示不同的样式了

---

进阶版

  <input id="modeCheckBox" type="checkbox">
  <div class="content">
    <header>
      <label id="modeBtn" for="modeCheckBox"></label>
      <h1>~MondayH的学习笔记博客~</h1>
    </header>
    <main>
      </div>
        <p>
            ...
            一大段学习文字
            ...
        </p>
    </main>
  </div>

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

    body {
      box-sizing: border-box;
    }

    .content {
      padding: 10px;
      transition: background-color 1s, color 1s;
    }

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

代码逻辑

1. 由于HTML的结构，点击label就相当于点击了checkbox【为什么要用checkbox呢，因为他可以通过点击，记住用户的状态，勾选和不勾选的两个状态，刚好对应我们的白色模式和深色模式两种状态】

2. 将大盒子外面的checkbox隐藏起来 display: none;

3. 通过 checkbox 的伪类选择器 checked，点击checkbox就会触发这个伪类

---

写在最后

• HTML、CSS、JavaScript 各司其责
• 应当避免不必要的由JS 直接操作样式
• 可以用 class 来表示状态，类名具有不错的业务语义
• 纯展示类交互寻求零JavaScript方案

组件封装

下一篇笔记总结 -- 总结ing ...

过程抽象

下一篇笔记总结 -- 总结ing...