如何写好JS（下）|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第4天。本节课的主题是【如何写好JavaScript】，授课老师为月影。

因本课程分为上下两集，故笔记也分两部分，此为上部分。上部分详见上一篇文章。

本篇笔记分别对课程中所讲的几个要点进行一些复述加上我个人的解读，如若有误，欢迎大家在评论区指出。

1. 组件封装

三次重构：

1. 插件化

2. 模板化

3. 抽象化（组件框架）

   1. 改进空间？是否可以父子插件分离等（还没使用过框架，无从下手）

2. 过程抽象

普遍应用在框架上，如react boost

eg.

1. 多调用只允许一次：

   1. 除了在代码里使用{once:ture},还可以将过程封装成once的函数

   2. 为了让“只执行一次”的要求覆盖不同的事件处理，可以将需求剥离出来。此过程为：过程抽象。

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

   3. 返回函数的函数：高阶函数。

      HOF

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

      常用高阶函数：

      1. Once

      2. Throttle（节流事件）

         

      3. Debounce（防抖，如鼠标移动，停止时才调用时间）

         

      4. Comsumer 延时调用

      5. iterative

      为什么要用高阶函数：

      1. 纯函数：可直接测试
      2. 非纯函数：需要构造特定外部环境，测试难度高。
      3. 高阶函数是纯函数，可使非纯函数变成纯函数
      4. 使用高阶函数可减少非纯函数使用频率

      编程范式

      JS具有命令式与声明式的风格

      //1 imperative
      let list = [1, 2, 3, 4];
        let mapl = [];
        for(let i = 0; i < list.length; i++) {
          mapl.push(list[i] * 2);
        }
      
      //2 decalarative
      let list = [1, 2, 3, 4];
        const double = x => x * 2;
        list.map(double);
      

      优缺点：

      声明式比命令式具有更好的可拓展性

      例子：Toggle

写代码最应关注什么

使用场景！

Leftpad事件

后面部分由于本人JS基础薄弱，吸收不了多少，只能先去学习JS了...！太难了

参考资料

1. 月影JS课件