跟着月影大佬学习js系列

书籍推荐

犀牛树，红宝书

原则

各司其职

组件封装

过程抽象

结论

• HTML/CSS/JS各司其责

• 应当避免不必要的由JS直接操作样式

• 可以用class来表示状态

• 纯展示类交互寻求零代码JS方案

高阶函数

HOF

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

  function HOF0(fn) {
    return function(...args) {
      return fn.apply(this, args);
    }
  }

22

常用高阶函数

HOF

• Once
• Throttle
• Debounce
• Consumer / 2
• Iterative

  function HOF0(fn) {
    return function(...args) {
      return fn.apply(this, args);
    }
  }

JavaScipt the good parts

上面这段代码没有使用循环，是直接一个个表示。

• 如果你的代码是性能敏感的，可以采用这样的方式。做渲染，希望努力达到60帧，基于这个原因没有用循环。

• 如果你评判一个代码，你不能单纯因为风格去评判，最终还是要在使用场景中去评判。

当年的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;
}

有人吐槽

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

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

整个来看，leftpad我们可以有很多性能优化，但是实际上那一点的性能提升其实可以忽略不记，我们还是可以从代码可读性来多考虑。