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

如何写好JavaScript

各司其责
组件封装
过程抽象

各司其责

案例：日夜模式的切换

第一版
问题：
1 通过js控制了样式，js做了css干的活
2 将来需求变更，需要修改变化样式的时候，需要修改js
3 a交给b时，b不能直观的了解代码功能

第二版（实现了各司其职 html 结构 css 表现 js 行为）

第三版

总结

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

组件封装

用原生js实现一个轮播图

重构：插件化解耦

将控制元素抽取成组件
插件和组件之间通过依赖注入方式建立联系

const detail = {index: idx}
const event = new CustomEvent('slide', {bubbles:true, detail})
this.container.dispatchEvent(event)

抽象

将组件通用模型抽象出来

总结

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

过程抽象

用来处理局部细节控制的一些方法
函数式编程思想的基础应用
案例：操作次数限制（一些异步请求，一次性HTTP请求）

高阶函数 Once

为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们成为过程抽象

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

高阶函数 HOF

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

常用高阶函数

Once
Throttle(节流)
Debounce(防抖 )
Consumer/2
Iterative

纯函数
你输入a得到的一定是b 结果是完全可预计的（高阶函数看起来代码行多，但是一般高阶函数都属于纯函数）
非纯函数
它会改变函数外面的某些值或是状态，它的输出结果需要看之前的代码进行一个环境的判断，所以测试它的时候需要构造出特定的web环境，测试难度高，成本大，所以在系统中非纯函数越多，可维护性越差，所以在一个系统中我们尽量的使用纯函数，减少非纯函数的使用。高阶函数可以帮助我们尽可能减少非纯函数的使用

编程范式

命令式与声明式
命令式怎么做

let list = [1,2,3,4];
let mapl = [];
for(let i = 0; i < list.length; i++){
mapl.push(list[i] * 2); 
}

声明式做什么

let list = [1,2,3,4];
const double = x => x * 2;
list.map(double);
}

声明式天然的比命令式具有更强的可拓展性

不能单看代码的表面判断它好不好，而是要结合具体的场景

Leftpad事件

槽点：

NPM模块粒度
代码风格
代码质量/效率

leftpad 用于字符串补齐

交通灯状态切换

洗牌

先从所有的数中抽一个放在最后，再从剩下的抽放在倒数第二个，以此类推

跟着月影学JavaScript ｜ 青训营笔记（3）