我们看一段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',
})
}
}
- 关于es7 @ 修饰器 更多参考阮老师的书
- http://es6.ruanyifeng.com/#docs/decorator#%E7%B1%BB%E7%9A%84%E4%BF%AE%E9%A5%B0
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() + '
');
}
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 函数节流
- 定义
如果将水龙头拧紧直到水是以水滴的形式流出，那你会发现每隔一段时间，就会有一滴水流出。
也就是会说预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。
即定义一个函数最短调用时间 来实现“节流”的效果
和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）及源码解析