绑定匿名函数到处都是

我通常会编写看起来像这样的代码（但有更多的处理程序）。绑定匿名函数到处都是

$(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

绑定匿名函数到处都是

回答

相关问题