JavaScript代码质量优化之路 | 青训营笔记

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

课程重点

1. 代码写作关注事项
2. left-pad 事件背后的代码规范
3. 代码实践1 - 交通灯
4. 代码实践2 - 洗牌
5. 代码实践3 - 分红包

写代码最应该关注什么？

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

答案：使用场景

从当年的Left-pad事件入手

事件本身槽点：

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

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;
}

• 代码更简洁
• 效率提升

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

• 性能更好

for(;;){
    if((count & 1) == 1){
        rpt += str
    }
    count >>>= 1
    if(count == 0){
        break
    }
    str += str
}

• 优化一下

var rpt = "";
do{
    rpt += str
    str +=str
    count &= count - 1
}while(count)

交通灯状态转换

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

交通灯：版本一

交通灯：版本二

交通灯：版本三

交通灯：版本四

判断是否是4的幂

<input id="num" value="65536"></input>
<button id="checkBtn">判断</check>

洗牌

洗牌：正确性

洗牌：版本三

洗牌：版本四

分红包

分红包：版本二