跟着月影学JavaScript(下) | 青训营笔记

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

写代码最应该关注什么？

风格？效率？约定？使用场景？设计？

Leftpad事件

function leftpad(str, len, ch) {
    str = String(str);
    var i = -1;
    if (!ch && ch !== 0) ch = ' ';
    len = len - str.length;
    while (++i < len) {
        str = ch + str;
    }
    return str;
} 

leftpad是一个补零的模块，就是例如序号大于9时，大于的数字多一位，于是利用此模块将小于10的数字前面加一位补齐。当时有很多库都依赖这个模块，当leftpad不再维护的时候，引起了人们的讨论：

1. NPM模块粒度
2. 代码风格
3. 代码质量/效率

代码本身并没有问题，但是有人觉得代码有优化的空间，不够简洁，也不是最高效的。

简洁版

function leftpad(str, len, ch) {
    str = "" + str;
    const padLen = len - str.length;
    if(padLen <= 0) {
      return str;
    }
    return (""+ch).repeat(padLen)+str;
} 

这段代码通过repeat这个内置函数，使函数的算法复杂度降低，实现了代码的优化。 其实还有效率更高的方法，但是由于这个模块的使用场景一般不会是很大的数，所以优化的意义不大。

交通灯状态切换

如果要实现一个交通灯的状态切换，也就是每隔一段时间不同的灯亮起。我们第一时间想到的一定是定时器，但由于定时器是异步的所以需要嵌套使用。如果灯的数量较多，嵌套的数量就会很多。代码就十分不优雅。

点我查看

数据抽象

为了改进代码，我们可以采用数据抽象的方式：

const stateList = [
  {state: 'wait', last: 1000},
  {state: 'stop', last: 3000},
  {state: 'pass', last: 3000},
];

将数据抽象成不同的状态，通过递归调用的方式切换状态。点我查看

异步+函数式

还可以使用异步+函数式的方式，通过wait函数，设置等待时间，在函数中调用。点我查看