跟着月影学 JavaScript（上） | 青训营笔记

这是我参与「第四届青训营」笔记创造活动的的第3天

各司其职

让 HTML、CSS和 JavaScript 功能别离，HTML是页面的骨架，CSS是页面的皮肤，JavaScript是页面的动作了。咱们在写代码的时候应该他们各自担任自己该担任的部分，尽可能的少用 JS 搅扰 CSS 和 HTML ，这样的代码才是高质量的。

例子：深色形式切换

完成效果如下：

跟着月影学 JavaScript（上） | 青训营笔记

当点击了之后变为：

跟着月影学 JavaScript（上） | 青训营笔记

为了对比代码的好坏，下面给出了三种版别的代码做分析

  • 版别一
//html
 <header>
        <button id="modeBtn"></button> //给按钮绑定鼠标点击事情
        <h1>深淡色形式切换</h1>
 </header>
 //css
 body,
    html {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden;
    }
    body {
      padding: 10px;
      box-sizing: border-box;
    }
    #modeBtn {
      font-size: 2rem;
      float: right;
      border: none;
      background: transparent;
    }
//js
window.onload=function(){
    document.getElementById("file-btn") 
    const btn = document.getElementById('modeBtn');
    btn.addEventListener('click', (e) => {
      const body = document.body; //获取页面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中操作了body的style，修正了元素的款式和结构，显得结构紊乱，这样的写法明显不符合咱们的各司其职的原则！

咱们的代码不仅要写给自己看，更是要写给队友看，所以经过优化，咱们写出了下面的版别二 ↓

  • 版别二
//html
 <header>
        <button id="modeBtn"></button> //给按钮绑定鼠标点击事情，与版别一不同的是去掉了
        <h1>深淡色形式切换</h1>
 </header>
 //css
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; //漂亮上做了一些调整，切换时有1秒的延时
    }
    #modeBtn::after { //各司其职，让css来完成图标的切换
      content: '';
    }
    body.night #modeBtn::after {
      content: '';
    }
//js
window.onload=function(){
    document.getElementById("file-btn") 
   const btn = document.getElementById('modeBtn');
        btn.addEventListener('click', (e) => {
        const body = document.body;
        if (body.className !== 'night') { //经过className的'night'来显现深色形式，判别上更直观
            body.className = 'night';
        } else {
            body.className = '';
        }
        });
}

当body元素的class特点不等于night时，表明淡色形式，所以现在需求将它的状况修正为夜间形式，所以咱们只要将它的class特点设置为night，页面就会呈现夜间形式的款式。同理，当body元素的class特点等于night时，表明body元素是深色形式，所以需求将这个元素的状况修正为淡色形式，即class特点等于空（默许状况）。

优点一

版别二中的 js 仅仅是修正元素的类名className，描述了这是一个深色（night）形式的状况，这样就便于别人快速了解业务需求，能更直观的表达代码想表达的意思，可读性也提高了。

优点二

可以更灵活改变布景等款式需求。假如需求改变，例如把形式对应的色彩换了，咱们不需求修正 JS 代码，只需求修正body.night的款式规则即可

但是，是否还有更优化的方案呢？版别三的优化甚至不需求写 js ！咱们来看看

  • 版别三
//html
<input id="modeCheckBox" type="checkbox"> //经过点击，记住勾选和不勾选的两个状况，刚好对应淡色形式和深色形式两种状况
  <div class="content">
    <header>
      <label id="modeBtn" for="modeCheckBox"></label>
      <h1>深淡色形式切换</h1>
    </header>
  </div>
//css
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; //将大盒子外面的checkbox躲藏起来
    }
    #modeCheckBox:checked+.content { //经过 checkbox 的伪类选择器checked，点击checkbox就会触发这个伪类
      background-color: black;
      color: white;
      transition: all 1s;
    }
    #modeBtn {
      font-size: 2rem;
      float: right;
    }
    #modeBtn::after {
      content: '';
    }
    #modeCheckBox:checked+.content #modeBtn::after {
      content: '';
    }

需求说明的是，+ 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是归于同一个父元素的子元素，则第二个元素将被选中

版别三中，咱们经过 CSS 来完成了原本应该 JS 完成的切换形式并记住状况的功能。咱们让选中状况用伪类选择器#modeCheckBox:checked来符号

结论：

  • HTML/CSS/JS 各司其责，HTML结构、CSS表现、JS行为
  • 应当防止不必要的由 JS 直接操作款式
  • 可以用 class 来表明状况
  • 纯展现类交互寻求零 JS 方案

经过以上三种不同的版别，使得代码一次一次得到优化，更简练也更直观，这是咱们往后学习前端需求努力的目标！