跟着月影学 JavaScript | 青训营笔记各司其职：让HTML、CSS、JS做各自的事情以黑白主题切换为例，应该

各司其职：让HTML、CSS、JS做各自的事情

以黑白主题切换为例，应该让HTML、CCS、JS各自做自己领域内的事情。
一个坏的例子。

//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里操作了CCS样式，这样的代码混乱不堪，不利于后续维护。

好的例子。

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

CCS定义多个tag的样式，JS只负责切换tag名称即可。

组件封装

组件设计的原则：

封装性
正确性
扩展性
复用性

组件封装基本方法与步骤：

结构设计
展现效果
行为设计（API（功能）
Event（控制流））

三次重构：

插件化-将控制元素抽取成插件、插件与组件之间通过依赖注入方式建立联系。
模板化-将HTML模板化，更易于kuoz。
抽象化（组件框架）-将组件通用模型抽象出来。

过程抽象

为了能够让只执行一次的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。其特点如下：

用来处理局部细节控制的一些方法
函数式编程思想的基础应用

高阶函数

高阶函数式对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出。高阶函数以函数作为参数，以函数作为返回值，常用于作为函数装饰器。

常见的高阶函数

Once：是一个简单执行一次的函数，无视后来产生的多次执行请求。
Throttle：一个函数持续地、频繁地触发，那么让它在一定时间间隔后再触发。
Debounce：一个函数持续地触发，那么只在它结束后过一段时间只执行一次
Consumer：每隔一段时间才会去调用函数，但是会根据用户需求次数执行到底。
lterative：可迭代方法，它会返回新的函数，在新的函数中并进行判断，如果可迭代，则迭代的调用新函数里的方法，如果不可迭代，只执行一次。

编程范式

编程范式有三种：命令式、声明式和函数式。