21-july-18report

Object的三种方法

Object.keys 会返回一个数组，数字组中的元素全部为字符串，是对象的键。
Object.values ...........，数组中的元素皆为对象的键所对应的值。
Object.entries 返回一个二维数组，其中的每一个元素为数组，元素数组中包含键名和值两个元素。

React Props 类型校验 和默认值指定

import propTypes from 'prop-types';

class SvgEditor extends Component {
    ...
}

// 指定外部传入的数据类型，若不符合指定的数据类型，则给出精确的报错！
SvgEditor.propTypes = {
  width: propTypes.string
}

// 定义默认的props，防止当外部未传入该变量时发生报错。
SvgEditor.defaultProps = {
  height: 200
}

防抖和节流

// 防抖：防止多次触发函数，在一定时间内只能触发一次。
function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){ // 如果正在计时，取消之前的计时(清除定时器)，重新开始计时。
            clearTimeout(timer) 
        }
        timer = setTimeout(fn,delay)  // 其他情况，说明当前并没有在计时，那么就开始一个计时
    }
}

  /**
   * 类似于技能冷却
   * 在一定时间内已经触发过函数，在该时间段内再次点击或多次点击不能触发函数；
   * 除非等事件结束方可再点击
   * 但有一个问题，第一次执行函数是有延迟的。
  */

  btn.onclick = function () {
    let status = true
    return function () {
      if (!status) {  // 点过了就不能再点了
        return false
      } else {        // 没点过的情况下，允许点击（触发函数）
        if (timer) {
          clearTimeout(timer)
        }

        status = false   // 点过后就不能再点了
        timer = setTimeout(() => {
          console.log('间隔执行') 
          status = true  // 在一定时间后，允许点击
        }, 5000)
      }
    }()
  }