欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript 函數(shù)式編程實踐(來自IBM)

 更新時間：2010年06月29日 08:46:44   作者：  
說到函數(shù)式編程，人們的第一印象往往是其學(xué)院派，晦澀難懂，大概只有那些蓬頭散發(fā)，不修邊幅，甚至有些神經(jīng)質(zhì)的大學(xué)教授們才會用的編程方式。

清單 15. jQuery 選擇器
復(fù)制代碼 代碼如下:

var cons = $("div.note");// 找出所有具有 note 類的 div
var con = $("div#con");// 找出 id 為 con 的 div 元素
var links = $("a");// 找出頁面上所有的鏈接元素


當(dāng)然，jQuery 的選擇器規(guī)則非常豐富，這里要說的是：用 jQuery 選擇器選擇出來的 jQuery 對象本質(zhì)上是一個 List，正如 LISP 語言那樣，所有的函數(shù)都是基于 List 的。
有了這個 List，我們可以做這樣的動作：

清單 16. jQuery 操作 jQuery 對象 (List)
復(fù)制代碼 代碼如下:

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


想當(dāng)與對 cons 這個 List中的所有元素使用 map( 還記得我們前面提到的 map 嗎？ )，操作結(jié)果仍然為一個 List。我們可以任意的擴(kuò)大 / 縮小這個列表，比如：

清單 17. 擴(kuò)大 / 縮小 jQuery 集合
復(fù)制代碼 代碼如下:

cons.find("span.title");// 在 div.note 中進(jìn)行更細(xì)的篩選
cons.add("div.warn");// 將 div.note 和 div.warn 合并起來
cons.slice(0, 5);// 獲取 cons 的一個子集


現(xiàn)在我們來看一個小例子，假設(shè)有這樣一個頁面：

清單 18. 頁面的 HTML 結(jié)構(gòu)
復(fù)制代碼 代碼如下:

<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 對包裝集進(jìn)行一次過濾，jQuery 的過濾函數(shù)可以使得選擇出來的列表對象只保留符合條件的，在這個例子中，我們保留這樣的 div，當(dāng)且僅當(dāng)這個 div 中包含一個類名為 title 的 span，并且這個 span 的內(nèi)容為數(shù)字：

清單 19. 過濾集合
復(fù)制代碼 代碼如下:

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


效果如下圖所示：

圖 2. 過濾之后的效果

我們再來看看 jQuery 中對數(shù)組的操作 ( 本質(zhì)上來講，JavaScript 中的數(shù)組跟 List 是很類似的 )，比如我們在前面的例子中提到的 map 函數(shù)，過濾器等：

清單 20. jQuery 對數(shù)組的函數(shù)式操作
復(fù)制代碼 代碼如下:

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. 一個頁面刷新的例子
復(fù)制代碼 代碼如下:

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

首先聲明一個柯里化的函數(shù) update，這個函數(shù)會將傳入的參數(shù)作為選擇器的 id，并更新這個 div 的內(nèi)容 (innerHTML)。然后聲明一個函數(shù) refresh，refresh 接受兩個參數(shù)，第一個參數(shù)為服務(wù)器端的 url，第二個參數(shù)為一個回調(diào)函數(shù)，當(dāng)服務(wù)器端成功返回時，調(diào)用該函數(shù)。
然后我們陸續(xù)調(diào)用三次 refresh，每次的 url 和 id 都不同，這樣可以將 content1,content2,conetent3 的內(nèi)容通過異步方式更新。這種模式在實際的編程中相當(dāng)有效，因為關(guān)于如何與服務(wù)器通信，以及如果選取頁面內(nèi)容的部分被很好的抽象成函數(shù)，現(xiàn)在我們需要做的就是將 url 和 id 傳遞給 refresh，即可完成需要的動作。函數(shù)式編程在很大程度上降低了這個過程的復(fù)雜性，這正是我們選擇使用該思想的最終原因。
結(jié)束語
實際的應(yīng)用中，不會囿于函數(shù)式或者面向?qū)ο?，通常是兩者混合使用，事實上，很多主流的面向?qū)ο笳Z言都在不斷的完善自己，比如加入一些函數(shù)式編程語言的特征等，JavaScript 中，這兩者得到了良好的結(jié)合，代碼不但可以非常簡單，優(yōu)美，而且更易于調(diào)試。
文中僅僅提到 jQuery 特征的一小部分，如果感興趣，則可以在參考資料中找到更多的鏈接，jQuery 非常的流行，因此你可以找到很多論述如何使用它的文章。

參考資料

  • jQuery官方網(wǎng)站的地址，可以下載到最新的 jQuery 庫。

  • JavaScript 中的閉包：一篇優(yōu)秀的關(guān)于 JavaScript 閉包的論述。

  • 文中提到的 LISP 之根源的譯文，該文詳細(xì)的描述了 LISP 的其中基本原語，很好的解釋了 LISP 的 可編程性。

  • 函數(shù)式編程的基本概念：一篇關(guān)于 JavaScript 函數(shù)式編程的基本概念的文章。

  • “JavaScript 框架比較”：在本文中，您將了解如何通過 JavaScript 框架更輕松、更快速地創(chuàng)建具有高度交互性和響應(yīng)性的 Web 站點(diǎn)和 Web 應(yīng)用程序。

  • “JavaScript 開發(fā)工具包 ”：本專題為您收集了一些和目前業(yè)界比較流行的 JavaScript 開發(fā)工具包相關(guān)的資源，從初級的入門介紹到高級的使用以及和其他開發(fā)語言、軟件集成的內(nèi)容。

  • developerWorks 技術(shù)活動和網(wǎng)絡(luò)廣播：隨時關(guān)注 developerWorks 技術(shù)活動和網(wǎng)絡(luò)廣播。 

  • developerWorks Web development 專區(qū)：通過專門關(guān)于 Web 技術(shù)的文章和教程，擴(kuò)展您在網(wǎng)站開發(fā)方面的技能。

  • developerWorks Ajax 資源中心：這是有關(guān) Ajax 編程模型信息的一站式中心，包括很多文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這里找到。

  • developerWorks Web 2.0 資源中心，這是有關(guān) Web 2.0 相關(guān)信息的一站式中心，包括大量 Web 2.0 技術(shù)文章、教程、下載和相關(guān)技術(shù)資源。您還可以通過 Web 2.0 新手入門 欄目，迅速了解 Web 2.0 的相關(guān)概念。

相關(guān)文章

最新評論