Javascript 将行为无条件地绑定到文档中是否不好?

Javascript 将行为无条件地绑定到文档中是否不好?,javascript,jquery,performance,Javascript,Jquery,Performance,我正在处理的页面上的分页控件被有条件地绑定到多个页面上。我不喜欢在我的项目中看到以下代码 if (pages > 1) { $('.some_class').bind('event', function() {}); } 因为我觉得它代表了一种无序的编码风格。我会把它放在与四处喷洒return语句相同的级别上,而不是使用控件。我觉得将事件绑定到全局可用对象在函数调用的局部范围内没有位置。所以我通常做的是创建两个javascript文件,例如:pagination.js和paginat

我正在处理的页面上的分页控件被有条件地绑定到多个页面上。我不喜欢在我的项目中看到以下代码

if (pages > 1) {
  $('.some_class').bind('event', function() {});
}
因为我觉得它代表了一种无序的编码风格。我会把它放在与四处喷洒
return
语句相同的级别上,而不是使用控件。我觉得将事件绑定到全局可用对象在函数调用的局部范围内没有位置。所以我通常做的是创建两个javascript文件,例如:
pagination.js
pagination controls.js
。在其中,我有关于构建html和显示分页控件的逻辑。在另一个例子中,我有如下陈述:

$(document).on('click','.pagination.next',function(){})

无论页面上的任何位置是否存在
$('.pagination.next')
元素,都会激发该属性。我喜欢这种感觉:网站有行为,它只知道ID和类,而不知道某些局部范围内的实例变量

编辑:这绝对是不好的做法,如下所述。然而:

从jQuery1.7开始,.on()方法是 将事件处理程序附加到文档

关于事件的讨论是相关的。我特别认为以下内容描述了我的用法:

通过选择一个元素,该元素保证在 已附加委派事件处理程序,您可以使用委派事件 避免频繁附加和删除事件处理程序。这 元素可以是视图中的容器元素 例如,模型视图控制器设计,或记录事件 处理程序希望监视文档中的所有冒泡事件


编辑:所以我想现在我想知道“比起基于逻辑的绑定,无条件地更喜欢绑定行为而不是父元素是不是不好?”这可能只是一个风格问题,我原来的问题已经得到了回答,所以我想我会接受答案。

是的,这会导致不必要的大量开销,这是一个问题“坏习惯”

将事件处理绑定到顶级文档对象意味着在页面中任何位置的任何元素上发生的每一次单击都将冒泡到
文档
对象,在该对象中,将检查事件的目标是否匹配
.pagination.next

事实上,文档本身建议您不要使用:

在文档树顶部附近附加许多委托事件处理程序可能会降低性能。每次事件发生时,jQuery必须将该类型所有附加事件的所有选择器与从事件目标到文档顶部的路径中的每个元素进行比较。要获得最佳性能,请在文档位置附加委托事件n尽可能靠近目标元素。避免在大型文档上过度使用document或document.body进行委托事件。


因此,您在
上误用了
。它用于直接绑定到元素或可能动态创建了子元素的父元素,您需要绑定到最接近的父元素。绑定到文档肯定不是处理页面中事件的唯一方法。

我认为这是浪费,除非如果你有+1个页面,那么无论如何你都会绑定事件,这意味着,在设计应用程序时,你必须针对这种情况进行规划。从这个角度看,我不确定这是否真的是浪费。我会把它看作是在桌面应用程序被使用之前为其保留了一大块内存。好吧,这样看。每次点击事件都会发生页面上的PPEN将被该事件捕获,并根据选择器测试event.target是否匹配。如果使用第一个,则不会在应用程序中的每次单击都添加额外的处理。选择一个JS框架并使用它。jQuery自然会在virtua上与UI相关的代码中陷入混乱在所有级别上,现在都有一些非常好的框架,可以为您解开这个问题,并为分离关注点提供可靠的约定。我最初不知道您将它们绑定到顶级文档。我想我应该先阅读整个问题。我想这真的取决于您有多少这样的事件,以及是否有是这样的一个机会,它们可以在不刷新页面的情况下开始被利用。(也称为动态构建一些新的DOM元素,这将成为目标)是的,我想它说的是“避免在大型文档上过度使用document或document.body来代理事件。“就在文档中。@Ziggy谢谢,是的,正在更新我的答案。如果我将事件绑定到包装分页控件的
div
元素,我认为这会更合理。@Ziggy你真的不应该在
上使用
。它允许为DOM中尚不存在的元素绑定事件;如果您的DOM是静态的,那么您绝对应该只使用
$('.some_class')。bind…
。正确:当我说“不喜欢看到”时,我的意思是,“不要认为是有组织的”。在我看来,在一个长函数的中间,与<代码>返回< /Cord>语句的严重程度相同。另一方面,
$('.pagination controls')。在('click',function(){})上可能更合理?[在阅读上述评论之前,我写了这篇评论]