将行为无条件地绑定到文档是否不好? [英] Is it bad to bind behaviours to document unconditionally?

问题描述

我正在处理的页面上的分页控件被有条件地绑定在一页以上的页面上.我不希望在我的项目中看到以下代码，

The pagination controls on a page I am working on were being bound conditionally on there being more than 1 page. I don't like to see the following code in my projects,

if (pages > 1) {
  $('.some_class').bind('event', function() {});
}

因为我觉得它代表了杂乱无章的编码风格.我会把它放在与在各处撒满return语句相同的级别，而不是使用控件.我觉得将事件绑定到全局可用对象在函数调用的本地范围中没有位置.因此，我通常要做的是制作两个javascript文件，例如:pagination.js和pagination-controls.js.在其中，我有关于构建html和显示分页控件的逻辑.在另一种中，我有类似以下的语句:

because I feel it represents a disorganized coding style. I would put it on the same level as sprinkling return statements here and there rather than using control. I feel like binding events to globally available objects has no place in the local scope of a function call. So what I usually do is make two javascript files, for example: pagination.js and pagination-controls.js. In the one I have logic about building the html and displaying the the pagination controls. In the other I have statements like the following:

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

无论页面上任何地方是否存在$('.pagination .next')元素，都会触发该事件.我喜欢这种感觉:网站具有行为，它只知道id和类，而不知道某个地方范围内某个地方的实例变量.

Which fires regardless of whether there is a $('.pagination .next') element anywhere on the page. I like the way that feels: the website has behaviours and it only knows about ids and classes, not about instance variables in some local scope somewhere.

这绝对是不好的做法，如下所述.但是:

this is definitely bad practice, as mentioned below. However:

从jQuery 1.7开始，.on()方法是首选 将事件处理程序附加到文档.

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.

与有关直接和委托事件的讨论相关.我特别认为以下内容描述了我的用法:

and the discussion on direct and delegated events is relevant. In particular I think the following describes my usage:

通过选择在 附加了委托事件处理程序，您可以使用委托事件来 避免需要频繁附加和删除事件处理程序.这 元素可以是视图中的容器元素 例如，模型-视图-控制器设计或事件记录 处理程序要监视文档中的所有冒泡事件.

By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document.

所以我现在想知道与基于逻辑的绑定相比，无条件地更喜欢无条件地绑定到父元素的行为是不好的吗?"也许这只是样式问题，我的原始问题已经回答，所以我认为我会接受答案.

So I guess now I'm wondering "is it bad to prefer binding behaviours to parent elements unconditionally over binding based on logic?" That's perhaps just a question of style, and my original question has been answered so I think I will accept the answer.

推荐答案

是的，这会导致大量不必要的开销，这是不道德的做法".

Yes, this is causing significant unnecessary overhead, and it is a "bad practice".

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

Binding your event handling to the top-level document object means that every single click that occurs on any element anywhere in your page will bubble up to the document object, where the event's target is checked to see if it matches .pagination .next.

实际上，文档本身建议您不要使用:

In fact, the documentation itself recommends against your usage:

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

因此，您误用了on.它用于直接绑定到可能已动态创建子元素的元素或父元素，并且您打算绑定到最接近的父元素.绑定到文档肯定不是您处理页面中事件的唯一方式.

So, you're misusing on. It's for binding directly to elements or to parent elements which may have dynamically created children, and you are meant to bind to the closest possible parent element. Binding to the document is certainly not meant to be the only way you handle events in your page.

这篇关于将行为无条件地绑定到文档是否不好?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！