惰性函數(shù)定義模式使用方法第2/3頁

更新時間：2007年09月20日 19:55:43 作者：

方法四：惰性函數(shù)定義
現(xiàn)在，這是你閱讀這篇文章的理由：

var foo = function() {  
    var t = new Date();  
    foo = function() {  
        return t;  
    };  
    return foo();  
}; 

當foo首次調(diào)用，我們實例化一個新的Date對象并重置 foo到一個新的函數(shù)上，它在其閉包內(nèi)包含Date對象。在首次調(diào)用結(jié)束之前，foo的新函數(shù)值也已調(diào)用并提供返回值。

接下來的foo調(diào)用都只會簡單地返回t保留在其閉包內(nèi)的值。這是非?？斓牟檎?，尤其是，如果之前那些例子的條件非常多和復雜的話，就會顯得很高效。

弄清這種模式的另一種途徑是，外圍（outer）函數(shù)對foo的首次調(diào)用是一個保證（promise）。它保證了首次調(diào)用會重定義foo為一個非常有用的函數(shù)。籠統(tǒng)地說，術語“保證” 來自于Scheme的惰性求值機制（lazy evaluation mechanism）。每一位JavaScript程序員真的都應該學習Scheme ，因為它有很多函數(shù)式編程相關的東西，而這些東西會出現(xiàn)在JavaScript中。

確定頁面滾動距離

編寫跨瀏覽器的JavaScript, 經(jīng)常會把不同的瀏覽器特定的算法包裹在一個獨立的JavaScript函數(shù)中。這就可以通過隱藏瀏覽器差異來標準化瀏覽器API，并讓構建和維護復雜的頁面特性的JavaScript更容易。當包裹函數(shù)被調(diào)用，就會執(zhí)行恰當?shù)臑g覽器特定的算法。

在拖放庫中，經(jīng)常需要使用由鼠標事件提供的光標位置信息。鼠標事件給予的光標坐標相對于瀏覽器窗口而不是頁面。加上頁面滾動距離鼠標的窗口坐標的距離即可得到鼠標相對于頁面的坐標。所以我們需要一個反饋頁面滾動的函數(shù)。演示起見，這個例子定義了一個函數(shù)getScrollY。因為拖放庫在拖拽期間會持續(xù)運行，我們的getScrollY必須盡可能高效。

不過卻有四種不同的瀏覽器特定的頁面滾動反饋算法。Richard Cornford在他的feature detection article 文章中提到這些算法。最大的陷阱在于這四種頁面滾動反饋算法其中之一使用了 document.body. JavaScript庫通常會在HTML文檔的<head>加載，與此同時docment.body并不存在。所以在庫載入的時候，我們并不能使用特性檢查（feature detection）來確定使用哪種算法。

考慮到這些問題，大部分JavaScript庫會選擇以下兩種方法中的一種。第一個選擇是使用瀏覽器嗅探navigator.userAgent，為該瀏覽器創(chuàng)建高效、簡潔的getScrollY. 第二個更好些的選擇是getScrollY在每一次調(diào)用時都使用特性檢查來決定合適的算法。但是第二個選擇并不高效。

好消息是拖放庫中的getScrollY只會在用戶與頁面的元素交互時才會用到。如果元素業(yè)已出現(xiàn)在頁面中，那么document.body也會同時存在。getScrollY的首次調(diào)用，我們可以使用惰性函數(shù)定義模式結(jié)合特性檢查來創(chuàng)建高效的getScrollY.

復制代碼代碼如下:

var getScrollY = function() {  

    if (typeof window.pageYOffset == 'number') {  
        getScrollY = function() {  
            return window.pageYOffset;  
        };  

    } else if ((typeof document.compatMode == 'string') &&  
               (document.compatMode.indexOf('CSS') >= 0) &&  
               (document.documentElement) &&  
               (typeof document.documentElement.scrollTop == 'number')) {  
        getScrollY = function() {  
            return document.documentElement.scrollTop;  
        };  

    } else if ((document.body) &&  
               (typeof document.body.scrollTop == 'number')) {  
      getScrollY = function() {  
          return document.body.scrollTop;  
      }  

    } else {  
      getScrollY = function() {  
          return NaN;  
      };  

    }  

    return getScrollY();  
} 