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

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

课堂重点知识

1. JavaScript编码原则——各司其责

2. JavaScript编码原则——组件封装

3. JavaScript编码原则——过程抽象

4. LeftPad实现

5. 代码实践

知识总结及实例

JavaScript编码原则

• 各司其责

1. HTML/CSS/JavaScript各司其责
2. 应避免不必要的由JS直接操作样式
3. 可以用class来表示状态
4. 纯展示类交互寻求零JS方案

实例1——实现主题切换

1.通过获取js节点操作css样式来实现

2.通过操作css的className来实现

3.通过纯css代码实现（即通过控制CSS选择器中的伪类来实现）

• 组件封装

组件封装的方法：

1. 结构设计
2. 展现效果
3. 行为设计
4. 重构——解耦 4.1插件化 4.2模板化 4.3抽象化

组件设计的原则：封装性、正确性、扩展性、复用性

• 过程抽象

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

1.高阶函数：以函数为参数、以函数为返回值、常用于作为函数装饰器

常用的高阶函数：

（1）once

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

（2）Throttle（节流函数）

function throttle(fn,time=5000){
  let timer
  return function(...args){
    if(timer== null){
      fn.apply(this,args);
      timer=setTimeout(()=>{
        timer=null
      },time)
      
    }
  }
}

(3) Debounce(防抖函数）

function debounce(fn,dur){
  dur=dur||100;
  let timer
  return function(...args){
    clearTimeout(timer);
    timer=setTimeout(()=>{
      fn.apply(this,args)
    },dur)
      
  }
}

（4）Consumer/2

（5）Iterative

2.编程规范

LeftPad

原始版本：时间复杂度O(n)

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;
}
console.log(LeftPad('12',5,'0'))

优化后：时间复杂度O(logn）

function repeat(string,count){
  var n=count;
  if(n<0||n==Infinity){
    throw RangeError("string.ptototype.repeat argument must be greater than or equal to 0 and Infinity")
  }
  var result='';
  while(n){
    if(n%2==1){
      result+=string;
    }
    if(n>1){
      string+=string
    }
    n>>=1;
  }
  return result;
}
console.log(repeat('*',5))

代码实践

实例2——红绿灯

实例3———分红包

实例4——洗牌

个人总结

理解高阶函数和组件封装

规范代码书写规则

便于重构