emu in blogjava

            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理 ::
            171 隨筆 :: 103 文章 :: 1052 評論 :: 2 Trackbacks
          轉子 http://www-128.ibm.com/developerworks/cn/web/wa-javascript.html?。大部分內容適合介紹給初學者,只有最后的sequence算是一個可以借鑒的設計模式了。

          用函數式編程技術編寫優美的 JavaScript

          級別: 初級

          Shantanu Bhattacharya (shantanu@justawordaway.com), 首席顧問, Siemens Information Systems Limited

          2006 年 7 月 20 日

          函數式或聲明性編程是非常強大的編程方法,正逐漸在軟件行業流行起來。這篇文章將介紹一些相關的函數式編程概念,并提供有效使用這些概念的示例。作者將解釋如何使用 JavaScript(TM)?(JavaScript 能導入函數式編程的構造和特性)編寫優美的代碼。

          簡介

          函數式編程語言在學術領域已經存在相當長一段時間了,但是從歷史上看,它們沒有豐富的工具和庫可供使用。隨著 .NET 平臺上的 Haskell 的出現,函數式編程變得更加流行。一些傳統的編程語言,例如 C++ 和 JavaScript,引入了由函數式編程提供的一些構造和特性。在許多情況下,JavaScript 的重復代碼導致了一些拙劣的編碼。如果使用函數式編程,就可以避免這些問題。此外,可以利用函數式編程風格編寫更加優美的回調。

          函數式編程

          函數式編程只描述在程序輸入上執行的操作,不必使用臨時變量保存中間結果。重點是捕捉 “是什么以及為什么”,而不是 “如何做”。與將重點放在執行連續命令上的過程性編程相比,函數式編程的重點是函數的定義而不是狀態機(state machine)的實現。

          大型知識管理系統應用程序從使用函數式編程風格上受益頗多,因為函數式編程簡化了開發。

          因為函數式編程采用了完全不同的組織程序的方式,所以那些習慣于采用命令式范例的程序員可能會發現函數式編程有點難學。在這篇文章中,您將了解一些關于如何采用函數式風格,用 JavaScript 編寫良好的、優美的代碼的示例。我將討論:

          • 函數式編程概念,包括匿名函數、調用函數的不同方法,以及將函數作為參數傳遞給其他函數的方式。

          • 函數式概念的運用,采用的示例包括:擴展數組排序;動態 HTML 生成的優美代碼;系列函數的應用。






          函數式編程概念

          在那些通過描述 “如何做” 指定解決問題的方法的語言中,許多開發人員都知道如何進行編碼。例如,要編寫一個計算階乘的函數,我可以編寫一個循環來描述程序,或者使用遞歸來查找所有數字的乘積。在這兩種情況下,計算的過程都在程序中進行了詳細說明。清單 1 顯示了一個計算階乘的可能使用的 C 代碼。


          清單 1. 過程風格的階乘
          			
          int factorial (int n)
          {
            if (n <= 0)
              return 1;
            else
              return n * factorial (n-1);
          }
          

          這類語言也叫做過程性 編程語言,因為它們定義了解決問題的過程。函數式編程與這個原理有顯著不同。在函數式編程中,需要描述問題 “是什么”。 函數式編程語言又叫做聲明性 語言。同樣的計算階乘的程序可以寫成所有到 n 的數字的乘積。計算階乘的典型函數式程序看起來如 清單 2 中的示例所示。


          清單 2. 函數式風格的階乘
          				
          factorial n, where n <= 0 	:= 1
          factorial n    := foldr * 1 take n [1..]
          

          第二個語句指明要得到從 1 開始的前 n 個數字的列表(take n [1..]),然后找出它們的乘積,1 為基元。這個定義與前面的示例不同,沒有循環或遞歸。它就像階乘函數的算術定義。一旦了解了庫函數(takefoldr)和標記(list notation [ ])的意義,編寫代碼就很容易,而且可讀性也很好。

          只用三行 Miranda 代碼就可以編寫例程,根據參數,使用廣度優先或深度優先遍歷處理 n 叉樹的每個節點,而且元素可以是任何通用類型。

          從歷史上看,函數式編程語言不太流行有各種原因。但是最近,有些函數式編程語言正在進入計算機行業。其中一個例子就是 .NET 平臺上的 Haskell。其他情況下,現有的一些語言借用了函數式編程語言中的一些概念。一些 C++ 實現中的迭代器和 continuation,以及 JavaScript 中提供的一些函數式構造(functional construct),就是這種借用的示例。但是,通過借用函數式構造,總的語言編程范例并沒有發生變化。JavaScript 并沒因為函數式構造的添加就變成了函數式編程語言。

          我現在要討論 JavaScript 中的函數式構造的各種美妙之處,以及在日常編碼和工作中使用它們的方式。我們將從一些基本功能開始,然后用它們查看一些更有趣的應用。

          匿名函數

          在 JavaScript 中,可以編寫匿名函數或沒有名稱的函數。為什么需要這樣的函數?請繼續往下讀,但首先我們將學習如何編寫這樣一個函數。如果擁有以下 JavaScript 函數:
          清單 3. 典型的函數

          				
          function sum(x,y,z) {
            return (x+y+z);
          }
          

          然后對應的匿名函數看起來應當如下所示:
          清單 4. 匿名函數

          				
          function(x,y,z) {
            return (x+y+z);
          }
          

          要使用它,則需要編寫以下代碼:


          清單 5. 應用匿名函數
          				
          var sum = function(x,y,z) {
            return (x+y+z);
          }(1,2,3);
          alert(sum);
          

          使用函數作為值

          也可以將函數作為值使用。還可以擁有一些所賦值是函數的變量。在最后一個示例中,還可以執行以下操作:
          清單 6. 使用函數賦值

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

          在上面 清單 6 的示例中,為變量 sum 賦的值是函數定義本身。這樣,sum 就成了一個函數,可以在任何地方調用。

          調用函數的不同方法

          JavaScript 允許用兩種方式調用函數,如清單 78 所示。


          清單 7. 典型的函數應用
          				
          alert (“Hello, World!");
          


          清單 8. 用函數作為表達式
          				
          (alert) (“Hello, World!");
          

          所以也可以編寫以下代碼:


          清單 9. 定義函數之后就可以立即使用它
          ( function(x,y,z) { return (x+y+z) } ) (1, 2, 3);
          

          可以在括號中編寫函數表達式,然后傳遞給參數,對參數進行運算。雖然在 清單 8 的示例中,有直接包含在括號中的函數名稱,但是按 清單 9 中所示方式使用它時,就不是這樣了。

          將函數作為參數傳遞給其他函數

          也可以將函數作為參數傳遞給其他函數。雖然這不是什么新概念,但是在后續的示例中大量的使用了這個概念??梢詡鬟f函數參數,如 清單 10 所示。


          清單 10. 將函數作為參數傳遞,并應用該函數
          				
          var passFunAndApply = function (fn,x,y,z) { return fn(x,y,z); };
          
          var sum = function(x,y,z) {
            return x+y+z;
          };
          
          alert( passFunAndApply(sum,3,4,5) ); // 12
          

          執行最后一個 alert 語句輸出了一個大小為 12 的值。

          使用函數式概念

          前一節介紹了一些使用函數式風格的編程概念。所給的示例并沒有包含所有的概念,它們在重要性方面也沒有先后順序,只是一些與這個討論有關的概念而已。下面對 JavaScript 中的函數式風格作一快速總結:

          • 函數并不總是需要名稱。
          • 函數可以像其他值一樣分配給變量。
          • 函數表達式可以編寫并放在括號中,留待以后應用。
          • 函數可以作為參數傳遞給其他函數。

          這一節將介紹一些有效使用這些概念編寫優美的 JavaScript 代碼的示例。(使用 JavaScript 函數式風格,可以做許多超出這個討論范圍的事。)

          擴展數組排序
          先來編寫一個排序方法,可以根據數組元素的日期對數據進行排序。用 JavaScript 編寫這個方法非常簡單。數據對象的排序方法接受一個可選參數,這個可選參數就是比較函數。在這里,需要使用 清單 11 中的比較函數。


          清單 11. 比較函數

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

          要得到需要的函數,請使用 清單 12 的示例。


          清單 12. 排序函數的擴展
          arr.sort( function (x,y) {	return x.date – y.date; } );
          

          其中 arr 是類型數組對象。排序函數會根據 arr 數組中對象的日期對所有對象進行排序。比較函數和它的定義一起被傳遞給排序函數,以完成排序操作。使用這個函數:

          • 每個 JavaScript 對象都有一個 date 屬性。
          • JavaScript 的數組類型的排序函數接受可選參數,可選參數是用來排序的比較函數。這與 C 庫中的 qsort 函數類似。

          動態生成 HTML 的優美代碼
          在這個示例中,將看到如何編寫優美的代碼,從數組動態地生成 HTML。可以根據從數據中得到的值生成表格?;蛘?,也可以用數組的內容生成排序和未排序的列表。也可以生成垂直或水平的菜單項目。

          清單 13 中的代碼風格通常被用來從數組生成動態 HTML。


          清單 13. 生成動態 HTML 的普通代碼
          var str=' ';
          for (var i=0;i<arr.length;i++) {
            var element=arr[i];
            str+=... HTML generation code...
          }
          document.write(str);
          

          可以用 清單 14 的代碼替換這個代碼。


          清單 14. 生成動態 HTML 的通用方式
          						
          Array.prototype.fold=function(templateFn) {
            var len=this.length;
            var str=' ';
            for (var i=0 ; i<len ; i++) 
          	str+=templateFn(this[i]);
            return str;
          }
          
          function templateInstance(element) {
            return ... HTML generation code ...
          }
          
          document.write(arr.fold(templateInstance));
          

          我使用 Array 類型的 prototype 屬性定義新函數 fold?,F在可以在后面定義的任何數組中使用該函數。

          系列函數的應用
          考慮以下這種情況:想用一組函數作為回調函數。為實現這一目的,將使用 window.setTimeout 函數,該函數有兩個參數。第一個參數是在第二個參數表示的毫秒數之后被調用的函數。清單 15 顯示了完成此操作的一種方法。
          清單 15. 在回調中調用一組函數
          window.setTimeout(function(){alert(‘First!’);alert(‘Second!’);}, 5000);
          

          清單 16 顯示了完成此操作的更好的方式。


          清單 16. 調用系列函數的更好的方式
          Function.prototype.sequence=function(g) {
            var f=this;
            return function() {
              f();g();
            }
          };
          function alertFrst() { alert(‘First!’); }
          function alertSec() { alert(‘Second!’); }
          setTimeout( alertFrst.sequence(alertSec), 5000);
          

          在處理事件時,如果想在調用完一個回調之后再調用一個回調,也可以使用 清單 16 中的代碼擴展。這可能是一個需要您自行完成的一個練習,現在您的興趣被點燃了吧。






          結束語

          在許多領域中都可以應用 JavaScript 中的函數式編程,以優美的方式完成日?;顒?。這篇文章中的示例只介紹了幾種情況。如果您找到了函數式編程的合適場景,并應用這些概念,那么您就會有更多的理解,并且可以增加您的優美程度。







          參考資料

          學習

          獲得產品和技術

          討論






          關于作者

          Shantanu Bhattacharya 曾為各類應用程序軟件大量設計和創建架構,這些軟件中包括零售、系統集成、衛生保健軟件;基于 SNMP 和 TCP/IP 堆棧的網絡軟件;安全軟件;印度第一臺超級計算機的文件系統;印度導彈項目的實時軟件。目前他是一名首席架構師,在西門子位于 Bangalore 的分部從事衛生保健方面的工作。

          posted on 2006-07-24 00:58 emu 閱讀(2007) 評論(5)  編輯  收藏

          評論

          # re: 用函數式編程技術編寫優美的 JavaScript 2006-07-24 01:23 emu
          有時我們也利用臨時函數調用來制造調用堆棧,以此臨時保護數據:

          for(var i=1;i<4;i++) (function(i){setTimeout(function(){alert(i)},100)})(i);

          剛開始看到這樣的代碼的難免有點暈……  回復  更多評論
            

          # re: 用函數式編程技術編寫優美的 JavaScript 2006-07-25 18:47 IBM
          上面這段代碼我認為比較重要
          特別是在有閉包的情況下
          閉包的循環里邊的inline function并不能直接獲得循環變量的值
          但是例如 (function(argument)){//do sth...}(xxx)是可以傳進去的。
          而且在事件處理模型的應用上,上面的方法也比較奏效。
          看起來很膚淺的回復,hoho。具體原理可以看看
          http://www.javascriptsearch.com/guides/Advanced/articles/0607JSclosures.html
          或者
          http://www.svendtofte.com/code/practical_functional_js/
          我是菜鳥,來貢獻一點小小的經驗  回復  更多評論
            

          # 周思博有篇文章有點意思 2006-08-07 17:39 farmer
          http://www.joelonsoftware.com/items/2006/08/01.html
          Can Your Programming Language Do This?  回復  更多評論
            

          # re: 用函數式編程技術編寫優美的 JavaScript 2006-08-08 09:35 emu
          感謝farmer推薦這篇文章。這篇文章最有意思的地方不是關于函數式編程(那些都是入門基本功了),而是一個漂亮的用函數式編程語言實現map/reduce模式的javascript示范,真經典!  回復  更多評論
            

          # re: 用函數式編程技術編寫優美的 JavaScript 2006-08-08 09:46 emu
          將函數或者函數指針當成對象或者數據來靈活運用,除了在map/reduce這樣的模式下可以用,我們在用command模式開發的時候也很有用,在做ajax開發的時候也用這樣的手段來設計異步調用的回調隊列。  回復  更多評論
            


          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 防城港市| 墨脱县| 理塘县| 来安县| 盘锦市| 阜南县| 禹州市| 东至县| 济南市| 赣榆县| 平顺县| 固原市| 扶绥县| 依安县| 红桥区| 龙门县| 宁乡县| 内丘县| 扶绥县| 收藏| 柘城县| 三都| 辰溪县| 文化| 杨浦区| 扎囊县| 海伦市| 金乡县| 黔南| 鄂托克旗| 若羌县| 岫岩| 库伦旗| 集贤县| 天长市| 兴安盟| 临安市| 曲阳县| 积石山| 江津市| 利津县|