• [织梦吧]唯一域名:www.dedecms8.com,织梦DedeCMS学习平台.

当前位置: > 网页制作 > JavaScript >

用函数式编程技术编写优美的 JavaScript(2)

来源: www.dedecms8.com 编辑:织梦吧 时间:2012-02-07点击:

  使用函数作为值

  也可以将函数作为值使用。还可以拥有一些所赋值是函数的变量。在最后一个示例中,还可以执行以下操作:

  清单 6. 使用函数赋值

  1. var sum = function(x,y,z) { 
  2.   return (x+y+z); 
  3. alert(sum(1,2,3)); 

  在上面 清单 6 的示例中,为变量 sum 赋的值是函数定义本身。这样,sum 就成了一个函数,可以在任何地方调用。

  调用函数的不同方法

  JavaScript 允许用两种方式调用函数,如清单 7 和 8 所示。

  清单 7. 典型的函数应用

  1. alert (“Hello, World!"); 

  清单 8. 用函数作为表达式

  1. (alert) (“Hello, World!"); 

  所以也可以编写以下代码:

  清单 9. 定义函数之后就可以立即使用它

  1. function(x,y,z) { return (x+y+z) } ) (1, 2, 3); 

  可以在括号中编写函数表达式,然后传递给参数,对参数进行运算。虽然在 清单 8 的示例中,有直接包含在括号中的函数名称,但是按 清单 9 中所示方式使用它时,就不是这样了。

  将函数作为参数传递给其他函数

  也可以将函数作为参数传递给其他函数。虽然这不是什么新概念,但是在后续的示例中大量的使用了这个概念。可以传递函数参数,如 清单 10 所示。

  清单 10. 将函数作为参数传递,并应用该函数

  1. var passFunAndApply = function (fn,x,y,z) { return fn(x,y,z); }; 
  2.  
  3. var sum = function(x,y,z) { 
  4.   return x+y+z; 
  5. }; 
  6.  
  7. alert( passFunAndApply(sum,3,4,5) ); // 12 

  执行最后一个 alert 语句输出了一个大小为 12 的值。

  使用函数式概念

  前一节介绍了一些使用函数式风格的编程概念。所给的示例并没有包含所有的概念,它们在重要性方面也没有先后顺序,只是一些与这个讨论有关的概念而已。下面对 JavaScript 中的函数式风格作一快速总结:

  函数并不总是需要名称。

  函数可以像其他值一样分配给变量。

  函数表达式可以编写并放在括号中,留待以后应用。

  函数可以作为参数传递给其他函数。

  这一节将介绍一些有效使用这些概念编写优美的 JavaScript 代码的示例。(使用 JavaScript 函数式风格,可以做许多超出这个讨论范围的事。)

  扩展数组排序

  先来编写一个排序方法,可以根据数组元素的日期对数据进行排序。用 JavaScript 编写这个方法非常简单。数据对象的排序方法接受一个可选参数,这个可选参数就是比较函数。在这里,需要使用 清单 11 中的比较函数。

  清单 11. 比较函数

  1. function (x,y) { 
  2.     return x.date – y.date; 

  要得到需要的函数,请使用 清单 12 的示例。

  清单 12. 排序函数的扩展

  1. arr.sort( function (x,y) {  return x.date – y.date; } ); 

  其中 arr 是类型数组对象。排序函数会根据 arr 数组中对象的日期对所有对象进行排序。比较函数和它的定义一起被传递给排序函数,以完成排序操作。使用这个函数:

  每个 JavaScript 对象都有一个 date 属性。

  JavaScript 的数组类型的排序函数接受可选参数,可选参数是用来排序的比较函数。这与 C 库中的 qsort 函数类似。

  动态生成 HTML 的优美代码

  在这个示例中,将看到如何编写优美的代码,从数组动态地生成 HTML。可以根据从数据中得到的值生成表格。或者,也可以用数组的内容生成排序和未排序的列表。也可以生成垂直或水平的菜单项目。

About D8

  • ©2014 织梦吧(d8) DedeCMS学习交流平台
  • 唯一网址 www.DedeCMS8.com 网站地图
  • 联系我们 1170734538@qq.com ,  QQ