JavaScript匿名函数

Question

本周末我在网上看了以下内容，我想知道大多数人是否认为这是正确的（更好的）做事方式。

这不是最好的（正确的）做事方式：

$(document).ready(function() {
    $('#magic').click(function(e) {
        $('#yayeffects').slideUp(function() {
            // ...
        });
    });

    $('#happiness').load(url + ' #unicorns', function() {
        // ...
    });
});

这更好：

var PI = {
    onReady : function() {
        $('#magic').click(PI.candyMtn);
        $('#happiness').load(PI.url + ' #unicorns', PI.unicornCb);
    },
    candyMtn : function(e) {
        $('#yayeffects').slideUp(PI.slideCb);
    },
    slideCb : function() { ... },
    unicornCb : function() { ... }
};

$(document).ready(PI.onReady);

一个人的表现比下一个好吗？更容易调试？

思考？评论

Answer 1

如果你有一个包含大量匿名函数的堆栈跟踪，那么需要花费更多的时间来找出错误确实发生的位置以及调用它的位置。所以加1秒。

事件处理程序中的代码通常与处理程序注册的代码无关，因此应该位于单独的函数/模块中。加1秒。

对于侦听器使用匿名函数也很糟糕，因为如果您必须删除此侦听器（大多数人不关心），您只能删除它们而您不必担心意外删除其他侦听器部分代码。加上第二个。

将相关功能放入单个对象不一定是最好的。如果你将侦听器的行为用于不同的dom对象，那么onReady函数通常很糟糕。

不关心表现。通常不会调用一个通常很重要的监听器。如果确实如此，那么其他地方很可能存在问题。

Answer 2

第二个变体是可重用的 - 您可以将slideCb和其他处理程序重用于其他控件的其他事件。