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

一、本堂课重点内容

1. JavaScript好的部分
2. HTML/CSS/JS各司其职
3. 组件的定义解析及特征
4. 组件封装基本方法
5. 利用原生JS实现电商网站轮播图
6. 过程抽象/高阶函数使用模式
7. JS编程范式
8. leftpad事件
9. 代码优化

二、笔记和总结

原则：各司其职、组件封装、过程抽象

各司其职

应当避免不必要的由JS直接操作样式，可以用class来表示状态，纯展示类交互寻求零JS方案
例：
用html中checkbox和css伪类实现夜间模式切换

组件封装

例：轮播图
自定义事件来实现解耦
控制元素插件化
将html模板化，更易于扩展
将组件通用模型抽象出来

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

过程抽象

函数编程思想
{once:true}只触发一次
或once高阶函数

function once(fn){
  return function(...args){
    if(fn){
      const ret = fn.apply(this,args);
      fn = null;
      return ret;
    }
  }
}

高阶函数HOF：
以函数作为参数，以函数作为返回值，常用于作为函数装饰器

常用高阶函数：Once Throttle截流 Debounce防抖 Consumer延时调用 Iterative可迭代
多使用纯函数

装饰器

编程范式

命令式与声明式
声明式可扩展性更好

实践例子

1.交通灯
4种方法

2.判断是否是4的幂
转换成二进制数 判断

function isPowerOfFour(num){
  num = parseInt(num);
  return num > 0 &&
         (num & (num - 1)) === 0 &&
         (num & 0xAAAAAAAAAAAAA) === 0;
}

3.洗牌
均匀的洗牌方法
生成器 可以只取几张牌 不用跑完

4.分红包
切西瓜法 取大的一块进行切分
抽牌法 会随机到比较大的数，空间复杂度高