|
方法四：惰性函數(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)用并提供返回值。
接下來的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)地說，術(shù)語“保證” 來自于Scheme的惰性求值機(jī)制（lazy evaluation mechanism）。每一位JavaScript程序員真的都應(yīng)該 學(xué)習(xí)Scheme ，因?yàn)樗泻芏嗪瘮?shù)式編程相關(guān)的東西，而這些東西會(huì)出現(xiàn)在JavaScript中。
確定頁面滾動(dòng)距離
編寫跨瀏覽器的JavaScript, 經(jīng)常會(huì)把不同的瀏覽器特定的算法包裹在一個(gè)獨(dú)立的JavaScript函數(shù)中。這就可以通過隱藏瀏覽器差異來標(biāo)準(zhǔn)化瀏覽器API，并讓構(gòu)建和維護(hù)復(fù)雜的頁面特性的JavaScript更容易。當(dāng)包裹函數(shù)被調(diào)用，就會(huì)執(zhí)行恰當(dāng)?shù)臑g覽器特定的算法。
在拖放庫中，經(jīng)常需要使用由鼠標(biāo)事件提供的光標(biāo)位置信息。鼠標(biāo)事件給予的光標(biāo)坐標(biāo)相對(duì)于瀏覽器窗口而不是頁面。加上頁面滾動(dòng)距離鼠標(biāo)的窗口坐標(biāo)的距離即可得到鼠標(biāo)相對(duì)于頁面的坐標(biāo)。所以我們需要一個(gè)反饋頁面滾動(dòng)的函數(shù)。演示起見，這個(gè)例子定義了一個(gè)函數(shù)getScrollY。因?yàn)橥戏艓煸谕献陂g會(huì)持續(xù)運(yùn)行，我們的getScrollY必須盡可能高效。
不過卻有四種不同的瀏覽器特定的頁面滾動(dòng)反饋算法。Richard Cornford在他的feature detection article 文章中提到這些算法。最大的陷阱在于這四種頁面滾動(dòng)反饋算法其中之一使用了 document.body. JavaScript庫通常會(huì)在HTML文檔的<head>加載，與此同時(shí)docment.body并不存在。所以在庫載入的時(shí)候，我們并不能使用特性檢查（feature detection）來確定使用哪種算法。
考慮到這些問題，大部分JavaScript庫會(huì)選擇以下兩種方法中的一種。第一個(gè)選擇是使用瀏覽器嗅探navigator.userAgent，為該瀏覽器創(chuàng)建高效、簡(jiǎn)潔的getScrollY. 第二個(gè)更好些的選擇是getScrollY在每一次調(diào)用時(shí)都使用特性檢查來決定合適的算法。但是第二個(gè)選擇并不高效。
好消息是拖放庫中的getScrollY只會(huì)在用戶與頁面的元素交互時(shí)才會(huì)用到。如果元素業(yè)已出現(xiàn)在頁面中，那么document.body也會(huì)同時(shí)存在。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();
}
出處：Realazy
責(zé)任編輯：moby
上一頁 惰性函數(shù)定義模式 [1] 下一頁 惰性函數(shù)定義模式 [3]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 2 頁 惰性函數(shù)定義模式 [2]
