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

写好JS的原则

• 各司其责

  让HTML、CSS和JavaScript职能分离。

• 组件封装

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

• 过程抽象

  应用函数式编程思想。

各司其职

主要表现为：

• HTML/CSS/JS 各司其责
• 应当避免不必要的由 JS 直接操作样式
• 可以用 class 来表示状态
• 纯展示类交互寻求零 JS 方案

实现页面能够有深色和浅色两种样式

1.第一种可以运用JS直接操作button标签的click事件，在JS中直接定义元素的样式。但第一种相较于其他两种过于复杂，且不利于维护

2.第二种可以在操作click事件时，通过改变document.body.className方法进行切换模式，第二种方式较为第一种更为简单

3.第三种可以直接运用HTML与CSS进行切换，也就是零JS方案。

#modeCheckBox {
    display: none;
  }
#modeCheckBox:checked + .content {
    background-color: black;
    color: white;
    transition: all 1s;
  } 

并在label标签中与modeCheckBox进行绑定

<div class="content">
<label id="modeBtn" for="modeCheckBox"></label>
</div>

组件封装

组件是指Web页面上抽出来一个个包含模版（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。

• 组件设计的原则：封装性、正确性、扩展性、复用性

• 实现组件的步骤：结构设计、展现效果、行为设计

• 三次重构

  1. 插件化
  2. 模板化
  3. 抽象化（组件框架）

过程抽象

• 用来处理局部细节控制的一些方法

• 函数式编程思想的基础应用

高阶函数

高阶函数就是参数是函数，返回值也是函数的一种函数。常用于作为函数装饰器

常见的高阶函数主要有防抖和节流

节流

节流是指固定周期内，只执行一次动作，若有新事件触发，不执行。周期结束后，又有事件触发，开始新的周期（特意看成是技能CD，释放技能之后，在技能CD结束之前不能再释放技能）

//每500毫秒记录一次
function throttle(fn, time = 500){
  let timer;
  return function(...args){
    if(timer == null){
      fn.apply(this,  args);
      timer = setTimeout(() => {
        timer = null;
      }, time)
    }
  }
}

防抖

防抖指的是当事件被触发时，设定一个周期延迟执行动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作。

function debounce(fn, dur){
  dur = dur || 100;
  var timer;
  return function(){
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, dur);
  }
}

防抖主要能用于在页面编辑时的自动保存功能，如果用户停止输入，再开启自动保存功能。

总结

这一节课的JavaScript讲解，真的全程高能，课程结束之后，还得再去看看回放继续消化一下，主要是讲了如何写好JS，例子有很多，比如红绿灯的实现，轮播图的实现，还有洗牌法等等，知识点也是覆盖了很多的，听完之后还是觉得自己还要再多练练基础，不然课程会有点吃力。