Why it is worth using special classes for event binding
For some reason, for binding events, many js developers use classes inherited from typesetting. Many times I have encountered problems that arise with this method, problems associated with the support of such code, and now I would like to tell you more about it.
In my opinion there are 3 popular ways to hang an event on an item in the Duma:
What could be easier? I am sure many, at the first acquaintance with JS did so, but someone does now. The method, of course, has advantages. First of all, this is high speed, due to the fact that the elements with id are in the global window object and you don’t even need to look for them. Secondly, the elements are easy to find when debugging, both from a template and through hanging events.
For example, we have code
')
Agree, it is easy to find in # system-detail where the event is attached to this element. This is also true when we have js code, but we need to find a template.
Without the minuses, too, nowhere. If these elements are used in templates that are inserted several times on the page, we will get conflicts due to the ID match.
The essence of the method lies in the fact that we do not edit the template, but proceed from what is. For example, we have such a pattern.
Most likely the developer wrote something in the spirit of
In addition to the large number of selectors in the request, this command is very fragile. If we change the class of one of the elements or their location, everything will crumble. In addition, such requests are very difficult to debug.
How to find out where the event is hung on “Reinforce”! How are we going to look? In parts only that at random. We will search for one selector, then another, and so on until we find something similar, after which we will check whether it is or not. In case we need to duplicate the action on another element, we need to re-write the assignment (or add to the old selector separated by commas).
To modify such a request, you need to look at a bunch of templates, to be sure that it does not tie in to something similar, in case it is one file for the entire project.
But we pass the template to the coder to edit the color from red to blue, and what happens? Link no longer works.
Well only those who wrote it themselves can understand such a template, and then for a rather short time.
And here we come to the last point. To attach events, a special class is added, for example, js-new-message or app-open-window, which is not used to set styles, but is only needed to hang an event. Take the previous example and refine it.
The difference is obvious. The code does not depend on styles, if you want to duplicate an action, it is enough to assign the desired class to the right place. The search for both elements and code is easy in both directions. Support for this code takes a minimum of time. When using multiple templates on the same page, if the binding does not go to the global object, but to the root of the template, the code will work well. Yes, there may be conflicts, but they are easier to track down than in the second version.
In my opinion there are 3 popular ways to hang an event on an item in the Duma:
- Through ID
- Through what got from the layout
- Through special classes
1. Binding via ID
What could be easier? I am sure many, at the first acquaintance with JS did so, but someone does now. The method, of course, has advantages. First of all, this is high speed, due to the fact that the elements with id are in the global window object and you don’t even need to look for them. Secondly, the elements are easy to find when debugging, both from a template and through hanging events.
For example, we have code
')
<div class="main"> <p> . 3- 10. <a href="#" id="system-detail"></a> </p> </div> Agree, it is easy to find in # system-detail where the event is attached to this element. This is also true when we have js code, but we need to find a template.
Without the minuses, too, nowhere. If these elements are used in templates that are inserted several times on the page, we will get conflicts due to the ID match.
2. Binding through what got from the layout
The essence of the method lies in the fact that we do not edit the template, but proceed from what is. For example, we have such a pattern.
<div class="block_content"> <p class="left b_font red_font"><a href="#"> </a></p> <div class="left inline-block"> <p> ! . , . <a href="#"></a> <p class="hidden"> <span> - <a href="#"> </a></span> </p> </p> </div> </div> Most likely the developer wrote something in the spirit of
$('.block_content .inline-block a:first'); // $('.block_content .left.b_font.red_font'); // $('.block_content .inline-block a:last'); // In addition to the large number of selectors in the request, this command is very fragile. If we change the class of one of the elements or their location, everything will crumble. In addition, such requests are very difficult to debug.
How to find out where the event is hung on “Reinforce”! How are we going to look? In parts only that at random. We will search for one selector, then another, and so on until we find something similar, after which we will check whether it is or not. In case we need to duplicate the action on another element, we need to re-write the assignment (or add to the old selector separated by commas).
To modify such a request, you need to look at a bunch of templates, to be sure that it does not tie in to something similar, in case it is one file for the entire project.
But we pass the template to the coder to edit the color from red to blue, and what happens? Link no longer works.
Well only those who wrote it themselves can understand such a template, and then for a rather short time.
3. Binding through special classes
And here we come to the last point. To attach events, a special class is added, for example, js-new-message or app-open-window, which is not used to set styles, but is only needed to hang an event. Take the previous example and refine it.
<div class="block_content"> <p class="left b_font red_font"><a href="#" class="app-skip-advert"> </a></p> <div class="left inline-block"> <p> ! . , . <a href="#" class="app-modern"></a> <p class="hidden"> <span> - <a href="#" class="app-help-me"> </a></span> </p> </p> </div> </div> $('.app-skip-advert'); // $('.app-go-to-modern'); // $('.app-help-me'); // The difference is obvious. The code does not depend on styles, if you want to duplicate an action, it is enough to assign the desired class to the right place. The search for both elements and code is easy in both directions. Support for this code takes a minimum of time. When using multiple templates on the same page, if the binding does not go to the global object, but to the root of the template, the code will work well. Yes, there may be conflicts, but they are easier to track down than in the second version.
Source: https://habr.com/ru/post/203864/
All Articles