How is it more convenient to access HTML elements from JavaScript? What are some good practices at the moment? I would like the binding to follow a specific simple logic and have a structure that was similar in style to the PLO.

Let's take a simple task - on the page you need to find the button for adding goods to the basket and link a handler to it. When you click the button, you also need to get information about the product from the HTML - product id, some of its characteristics (name, color, size - to display the window "you added something to the cart").

I see several options (for example, the button for adding a product to the basket):

  • To use id $('#item-add-to-cart-button') , we also look for characteristics by id. Not very convenient, since for each element you have to invent (or generate) a unique ID, especially if there are several similar elements on the page ( $('#item-add-to-cart-button-1278') ?). ID is like global variables, it seems to me that using them is not a very good tone.
  • Use the html structure and the $('.item button.add-to-cart') class $('.item button.add-to-cart') , the characteristics are obtained as or through parent/closest/find - closer to the desired, allows you to bind to several elements of the same type, similar to OOP ( use item-> button-> add-to-cart logic). However, we depend on the html structure, and if the designer / layout designer changes something in css / html (replaces button with a or .add-to-cart with .add-to-cart-big ), the binding will stop working.
  • By data-attributes. There is a lot of room for experimentation, since you can attach to the name of the attribute, and its value, you can set several attributes to the element, its parents, descendants. But how to build a convenient structure for accessing elements through data- *? For example, you can like $(('[data-type="item"] [data-type='add-to-cart-button]')) (an element with data-type=add-to-cart-button inside the element with data-type=item ) or just $([data-js="item-add-to-cart-button"]) . The plus is that the layout designer will most likely be more attentive to such attributes, the second plus is unlimited flexibility, but this creates difficulties - you need to invent namespaces for the names / values ​​of data attributes that will be used when searching for elements through JS.

I would like to understand what the experience of developers has been gained in introducing javascript behavior to a page with minimal dependence on HTML structure and CSS styles (so that the designer / layout designer and js programmer do not interfere with each other). Are there any methodologies / patterns?

I searched Google for an answer to this question, but basically I’ve considered access speed by id / class / data- *, and I’m not interested in speed, but in the convenience of (team) development and good code organization.

Found several articles on data attributes:

But they are quite old, I think that since their publication a lot of practical experience has been gained. I ask community members to share it!

  • ru.bem.info/methodology - this is yuzat yandex and google - ixpl0
  • @iXplo thanks for the link! Could you write in more detail? How can this be used, for example, for an example with a basket in a question? - cronfy
  • 3
    @iXplo By the way, in which google project does BEM use? - cronfy
  • It will be like this: $('.selling-item__add-to-cart-button') . The following is pretty pointless when using this methodology: $('.selling-item .selling-item__add-to-cart-button') - ixpl0
  • one
    for the basket in general, except for the basket id, you do not need to go anywhere in html, everything should be taken from the data, and not from the markup Yes and id Not needed in principle - Grundy

0