快捷導(dǎo)航

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

更新時(shí)間：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í)例化一個(gè)新的Date對(duì)象并重置 foo到一個(gè)新的函數(shù)上，它在其閉包內(nèi)包含Date對(duì)象。在首次調(diào)用結(jié)束之前，foo的新函數(shù)值也已調(diào)用并提供返回值。

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

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

確定頁(yè)面滾動(dòng)距離

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

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

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

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

好消息是拖放庫(kù)中的getScrollY只會(huì)在用戶與頁(yè)面的元素交互時(shí)才會(huì)用到。如果元素業(yè)已出現(xiàn)在頁(yè)面中，那么document.body也會(huì)同時(shí)存在。getScrollY的首次調(diào)用，我們可以使用惰性函數(shù)定義模式結(jié)合特性檢查來(lái)創(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();  
} 