快捷導(dǎo)航

惰性函數(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();  
}; 

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

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

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

確定頁面滾動距離

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

在拖放庫中，經(jīng)常需要使用由鼠標(biāo)事件提供的光標(biāo)位置信息。鼠標(biāo)事件給予的光標(biāo)坐標(biāo)相對于瀏覽器窗口而不是頁面。加上頁面滾動距離鼠標(biāo)的窗口坐標(biāo)的距離即可得到鼠標(biāo)相對于頁面的坐標(biāo)。所以我們需要一個反饋頁面滾動的函數(shù)。演示起見，這個例子定義了一個函數(shù)getScrollY。因?yàn)橥戏艓煸谕献陂g會持續(xù)運(yùn)行，我們的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.

復(fù)制代碼代碼如下:

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();  
} 