这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

本次课程的知识点为：

1. JavaScript编码之各司其职
2. JavaScript编码之组件封装
3. JavaScript编码之过程抽象

1.JavaScript编码之各司其职

让HTML、CSS和JavaScript职能分离

举个例子：在一些网页中有一键切换深色和亮色模式，要想实现这个效果有多种方式，而我们的核心思想就是让HTML、CSS和JavaScript三者的功能实现上做出分离，各司其职。

比如：

const btn = document.getElementById（'modeBtn'）;
btn.add.EvenListener（'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 = '亮色模式';
        }
    }）;

此方法使用了JavaScript操作了CSS的样式，虽然可以实现效果但并不是我们期望的效果

应当避免不必要的有JS直接操作样式，可以用class来表示状态，纯展示类交互寻求零JS代码方案

2.JavaScript编码之组件封装

好的UI组件具备正确性、拓展性、复用性

• 组件设计的原则：封装性、正确性、拓展性、复用性
• 实现组件的步骤：结构设计、展现效果、行为设计
• 三次重构
  • 插件化
  • 模板化
  • 抽象化

组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元

3.JavaScript编码之过程抽象

应用函数式编程思想

• 过程抽象/HOF/装饰器
• 命令式/声明式

HOF高阶函数

• 以函数作为参数
• 以函数作为返回值
• 常用于作为函数装饰器

举两个常见的高阶函数：防抖（Debounce）和节流（Throttle）

防抖是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，都会清除当前的 timer 然后重新设置超时调用，即重新计时。这样一来，只有最后一次操作能被触发。

节流是规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

命令式与声明式
命令式编程（Imperative）：详细的命令机器怎么（How）去处理一件事情以达到你想要的结果（What）；

声明式编程（ Declarative）：只告诉你想要的结果（What），机器自己摸索过程（How）