10-讨论

8.2.3　讨论

event.data用于为函数提供预先计算的值，这意味着传递给bind()的值在绑定时必须已经可用。为了处理更加“动态”的值，可以使用秘诀8.5中将要学习的另一种方法。

前一个问题的解决方案如下：

function buttonClicked(e){
　　 jQuery('div.panel').hide();
　　 jQuery('#panel'+e.data.panel).show();
　　 jQuery('#desc').text('You clicked the '+e.data.color+' button');
}
jQuery('#button1').bind('click',{panel:1, color:'red'}, buttonClicked);
jQuery('#button2').bind('click',{panel:2, color:'blue'}, buttonClicked);
jQuery('#button3').bind('click',{panel:3, color:'green'}, buttonClicked);

当然，也可以使用循环使这段代码更短。这种方法被某些编码人员称作“宏”（Macro），对于jQuery代码来说很常见。

这些宏确实能够缩短代码长度，有时候能够改进代码的可读性。但在另一些情况下，它们也会使代码完全不可读，所以使用它们要小心。

下面是可以采用的做法：

jQuery.each(['red','blue','green'], function(num, color){
　　 num++; // it's 0-index based
　　 jQuery('#button'+num).bind('click',function(e){
　　　　　jQuery('div.panel').hide();
　　　　　jQuery('#panel'+num).show();
　　　　　jQuery('#desc').text('You clicked the '+color+' button');
　　 });
})

正如你所看到的，这里不使用数据参数，因为实际上没有必要。代码现在更加简短了，但是改进不大，而且它没有更好的可读性。

结论是，对这种情况来说，两种方法都可以使用。根据不同的问题，某种方法可能优于（更短、更好理解或者更容易维护）另一种方法。