前端设计模式学习笔记-高阶函数

复习并且记录下今天的学习笔记

高阶函数是指至少满足下列条件之一的函数。

1.函数可以作为参数被传递

2.函数可以作为返回值输出。

一、函数作为参数传递

把函数当作参数传递，这代表我们可以抽离出一部分容易变化的业务逻辑，把这部分业务逻 辑放在函数参数中，这样一来可以分离业务代码中变化与不变的部分。其中一个重要应用场景就 是常见的回调函数。

1. 回调函数

在 ajax 异步请求的应用中，回调函数的使用非常频繁。当我们想在 ajax 请求返回之后做一 些事情，但又并不知道请求返回的确切时间时，最常见的方案就是把 callback 函数当作参数传入 发起 ajax 请求的方法中，待请求完成之后执行 callback 函数:

var getUserInfo = function( userId, callback ){
	$.ajax( 'http://xxx.com/getUserInfo?' + userId, function( data ){
		if ( typeof callback === 'function' ){ 
		   callback( data );
        } 
 	});
 }
 getUserInfo( 13157, function( data ){ 
 	alert ( data.userName );
 });

回调函数的应用不仅只在异步请求中，当一个函数不适合执行一些请求时，我们也可以把这 些请求封装成一个函数，并把它作为参数传递给另外一个函数，“委托”给另外一个函数来执行。

比如，我们想在页面中创建 100 个 div 节点，然后把这些 div 节点都设置为隐藏。下面是一种编写代码的方式:

var appendDiv = function(){
	for ( var i = 0; i < 100; i++ ){
		var div = document.createElement( 'div' );
		 div.innerHTML = i; 
		document.body.appendChild( div );
		div.style.display = 'none';
	} };
  appendDiv();

把 div.style.display = 'none’的逻辑硬编码在 appendDiv 里显然是不合理的，appendDiv 未免有点个性化，成为了一个难以复用的函数，并不是每个人创建了节点之后就希望它们立刻被隐藏。
于是我们把 div.style.display = 'none’这行代码抽出来，用回调函数的形式传入 appendDiv 方法:

var appendDiv = function( callback ){ 
	for ( var i = 0; i < 100; i++ ){
		var div = document.createElement( 'div' ); 
		div.innerHTML = i; 
		document.body.appendChild( div );
		if ( typeof callback === 'function' ){
			callback( div ); 
		}
	} 
};
appendDiv(function( node ){
 node.style.display = 'none';
});

可以看到，隐藏节点的请求实际上是由客户发起的，但是客户并不知道节点什么时候会创 9 建好，于是把隐藏节点的逻辑放在回调函数中，“委托”给 appendDiv 方法。appendDiv 方法当然知道节点什么时候创建好，所以在节点创建好的时候，appendDiv 会执行之前客户传入的回 调函数。
2. Array.prototype.sort
Array.prototype.sort 接受一个函数当作参数，这个函数里面封装了数组元素的排序规则。从 Array.prototype.sort 的使用可以看到，我们的目的是对数组进行排序，这是不变的部分;而使 用什么规则去排序，则是可变的部分。把可变的部分封装在函数参数里，动态传入 Array.prototype.sort，使 Array.prototype.sort 方法成为了一个非常灵活的方法，代码如下:
//从小到大排列

[ 1, 4, 3 ].sort( function( a, b ){
	return a - b;
})

// 输出: [ 1, 3, 4 ]
//从大到小排列

[ 1, 4, 3 ].sort( function( a, b ){ 
	return b - a;
});

// 输出: [ 4, 3, 1 ]
二、函数作为返回值输出
相比把函数当作参数传递，函数当作返回值输出的应用场景也许更多，也更能体现函数式编程的巧妙。让函数继续返回一个可执行的函数，意味着运算过程是可延续的。
1.判断数据的类型
我们来看看这个例子，判断一个数据是否是数组，在以往的实现中，可以基于鸭子类型的概 念来判断，比如判断这个数据有没有 length 属性，有没有 sort 方法或者 slice 方法等。但更好 的方式是用 Object.prototype.toString 来计算。Object.prototype.toString.call( obj )返回一个 字符串，比如 Object.prototype.toString.call( [1,2,3] )总是返回"[object Array]"，而 Object.prototype.toString.call( “str”)总是返回"[object String]"。所以我们可以编写一系列的 isType 函数。

var isType = function( type ){ 
	return function( obj ){
		return Object.prototype.toString.call( obj ) === '[object '+ type +']'; 
	}
};

我们还可以用循环语句，来批量注册这些 isType 函数:

var Type = {};
for ( var i = 0, type; type = [ 'String', 'Array', 'Number' ][ i++ ]; ){
	(function( type ){
		Type[ 'is' + type ] = function( obj ){
			return Object.prototype.toString.call( obj ) === '[object '+ type +']';
			// 输出:true
			 };
		}
	})( type )
};
 Type.isArray( [] ); 
 Type.isString( "str" );
// 输出:true
// 输出:true

三、高阶函数实现AOP
AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来，这些 跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。把这些功能抽离出来之后， 再通过“动态织入”的方式掺入业务逻辑模块中。这样做的好处首先是可以保持业务逻辑模块的纯净和高内聚性，其次是可以很方便地复用日志统计等功能模块。
在 Java 语言中，可以通过反射和动态代理机制来实现 AOP 技术。而在 JavaScript 这种动态 语言中，AOP 的实现更加简单，这是 JavaScript 与生俱来的能力。
通常，在 JavaScript 中实现 AOP，都是指把一个函数“动态织入”到另外一个函数之中，具 体的实现技术有很多，本节我们通过扩展 Function.prototype 来做到这一点。代码如下:

Function.prototype.before = function( beforefn ){
	var __self = this; // 保存原函数的引用
	return function(){ 
		// 返回包含了原函数和新函数的"代理"函数
		 beforefn.apply( this, arguments ); 
		 // 执行新函数，修正 this // 执行原函数
		 return __self.apply( this, arguments );
	 }
 }
Function.prototype.after = function( afterfn ){ 
	var __self = this;
	return function(){
		var ret = __self.apply( this, arguments ); 
		afterfn.apply( this, arguments );
		return ret;
	}
 };
var func = function(){ 
	console.log( 2 );
};
func = func.before(function(){ 
	console.log( 1 );
}).after(function(){ 
	console.log( 3 );
}); 
func();

四、高阶函数的其他应用
1. currying

currying 又称部分求值。一个 currying 的函数首先会接受一些参数，接受了这些参数之后， 该函数并不会立即求值，而是继续返回另外一个函数，刚才传入的参数在函数形成的闭包中被保 存起来。待到函数被真正需要求值的时候，之前传入的所有参数都会被一次性用于求值。

如果在每个月的前 29 天，我们都只是保存好当天的开销，直到第 30 天才进行求值计算，这 样就达到了我们的要求。虽然下面的 cost 函数还不是一个 currying 函数的完整实现，但有助于 我们了解其思想:

var cost = (function(){ 
	var args = [];
	return function(){
		if ( arguments.length === 0 ){
			var money = 0;
			for ( var i = 0, l = args.length; i < l; i++ ){
				money += args[ i ];
			}
				return money; 
		}else{
			[].push.apply( args, arguments ); 
		}
	}
})()
cost( 100 ) // 未真正求值
cost( 300 )  // 未真正求值 
cost( 300 ) // 未真正求值
console.log( cost() ); // 求值并输出:600

接下来我们编写一个通用的 function currying(){}，function currying(){}接受一个参数，即 将要被 currying 的函数。在这个例子里，这个函数的作用遍历本月每天的开销并求出它们的总和。 代码如下:

var currying = function( fn ){
	var args = [];
	return function(){
	if ( arguments.length === 0 ){
		return fn.apply( this, args );
	}else{
		[].push.apply( args, arguments );
		return arguments.callee; }
	} 
};
var cost = (function(){ 
	var money = 0;
	return function(){
		for ( var i = 0, l = arguments.length; i < l; i++ ){
			money += arguments[ i ];
		 }
		return money; 
	}
})();
var cost = currying( cost );
// 转化成 currying 函数
cost( 100 ); // 未真正求值 
cost( 200 ); // 未真正求值  
cost( 300 ); // 未真正求值 
alert ( cost() ); // 求值并输出:600

至此，我们完成了一个 currying 函数的编写。当调用 cost()时，如果明确地带上了一些参数， 表示此时并不进行真正的求值计算，而是把这些参数保存起来，此时让 cost 函数返回另外一个 函数。只有当我们以不带参数的形式执行 cost()时，才利用前面保存的所有参数，真正开始进行 求值计算。
2. 函数节流
关于函数节流的代码实现有许多种，下面的 throttle 函数的原理是，将即将被执行的函数用 setTimeout 延迟一段时间执行。如果该次延迟执行还没有完成，则忽略接下来调用该函数的请求。 throttle 函数接受 2 个参数，第一个参数为需要被延迟执行的函数，第二个参数为延迟执行的时 间。具体实现代码如下:

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 );

3.分时函数
在前面关于函数节流的讨论中，我们提供了一种限制函数被频繁调用的解决方案。下面我们 将遇到另外一个问题，某些函数确实是用户主动调用的，但因为一些客观的原因，这些函数会严 重地影响页面性能。
一个例子是创建 WebQQ 的 QQ 好友列表。列表中通常会有成百上千个好友，如果一个好友 用一个节点来表示，当我们在页面中渲染这个列表的时候，可能要一次性往页面中创建成百上千 个节点。
在短时间内往页面中大量添加 DOM 节点显然也会让浏览器吃不消，我们看到的结果往往就 是浏览器的卡顿甚至假死。代码如下:

var ary = [];
for ( var i = 1; i <= 1000; i++ ){
	ary.push( i ); // 假设 ary 装载了 1000 个好友的数据
};
 var renderFriendList = function( data ){
	for ( var i = 0, l = data.length; i < l; i++ ){
		 var div = document.createElement( 'div' );
		 div.innerHTML = i; 
		 document.body.appendChild( div );
} };
 renderFriendList( ary );

这个问题的解决方案之一是下面的 timeChunk 函数，timeChunk 函数让创建节点的工作分批进
行，比如把 1 秒钟创建 1000 个节点，改为每隔 200 毫秒创建 8 个节点。
timeChunk 函数接受 3 个参数，第 1 个参数是创建节点时需要用到的数据，第 2 个参数是封装了创建节点逻辑的函数，第 3 个参数表示每一批创建的节点数量。代码如下:

var timeChunk = function( ary, fn, count ){
	var obj, t;
	var len = ary.length; 
var start = function(){
	for( var i = 0; i < Math.min( count || 1, ary.length ); i++ ){ 
		var obj = ary.shift();
		fn( obj );
	}
 };
return function(){
	t = setInterval(function(){
		if ( ary.length === 0 ){ // 如果全部节点都已经被创建好
			return clearInterval( t ); 
		}
		start();
	}, 200 ); // 分批执行的时间间隔，也可以用参数的形式传入
	};
};

最后我们进行一些小测试，假设我们有 1000 个好友的数据，我们利用 timeChunk 函数，每一 批只往页面中创建 8 个节点:

var ary = [];
for ( var i = 1; i <= 1000; i++ ){ 
	ary.push( i );
};
var renderFriendList = timeChunk( ary, function( n ){ 
	var div = document.createElement( 'div' ); 
	div.innerHTML = n;
	document.body.appendChild( div );
}, 8 ); 
renderFriendList();