如何写好JS(下)| 青训营笔记

90 阅读2分钟

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

如何写好JS(下)

  1. 过程抽象概念
  2. 高阶函数使用模式
  3. JavaScript 编程范式

过程抽象

  • 用来处理局部细节控制的一些方法
  • 函数式编程思想的基础应用 组件化过程是用于整体的一个思路,而过程抽象是控制细节上的一个思路。 在React的Hooks用到了较多的“过程抽象”

image.png

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

为了实现这种过程抽象,一般使用高阶函数完成过程抽象; 高阶函数一般也被称为函数装饰器,所谓的高阶函数一般:

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

image.png

常用高阶函数 HOF

  • Once
  • Throttle 节流函数
  • Debounce
  • Consumer/2
  • Iterative

编程范式

  • 命令式
  • 声明式

JS同时具有命令式范式的特点又有声明式范式的特点。

命令式:注重的是过程,“怎么做”

image.png

声明式:注重的是“做什么”,声明式代码会更加简洁

image.png

JavaScript 代码质量优化的思考

首先,写代码应该注意的事项或者评判代码好坏的标准不应该单一的从代码简洁度或者风格来界定; 应该要根据使用场景,来使编写的代码更侧重某一方面,例如侧重与风格,侧重于效率,或者是侧重遵循某种约定或者设计,以及可复用可扩展性,能在合适的场景下写出适合某种场景的代码才是优化代码的最终目的。

可以比较以下几种代码来感受下其中的代码优化的思路及考量:

实现一个切换多个交通灯状态切换的功能;

版本一:code.h5jun.com/jezew/2/edi…

版本二:code.h5jun.com/xof/5/edit?…

版本三:code.h5jun.com/bodul/2/edi…