綁定匿名函數到處都是

我通常會編寫看起來像這樣的代碼（但有更多的處理程序）。綁定匿名函數到處都是

$(document).ready(function() { 

    $("#next").click(function() { 
     doStuff(); 
    }); 

    $("#prev").click(function() { 
     doSomeOtherStuff(); 
    }); 

    $("#link").hover(function() { 
     doSomeTotallyOtherStuff(); 
    }); 
});

這是做這件事的最好方法嗎？我應該以不同的方式做嗎？ Paul Irish's presentation暗示這是一個壞主意。真的嗎？

來源

2010-08-05 Rich Bradshaw

'$（「＃next」）。click（doStuff）;'？ – kennytm 2010-08-05 13:47:15

嗯，是的，儘管在一天結束時也是如此！我寫了這樣的預期，我可能會改變爲命名函數。 – 2010-08-05 14:01:34

在壓縮方面或堆棧軌跡方面，它確實不盡相同。 'doStuff'會被壓縮成類似'ab'的東西，而'function（）{doStuff（）}'會被壓縮成類似'function（）{ab（）}'的東西。就棧跡而言，你用匿名函數混淆了水域。 – 2010-08-05 14:17:00

我們喜歡使用對象字面模式和命名函數。我會重寫你的例子：

$(function() { 
    Example.somegrouping.init(); 
}); 

var Example.somegrouping = { 
    init: function() { 
    // set up listeners 
    $("#next").click(this.onNextClick); 
    $("#prev").click(this.onPrevClick); 
    $("#link").hover(this.onLinkHover); 
    }, 
    onNextClick: function() { 
    // do some stuff 
    }, 
    onPrevClick: function() { 
    // do some stuff 
    }, 
    onLinkHover: function() { 
    // do some stuff 
    }  
};

爲什麼？那麼，它可以更輕鬆地在其他地方重用事件處理程序，而無需使用觸發器。該函數的命名可以幫助您自行記錄您的代碼。測試/調試更容易。對象字面量僅將一個條目添加到全局名稱空間，因此幾乎沒有機會與您的頁面可能使用的其他腳本發生衝突。

來源

2010-10-23 11:16:31 ScottE

這正是我最終寫的東西，會有興趣聽到是否有任何與它的混亂。 – 2010-10-23 15:06:06

@Rich - 對我們很好。代碼可重用性也更高。它鼓勵更多的模塊化編程。 – ScottE 2010-10-23 17:20:26

這應該沒問題，只要不在循環或其他運行多次的其他代碼（即循環函數調用）中執行。否則，一個anon函數和一個命名函數之間沒有太大的區別。當你有100個相同的匿名函數時，這是一個問題。

例如：

$("#someID").click(function(){})

是好的，

for (var i in somelistofIDs) { 
    $(i).click(function(){}) 
}

不是，因爲你已經創建了100個匿名函數，而不是一個命名的功能。

編輯

當然

，如果你在一個封閉包裝一個函數調用，你這樣做是不對的，你可以通過函數本身。

來源

2010-08-05 13:52:39 cthom06

是的，閉包有很多的線條，而不僅僅是一個 – 2010-08-05 14:02:06

你的'for'例子是關於閉包如何綁定外部變量的一個小小的風險b/c，但只要你小心並且知道你是什麼我沒有看到問題 – 2010-08-05 14:05:38

@加貝問題是你創建了100個函數的實例，而不僅僅是1 – cthom06 2010-08-05 14:08:43

定義你的函數很有用的一個原因是，你可以使用舊的無聊方式來獲取堆棧跟蹤中的名稱。

$(function() { 
    function nextClickHandler() { ... }; 

    $('#next-button').click(nextClickHandler); 
});

這不是安全的功能表達使用功能名稱：

$('#next-button').click(function nextClickHandler() { // DO NOT DO THIS 
    });

這是排序的不幸，但你去。

來源

2010-08-05 14:05:23 Pointy

綁定匿名函數到處都是

回答

相關問題