ES6 相关 lesson 6 2021-5-11

import 和 require的区别

• treeshaking机制

1. ES Module 有tree shaking 机制
   // export , import
   // lodash -> lodash-es
2. common.js没有tree shaking机制
   // module.exports = {}

几个滚动高度

• window.screen.height 屏幕的高度
• window.scrollY 已经滚动的距离
• document.documentElement.offsetHeight 文档的高度

document.documentElement.offsetHeight - (window.scrollY + window.screen.height ) < 需要门限高度

防抖节流

节流就是丢弃 throttle
防抖就是等待 debounce

const throttle = (fn, timeout = 1000) => {
  // 定时器
 // 时间戳
  let done = false 
  return (...args) =>{
    if(!done) {
      fn.call(this, ...args)
      done = true
    }  
    setTimeout(()=>{
      done = false
    }, timeout)
  }else{
    //节流掉
  }

}

装饰器

const throttleDecorator = function(timeout = 1000) {
   let lastTime = 0;
   return (target, propName) =>{   
     const oldMethod = target[propName]
     target[propName] = function (...args){
           const currentTime = Date.now()
     if(currentTime - lastTime > timeout){
        oldMethod.call(this)
        lastTime = currentTime
     }else{
         //节流
     }
     }  
    return target
  }
}