简介
本章着重讲解一下柯里化的应用，以利于对柯里化的理解和深入。柯里化只是一门技术，其实就是化简了代码。
事件监听
var addEvent = function(ele, type, fn,) {
if(window.addEventListener) {
ele.addEventListener(type, fn,)
} else if(window.attachEvent) {
ele.attachEvent("on" + type, fn)
}
}
该方法没有任何问题，但是有弊端，每调用一次函数都需要重新进行判断，其实对于事件监听网页一发布浏览器已经确定了，就可以知晓浏览器到底是需要哪一种监听方式。所以我们可以让判断只执行一次。可以改为下面的效果。
var addEvent = (function() {
if(window.addEventListener) {
return function(ele, type, fn) {
ele.addEventListener(type, fn)
}
} else if(window.attachEvent) {
return function(ele, type, fn) {
ele.attachEvent("on" + type, fn)
}
}
})()
这里面使用的其实就是柯里化的应用，注意许多人把这里认为是闭包，其实闭包和柯里化的区别我们在上节课已经说明，区别在于返回的函数中还附带参数。
在这里面addEvent 它就是提前返加了一个新的函数，而且这个函数是根据浏览器的到底采用哪种监听而返回的。
优点：
提前返回一个兼容浏览器的函数。
等待执行，在新函数中调用事件处理方法，等待触发执行
防抖和函数节流
高频事件触发，scroll、resize、mousemove这些事件和效果有时会出现一卡一卡，运行不流畅。这种情况称之为掉帧。
掉帧
由于大部分屏幕刷新的频率是60HZ,所以我们要做的就是尽量去让帧率达到60fps。也就是浏览器每秒刷新60帧，换言之16.667ms就要刷新一帧。
而高频事件要远大于16.667ms/帧的情况，那么就会导致屏幕卡顿，影响性能CPU占用越来越大，更会影响用户体验。
解决
上面的问题在于程序不断且大量的执行，怎么解决？办法就是尽量在一定的时间内，只执行一次。
再换句话说就是延迟执行，并且延迟那段时间只允许一次执行。这样就避免掉高频执行避免掉帧触发。
举例：就像用手指按住一个弹簧，它会等到手指抬起再弹起。
//防抖函数
function debounce(fn,delay){
var timer;
return function(){
var that = this,
innerArgs = [].slice.call(arguments)
clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(that,innerArgs);
},delay)
}
}
//使用
window.onscroll = debounce(function(){},100);
这里面实现的功能其实就是让函数在高频事件触发过程中,一直不能执行,原理就是clearTimeout(timer)会将执行过程一直干掉,直至不再触发事件时,才只能执行一次.
函数节流
函数节流就是间隔和屏幕刷新频率相等或者更小的情况才执行. 执行过程还会执行,只不过不会像以前那么高频而已.
一句话解释:就是控制触发频率.
举例:将水龙头从以前大量出水拧紧至水以水滴形式流出.
//定义节流函数
function throtte(fn,delay){
var prevTime = +new Date();
return function(){
var curTime = +new Date();
if(curTime-prevTime>delay){
fn.apply(this,arguments)
prevTime = curTime;
}
}
}
//使用
var throtteScroll = throtte(function(){
console.log(111)
},500)
window.onscroll = throtteScroll;
bind函数
bind函数其实ES5已经实现了，不过还是存在兼容性的问题，如何解决兼容性的问题？
我们可以书写一个简单示例：
//书写一个工具方法（绑定事件功能）
var EventUtil = {
addHandler: (function(){
if (window.addEventListener) {
return function(element,type,handler){
element.addEventListener(type, handler, false);
}
} else if (window.attachEvent) {
return function(element,type,handler){
element.attachEvent("on" + type, handler);
}
} else {
return function(element,type,handler){
element["on" + type] = handler;
}
}
})()
}
//书写一个执行方法，并且把方法放在对象中
var handler = {
message:"这是小明"，
handlerClick:function(event){
alert(this.message+":"+event.type)
}
}
EventUtil.addHandler(document.getElementById('btn'),"click",hanlder.hanlderClick)
//弹的结果为undefined
上面的书写执行结果为undefined；原因是因为handlerClick函数中的this是随着执行环境的改变而改变。
那么我就希望弹出的结果是handler函数中的message属性的值怎么办咧？这就需要借助函数柯里化。
我们实现个简单的方法，先玩一下。
function bind(fn,context){
return function(){
return fn.apply(context,arguments)
}
}
EventUtil.addHandler(document.getElementById('btn'),"click",bind(hanlder.hanlderClick,handler))
//窗口弹出的结果为 这是小明
我们再实现出一个和ES5内部的方法一样去做兼容的方法
if (!Function.prototype.bind){
Function.prototype.bind = function(oThis) {
if (typeof this !== "function") {
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
}
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function() {},
fBound = function() {
return fToBind.apply(this instanceof fNOP && oThis ? this : oThis || window,
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}
EventUtil.addHandler(document.getElementById('btn'),"click",hanlder.hanlderClick.bind(handler))
这个方法是对Function原型方法的扩充，对于任何函数都有bind方法。其中内部实现用到了原型继承。希望大家多多思考和提问
