lodash的debounce,bind和es7的@装饰器

我们看一段react代码

import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';

export default class Bar extends PureComponent {

componentDidMount() {
    window.addEventListener('resize', this.resize);
  }
  
componentWillUnmount() {
    window.removeEventListener('resize', this.resize);
    this.resize.cancel();
}

@Bind()
@Debounce(200)
resize() {
  ...
}

这是我在ant-design-pro源码看到的,功能是最简单常用的监听resize事件,第一眼看的时候,有好几个地方看不懂

1.@ 符号的作用及具体用法?

2.bind(),Debounce()这两个lodash里引入的方法的作用?

3.this.resize.cancel().这个方法是哪来的?

1. @ 修饰器

@是es7加入的功能,现在已经有很多项目开始使用

修饰器是一个对类进行处理的函数。修饰器函数的第一个参数,就是所要修饰的目标类。

如果你是react爱好者,@connect就是经常会看到的一种用法

例如在你以前的react项目中,用了react-redux你是这么写connect的:

const mapStateToProps = state => {
  return {
    user: state.user.user
  };
};

const mapDispatchToProps = (dispatch) => ({
  usersAction: bindActionCreators(userAction, dispatch),
  dispatch: dispatch
});

export default connect(mapStateToProps, mapDispatchToProps)(Header);

那么现在用上es7的修饰器,你可以改成这样:

@connect(state => ({
    user: state.user.user,
  }),
  dispatch => ({
    ...bindActionCreators({
      usersAction: usersAction
    }, dispatch)
  })
)
export default class Main extends Component {

}

当然,如果你用dva或者redux-saga,你甚至不用在connect里写dispatch,可以这么写

@connect(state => ({
    user: state.user.user,
  }),
)
export default class Main extends Component {

componentDidMount () {
    this.props.dispatch({
        type: 'user/saveUser',
    })
}
}

2.debounce (函数去抖)

定义:
如果用手指一直按住一个弹簧,它将不会弹起直到你松手为止。

也就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。

在一些事件中,比如窗口改变resize,页面滑动scroll,onpress发送ajax请求。事件触发和函数调用是很频繁的。所以很多时候,我们会用setTimeout()加延迟来改善这种情况,提高用户体验。

Debounce做的也是同样的事情

$(window).on('resize', _.debounce(function() {
display_info($right_panel);
 }, 400));
  
function display_info($div) {
    $div.append($win.width() + ' x ' + $win.height() +  '<br>');
}

3.bind()

lodash文档是这么介绍的

_.bind(func, thisArg, [partials])

创建一个调用func的函数,thisArg绑定func函数中的 this (愚人码头注:this的上下文为thisArg) ,并且func函数会接收partials附加参数。 

_.bind.placeholder值,默认是以 _ 作为附加部分参数的占位符。

下面是例子

var greet = function(greeting, punctuation) {
  return greeting + ' ' + this.user + punctuation;
};
 
var object = { 'user': 'fred' };
 
var bound = _.bind(greet, object, 'hi'); 
bound('!');
// => 'hi fred!'
 
// Bound with placeholders.
var bound = _.bind(greet, object, _, '!');
bound('hi');
// => 'hi fred!'

第一个输出 object 绑定到greet函数的this,后面的参数依次作用greet的参数
第二个输出 _作为附加部分参数的占位符,hi作用greet函数的第一个参数

4. .cancel()方法

debounce方法赋值给一个变量之后允许我们调用一个私有方法:debounced_version.cancel()

var debounced_version = _.debounce(doSomething, 200);
$(window).on('scroll', debounced_version);

// If you need it
debounced_version.cancel();

因此 cancel方法是debounce的一个私有方法。移除监听的时候可以用到

5.拓展 throttle 函数节流

  1. 定义

如果将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时间,就会有一滴水流出。

也就是会说预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期。

即定义一个函数最短调用时间 来实现“节流”的效果
和debounce的主要区别是throttle保证方法每Xms有规律的执行。
  
简单实现:

var throttle = function(delay, action){
  var last = 0return function(){
    var curr = +new Date()
    if (curr - last > delay){
      action.apply(this, arguments)
      last = curr 
    }
  }
}

Examples:
 一个相当常见的例子,用户在你无限滚动的页面上向下拖动,你需要判断现在距离页面底部多少。如果用户快接近底部时,我们应该发送请求来加载更多内容到页面。

在此debounce 没有用,因为它只会在用户停止滚动时触发,但我们需要用户快到达底部时去请求。通过throttle我们可以不间断的监测距离底部多远。

$(document).on('scroll', _.throttle(function(){
    check_if_needs_more_content();
  }, 300));

  function check_if_needs_more_content() {     
    pixelsFromWindowBottomToBottom = 0 + $(document).height() - $(window).scrollTop() -$(window).height();
    
  // console.log($(document).height());
  // console.log($(window).scrollTop());
  // console.log($(window).height());
  //console.log(pixelsFromWindowBottomToBottom);
    
    
    if (pixelsFromWindowBottomToBottom < 200){
      // Here it would go an ajax request
      $('body').append($('.item').clone()); 
    }
  }

最近在研究阿里开源不久的ant-design pro. 推广一下ant-design-pro和云谦大神的dva

github地址:ant-design-pro

dva:基于 redux、redux-saga 和 react-router 的轻量级前端框架。

在线效果预览 :
ANT DESIGN PRO 开箱即用的中台前端/设计解决方案

参考:segmentFault:throttle与debounce的区别

JS魔法堂:函数节流(throttle)与函数去抖(debounce)及源码解析

推荐阅读更多精彩内容