如何写好JavaScript | 青训营笔记

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

js的一些原则

各司其职：让HTML,CSS,js职能分离
组件封装：好的ui组件具备正确性，扩展性，复用性
过程抽象：应用函数式编程思想

颜色切换.png

案例深色浅色切换

//html
<div id="app"></div>
 <header>
        <button id="modeBtn">🌞</button> 
        <h1>深色浅色模式切换</h1>
 </header>
 <body>

 </body>
 //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

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

因为代码简洁度不高，所以进行改进，css设置类，真正实现各司其职

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

版本三直接用css实现


    //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主要是对样式进行修改和改变，所以这个方法真正实现了各司其职

总结：

HTML/CSS/JavaScript应该各司其职，这样方便后面改动。
三个各司其职可以更好的实现代码维护，符合开发的需要