脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript 函数式编程

JavaScript 函数式编程实践(来自IBM)第3/3页

 更新时间：2010年06月29日 08:46:44   作者：  
说到函数式编程，人们的第一印象往往是其学院派，晦涩难懂，大概只有那些蓬头散发，不修边幅，甚至有些神经质的大学教授们才会用的编程方式。

清单 15. jQuery 选择器
复制代码 代码如下:

var cons = $("div.note");// 找出所有具有 note 类的 div
var con = $("div#con");// 找出 id 为 con 的 div 元素
var links = $("a");// 找出页面上所有的链接元素


当然，jQuery 的选择器规则非常丰富，这里要说的是：用 jQuery 选择器选择出来的 jQuery 对象本质上是一个 List，正如 LISP 语言那样，所有的函数都是基于 List 的。
有了这个 List，我们可以做这样的动作：

清单 16. jQuery 操作 jQuery 对象 (List)
复制代码 代码如下:

cons.each( function (index){
$( this ).click( function (){
//do something with the node
});
});


想当与对 cons 这个 List中的所有元素使用 map( 还记得我们前面提到的 map 吗？ )，操作结果仍然为一个 List。我们可以任意的扩大 / 缩小这个列表，比如：

清单 17. 扩大 / 缩小 jQuery 集合
复制代码 代码如下:

cons.find("span.title");// 在 div.note 中进行更细的筛选
cons.add("div.warn");// 将 div.note 和 div.warn 合并起来
cons.slice(0, 5);// 获取 cons 的一个子集


现在我们来看一个小例子，假设有这样一个页面：

清单 18. 页面的 HTML 结构
复制代码 代码如下:

<div class="note">
<span class="title">Hello, world</span>
</div>
<div class="note">
<span class="title">345</span>
</div>
<div class="note">
<span class="title">Hello, world</span>
</div>
<div class="note">
<span class="title">67</span>
</div>
<div class="note">
<span class="title">483</span>
</div>


效果如下：

图 1. 过滤之前的效果

我们通过 jQuery 对包装集进行一次过滤，jQuery 的过滤函数可以使得选择出来的列表对象只保留符合条件的，在这个例子中，我们保留这样的 div，当且仅当这个 div 中包含一个类名为 title 的 span，并且这个 span 的内容为数字：

清单 19. 过滤集合
复制代码 代码如下:

var cons = $("div.note").hide();// 选择 note 类的 div, 并隐藏
cons.filter( function (){
return $( this ).find("span.title").html().match(/^\d+$/);
}).show();


效果如下图所示：

图 2. 过滤之后的效果

我们再来看看 jQuery 中对数组的操作 ( 本质上来讲，JavaScript 中的数组跟 List 是很类似的 )，比如我们在前面的例子中提到的 map 函数，过滤器等：

清单 20. jQuery 对数组的函数式操作
复制代码 代码如下:

var mapped = $.map([1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
function (n){
return n + 1;
});
var greped = $.grep([1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
function (n){
return n % 2 == 0;
});


mapped 将被赋值为 :
[2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

而 greped 则为：
[2, 4, 6, 8, 10]

我们再来看一个更接近实际的例子：

清单 21. 一个页面刷新的例子
复制代码 代码如下:

function update(item){
return
function (text){
$("div#"+item).html(text);
}
}
function refresh(url, callback){
var params = {
type : "echo",
data : ""
};
$.ajax({
type:"post",
url:url,
cache: false ,
async: true ,
dataType:"json",
data:params,
success: function (data, status){
callback(data);
},
error: function (err){
alert("error : "+err);
}
});
}
refresh("action.do/op=1", update("content1"));
refresh("action.do/op=2", update("content2"));
refresh("action.do/op=3", update("content3"));

首先声明一个柯里化的函数 update，这个函数会将传入的参数作为选择器的 id，并更新这个 div 的内容 (innerHTML)。然后声明一个函数 refresh，refresh 接受两个参数，第一个参数为服务器端的 url，第二个参数为一个回调函数，当服务器端成功返回时，调用该函数。
然后我们陆续调用三次 refresh，每次的 url 和 id 都不同，这样可以将 content1,content2,conetent3 的内容通过异步方式更新。这种模式在实际的编程中相当有效，因为关于如何与服务器通信，以及如果选取页面内容的部分被很好的抽象成函数，现在我们需要做的就是将 url 和 id 传递给 refresh，即可完成需要的动作。函数式编程在很大程度上降低了这个过程的复杂性，这正是我们选择使用该思想的最终原因。
结束语
实际的应用中，不会囿于函数式或者面向对象，通常是两者混合使用，事实上，很多主流的面向对象语言都在不断的完善自己，比如加入一些函数式编程语言的特征等，JavaScript 中，这两者得到了良好的结合，代码不但可以非常简单，优美，而且更易于调试。
文中仅仅提到 jQuery 特征的一小部分，如果感兴趣，则可以在参考资料中找到更多的链接，jQuery 非常的流行，因此你可以找到很多论述如何使用它的文章。

参考资料

  • jQuery官方网站的地址，可以下载到最新的 jQuery 库。

  • JavaScript 中的闭包：一篇优秀的关于 JavaScript 闭包的论述。

  • 文中提到的 LISP 之根源的译文，该文详细的描述了 LISP 的其中基本原语，很好的解释了 LISP 的 可编程性。

  • 函数式编程的基本概念：一篇关于 JavaScript 函数式编程的基本概念的文章。

  • “JavaScript 框架比较”：在本文中，您将了解如何通过 JavaScript 框架更轻松、更快速地创建具有高度交互性和响应性的 Web 站点和 Web 应用程序。

  • “JavaScript 开发工具包 ”：本专题为您收集了一些和目前业界比较流行的 JavaScript 开发工具包相关的资源，从初级的入门介绍到高级的使用以及和其他开发语言、软件集成的内容。

  • developerWorks 技术活动和网络广播：随时关注 developerWorks 技术活动和网络广播。 

  • developerWorks Web development 专区：通过专门关于 Web 技术的文章和教程，扩展您在网站开发方面的技能。

  • developerWorks Ajax 资源中心：这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。

  • developerWorks Web 2.0 资源中心，这是有关 Web 2.0 相关信息的一站式中心，包括大量 Web 2.0 技术文章、教程、下载和相关技术资源。您还可以通过 Web 2.0 新手入门 栏目，迅速了解 Web 2.0 的相关概念。
上一页123阅读全文
您可能感兴趣的文章:

相关文章

最新评论