JavaScript函数笔记:(7)实战案例1（JavaScript）

绑定函数

函数绑定就是为了纠正函数的执行上下文，特别是当函数中带有this关键字的时候，这点尤其重要，稍微不小心，就会使函数的执行上下文发生跟预期不同的改变，导致代码执行上的错误。

函数绑定具有3个特征：

• 函数绑定要创建一个函数，可以在特定环境中以指定参数调用另一个函数。
• 一个简单的bind（）函数接收一个函数和一个环境，返回一个在给定环境中调用给定函数的函数，并且将所有参数原封不动传递过去。

function bind(fn,context){
	return function(){
		return fn.apply(context,arguments);
	};
}

• 被绑定函数与普通函数相比有更多的开销，它们需要更多内存，同时也因为多重函数调用而稍微慢一点，所以最好只在必要时使用。

链式语法

jQuery最大亮点之一就是它的链式语法。在JavaScript中，很多方法没有返回值，一些设置或修改对象的某个状态却不返回任何值的方法就是典型的例子。如果让这些方法返回this，而不是undefined，那么就要启用级联功能，即所谓的链式语法。在一个级联中，单独一条语句可以连续调用同一个对象的很多语法。

getElement('box').
	move(350,150).
	width(100).height(100).
	color('red').
	border('2px outset').
	padding('2px').
	appendText("使用链式语法")

Function.prototype.method=function(name,func){
	if(!this.prototype[name]){
		this.prototype[name]=func;
		return this;
	}
};
String.method('trim',function(){
	return this.replace(/^\s+|\s+$/g,'');
});
String.method('writeln',function(){
	document.writeln(this);
	return this;
});
String.method('alert',function(){
	window.alert(this);
	return this;
});
var str=" abc ";
str.trim().writeln().alert();

函数节流

函数节流的设计思想就是让某些代码可以在间断情况下连续重复执行。实现的方法是使用定时器对函数进行节流。

在第一次调用函数时，创建一个定时器，在指定的时间间隔后运行代码。当第二次调用的时候，清除前一次的定时器并设置另一个，实际上就是前一个定时器再次执行，将其替换成一个新的定时器。

var Processor={
	timeoutId:null,
	performProcessing:function(){
		//实际执行的方法
	},
	//初始处理调用的方法
	process:function(){
		clearTimeout(this.timeoutId);
		var that=this;
		this.timeoutId=setTimeout(function(){
			that.performProcessing();
		},100)
	}
};
//尝试开始执行
Processor.process();

简化模式

function throttle(method,context){
	clearTimeout(method,tId){
		method.tId=setTimeout(function(){
			method.call(context);
		},100)
	}
}

函数节流解决的问题是一些代码（特别是事件）的无间断执行，这个问题严重影响了浏览器的性能，可能会造成浏览器反应速度变慢或直接崩溃。

分支函数

分支函数主要解决：浏览器之间兼容性的重复判断。解决浏览器之间兼容性的一般方式是使用if语句进行特性检测或能力检测，根据浏览器不同的实现来实现功能上的兼容，这样做的问题是：每执行一次代码，可能都需要进行一次浏览器兼容性方面的检测，这是没有必要的。

var XHR=function(){
	var standard={
		createXHR:function(){
			return new XMLHttpRequest();
		}
	}
	var newActionXObject={
		createXHR:function(){
			return new ActionXObject("Msxm12.XMLHTTP");
		}
	}
	var oldActionXObject={
		createXHR:function(){
			return new oldActionXObject("Microsoft.XMLHTTP");
		}
	}
	if(standard.createXHR()){
		return standard;
	}else{
		try{
			newActiveXObject.createXHR();
			return newActiveXObject;
		}catch(o){
			oldActionXObject.createXHR();
			return oldActionXObject;
		}
	}
}();

分支的设计原理：声明几个不同名称的对象，但是为这些对象都声明一个名称相同的方法（关键点）。针对这些来着不同的对象，但是拥有相同的方法，根据不同的浏览器设计各自的实现，接着开始进行一次浏览器检测，并且由经过浏览器检测的结果来决定返回哪一个对象。

惰性载入函数

惰性载入函数主要解决的问题也是兼容性处理。

惰性载入函数设计与分支函数类似。

var addEvent=function(el,type,handle){
	addEvent=el.addEventListener?function(el,type,handle){
		el.addEventListener(type,handle,false);
	}:function(el,type,handle){
		el.attachEvent("on"+type,handle);
	};
	addEvent(el,type,handle);
}

惰性载入表示函数执行的分支仅会发生一次，即第一次调用的时候。在第一次调用的过程中，该函数会被覆盖为另一个按合适方式执行的函数，这样任何对原始函数的调用都不用再经过执行的分支了。

优点：

• 要执行的适当代码只有在实际调用函数时才进行。
• 尽管第一次调用该函数会因额外的第二个函数调用而稍微慢点，但后续的调用都会很快，因为避免了多重条件。

由于浏览器之间的行为差异，多数JavaScript代码包含了大量的if语句，将执行引导到正常的代码中，具体的执行过程如下：

• 惰性载入表示函数执行的分支会发生一次，即函数第一次调用的时候。
• 在第一次调用的过程中，该函数会被覆盖为另一个按合适方式执行的函数，这样任何函数调用都不要经过执行分支了。

惰性求值

在JavaScript中，使用函数式风格编程，应该对于表达式有着深刻理解，并能够主动使用表达式的连续运算来组织代码。

• 在运算元中，除了JavaScript默认的数据类型外，函数也可以作为一个重要的运算元参与运算。
• 在运算符中，除了JavaScript的大量预定义运算符外，函数也可以作为一个重要的运算符进行计算和组织代码。

惰性函数模式是一种将对函数或请求的处理延迟到真正需要结果时进行的通用概念。

var f=function(){
	var t= new Date();
	f=function(){
		return t;
	}
	return f();
};
//f();
document.write(f());