最近在看一些关于设计模式的书。对高阶函数的应用方面做一些记录

AOP

AOP意为面向切面编程,主要思想就是把那些跟业务逻辑无关的部分抽离出来,比如日志,安全,异常处理。通过动态织入的方式来掺入业务逻辑之中,但又不会混淆于业务代码之中。也很方便复用。

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

以上就是利用JS来实现AOP,当你调用after和before之后,会返回一个函数,而这个函数将会把业务代码和其他部分编织在一起。

柯里化

函数柯里化,是固定部分参数,返回一个接受剩余参数的函数,也称为部分计算函数,目的是为了缩小适用范围,创建一个针对性更强的函数。有点类似不断的去缩小一个范围。

let currying = function(fn){
let args = [];

return function(){
	if (arguments.length <= 0) {
	//真正求值
		return fn.apply(this,args);
	}else{
		[].push.apply(args,arguments);
		return arguments.callee;
		}
	}
}

uncurrying

反柯里化函数,从字面讲,意义和用法跟函数柯里化相比正好相反,扩大适用范围,创建一个应用范围更广的函数。使本来只有特定对象才适用的方法,扩展到更多的对象。

Function.prototype.uncurrying = function () {
		var self = this;
		return function() {
			var obj = Array.prototype.shift.call( arguments ); //移出第一位,也就是调用时的对象
			return self.apply( obj, arguments );
		};
	};

	var push = Array.prototype.push.uncurrying();`

函数节流

在一些高频率触发的事件之中,我们预先设好的回调执行的次数过于频繁,会导致整个页面的卡顿。催生了一种技术叫函数节流,即在设定事件内忽略事件回调

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

分时函数

分时函数的目的在于把一些过于庞大高消耗的事件组的间隔延长。比如在页面中插入200个div. 我们可以设置成每隔200毫秒加入10个div.

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 ); // 分批执行的时间间隔,也可以用参数的形式传入
		};
	};

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

惰性加载函数

惰性加载含义在于避免那些不必要的开销,比如在为我们添加一个通用事件绑定函数的时候,我们需要让整体开销尽可能的小,但我们又必须增加一些If语句用来探测,所有我们可以利用改写来做到惰性加载函数

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, type, handler ){
						elem.attachEvent( 'on' + type, handler );
					}
				}
				addEvent( elem, type, handler );
			};

			var div = document.getElementById( 'div1' );
			addEvent( div, 'click', function(){
				alert (1);
			});
			addEvent( div, 'click', function(){
				alert (2);
			});

首先。这个if判断只执行一次,并且在不调用的情况下是不会执行的。而且当你第一次调用才会执行判断并改写整个函数。