函數型VS面向对象型的javascript程序设计.doc

灵活的js语言可以轻易的就完成截然相反的两种编程模式–函数型程序设计和面向对象的程序设计。 js原生的支持将函数当做变量来处理。你可以将一个函数赋值给一个变量，然后把他传给其他的变量。抽象的说，我们可以认为js的函数是一个特殊的变量：只不过他的形式是“函数”。 js原生的也提供对象。在js中，对象可以认为是一系列平面化的属性值和方法。他们看起来像是一个数据字典，而不像你在其他诸如java、c++、c#中看到的对象那样。在经典的面向对象编程中，类表示可以通过new操作符来生成一个实例的模板。但是在js中，没有可以当做蓝本来生成对象的。在js中，一个对象的蓝本更像是一个数据字典。所以在js中，你可以创建对象，然后可以在对象中存储数据。当然，js的对象也提供一定程度的面向对象的特性，比如封装和继承。 js开发越来越热，两种模式的优劣是什么？js对两种模式都支持，但是问题的答案得你自己来弄清楚。它两种都支持，但并不是某一种特别的合适。OOP的js框架和函数型的js都同时存在。 函数型程序设计简介 函数型程序设计中，每个代码段都是在”function”之上建立的，这与传统的OOP建立在”class”之上是不同的。一个函数只是对输入的展现的一种操作。一个函数只是接收一些输入，然后返回一些输出，其他的都是隐藏起来的。 在函数型程序设计中，你通过在一个函数中调用其他的函数来完成程序的输入与输出。这通常都没有可以处理输入、存储数据以及一系列的状态更新的那一层。函数就像一个数值一样，可以作为参数传递给其他函数。 javascript与函数型程序设计 需要明确的一个事实是：js并不是像F#那样真正的函数型程序设计语言，虽然他有一些函数型程序设计模式的特性。利用这些特性，你也可以用js做很好的工作。到今天为止，使用jQuery就是这种模式最广泛的应用了。 匿名函数是函数型程序设计的精华之所在。匿名函数是lambda计算式的另一种形式，一种可以适配经流行的编码风格。 1 2 3 function (x,y){ return x + y; } 普通函数和匿名的函数的唯一区别就在于名字。在函数的上下文中，当你只是需要函数的返回值作为参数来使用的时候，并不是非得要给他一个函数名。通过下面这个例子我们来看看： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 // 一个用来计算和的函数 var CalcTotal = function(x, y) { return x + y; }; // 增加税率 var AddTaxes = function(x) { return x * 1.2; }; // 最终的计算函数 var CalcTotalPlusTaxes = function (fnCalcTotal, fnAddTaxes, x, y) { return fnAddTaxes(fnCalcTotal(x, y)); }; // 执行 var result = CalcTotalPlusTaxes(CalcTotal, AddTaxes, 40, 60); alert(result); 需要注意的是，你也可以使用匿名函数，而不是非得通过一个中间变量来传递给最终的计算式。 1 2 3 alert( (function(x){return x * 1.2})(100); ); 将匿名函数看做一个变量，可以很轻松的将数据和特性合并在一起。这也给你了一个机会去试验一些其他的设计原则。当高一级的模块（无论对象还是函数）需要低一级的模块提供的返回值的时候，就可以将低一级的模块直接当做参数传过去。很多情况下，这会提高函数参数的可读性，并且让代码更优雅一些，当然，也会让你在处理复杂事物的时候更加得心应手。 jQuery和函数型程序设计 jQuery在函数型程序设计方面吸引了人们极大的关注。整个jQuery库都是基于jquery对象或者说$。$是DOM元素的一个封装，DOM元素也可以通过$()表达式传递进去。另外，jQuery支持链式操作，每一个函数运行之后都会返回同一个jquery对象。 jQuery非常高效，因为你可以在主要工作是操作DOM元素的WEB编程环境下最大限度的发挥出函数型程序设计的威力。你也许是jQuery的粉丝，并且觉得这种函数式的操作非常赞。但是，这不是需要完全把这种编程模式到处使用的理由。我们通过下面这个jQuery源码来看个例子： 1 2 3 4 5 6 7 8 jQuery.fn = jQuery.prototype = { init: function( selector, context ) { ... }, siz