高阶函数
1. 高阶函数的必须满足一下条件之一
-
函数可以作为参数被传递
-
函数可以作为返回值被输出
- 面向切面编程(AOP)
主要作用是把一些核心业务逻辑模块无关的功能抽象处理
- 函数柯理化
又称部分求值，一个柯里化函数首先会接受一些参数，接受参数之后，该函数不会立即求值，而是继续返回另一个函数，刚才传入的参数在函数形成的闭包中被保存，待到函数真正需要求值的时候，之前传入的所有参数都会被一次性用于求值
- 函数节流
javascript 中的函数大多是用户主动触发的，一般不会有性能问题，但是在有些场景下，函数有可能被频繁的调用，而造成性能问题, 比如: window.onresize事件,mousemove事件,上传进度等, 函数节流的原理：由于函数触发频率太高造成的性能问题，解决方法就是降低触发频率，或者或略一部分变化延迟执行函数
var throttle = function (fn, interval) {
var _self = fn, // 保存需要被延迟执行的函数的引用
timer,
firstTime = true; // 是否第一次调用
return function () {
var args = arguments,
_me = this;
if (firstTime) { // 如果是第一次，不需要延迟执行
_self.apply(_me, args);
return firstTime = false;
}
if (timer) {
// 如果定时器还在说明前一次延迟执行还没有完成
return false;
}
timer = setTimeout(function () {
clearTimeout(timer);
timer = null;
_self.apply(_me, args);
}, interval || 500);
}
}
window.onresize = throttle(function () {
console.log('1');
}, 500)
```
4. 分时函数
> 有的时候函数的频繁调用是我们需要的，但是这些函数的频繁调用会影响页面性能，这个时候为了避免引起浏览器卡顿，就需要将工作分批进行，将时间拉开。
5. 惰性加载函数
> 针对一些有浏览器兼容问题的方法，我们通常需要在调用方法前做出判断，频繁的调用函数判断会增加额外的开销，这个时候就需要使用惰性加载函数，在第一使用的时候进行兼容想判断，然后将所得结果直接赋值给这个函数，覆盖，这样下一次调用的时候就不需要判断了
```js
var addEvent = function (elem, type, handler) {
if (window.addEventListener) {
addEvent = function (elem, type, handler) {
elem.addEventListener(type, handler, false);
}
} else if (window.attachEvent) {
addEvent = function () {
elem.attachEvent('on' + type, handler);
}
}
addEvent(elem, type, handler); // 这里是将结果赋值给自己
}
var div = document.getElementById('box');
addEvent(div, 'click', function () {
console.log('div click');
})
网友评论