快捷導(dǎo)航

JavaScript學(xué)習(xí)筆記之惰性函數(shù)示例詳解

更新時(shí)間：2017年08月27日 09:09:15 作者：冴羽

函數(shù)是js世界的一等公民，js的動(dòng)態(tài)性、易變性在函數(shù)的應(yīng)用上，體現(xiàn)的淋漓盡致。下面這篇文章主要給大家介紹了關(guān)于JavaScript學(xué)習(xí)筆記之惰性函數(shù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。

前言

本文主要給大家介紹了關(guān)于JavaScript惰性函數(shù)的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧。

需求

我們現(xiàn)在需要寫(xiě)一個(gè) foo 函數(shù)，這個(gè)函數(shù)返回首次調(diào)用時(shí)的 Date 對(duì)象，注意是首次。

解決一：普通方法

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

問(wèn)題有兩個(gè)，一是污染了全局變量，二是每次調(diào)用 foo 的時(shí)候都需要進(jìn)行一次判斷。

解決二：閉包

我們很容易想到用閉包避免污染全局變量。

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

然而還是沒(méi)有解決調(diào)用時(shí)都必須進(jìn)行一次判斷的問(wèn)題。

解決三：函數(shù)對(duì)象

函數(shù)也是一種對(duì)象，利用這個(gè)特性，我們也可以解決這個(gè)問(wèn)題。

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

依舊沒(méi)有解決調(diào)用時(shí)都必須進(jìn)行一次判斷的問(wèn)題。

解決四：惰性函數(shù)

不錯(cuò)，惰性函數(shù)就是解決每次都要進(jìn)行判斷的這個(gè)問(wèn)題，解決原理很簡(jiǎn)單，重寫(xiě)函數(shù)。

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

更多應(yīng)用

DOM 事件添加中，為了兼容現(xiàn)代瀏覽器和 IE 瀏覽器，我們需要對(duì)瀏覽器環(huán)境進(jìn)行一次判斷：

// 簡(jiǎn)化寫(xiě)法
function addEvent (type, el, fn) {
 if (window.addEventListener) {
 el.addEventListener(type, fn, false);
 }
 else if(window.attachEvent){
 el.attachEvent('on' + type, fn);
 }
}

問(wèn)題在于我們每當(dāng)使用一次 addEvent 時(shí)都會(huì)進(jìn)行一次判斷。

利用惰性函數(shù)，我們可以這樣做：

function addEvent (type, el, fn) {
 if (window.addEventListener) {
 addEvent = function (type, el, fn) {
  el.addEventListener(type, fn, false);
 }
 }
 else if(window.attachEvent){
 addEvent = function (type, el, fn) {
  el.attachEvent('on' + type, fn);
 }
 }
}

當(dāng)然我們也可以使用閉包的形式：

var addEvent = (function(){
 if (window.addEventListener) {
 return function (type, el, fn) {
  el.addEventListener(type, fn, false);
 }
 }
 else if(window.attachEvent){
 return function (type, el, fn) {
  el.attachEvent('on' + type, fn);
 }
 }
})();

當(dāng)我們每次都需要進(jìn)行條件判斷，其實(shí)只需要判斷一次，接下來(lái)的使用方式都不會(huì)發(fā)生改變的時(shí)候，想想是否可以考慮使用惰性函數(shù)。

重要參考

Lazy Function Definition Pattern

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: