Alex Rivera | Logout

How to handle or minimize tight coupling in jquery

Asked 2011-07-25T18:22:56.807
11

Description

By design most jquery code leads to a lot of tight coupling, e.g. selectors assume a specific structure of html

var mySubnav = $("#navigation a.sub-menu");

If the corresponding html changes, for whatever reasons, 

<a class="subMenu" .... </a>

functionality is broken.

Question

  • What's the best way to handle tight coupling?
  • What approaches exist to loosen it up?

Answers, Approaches

  • use the html custom data attribute to separate css from js logic. e.g. add data-submenu="true" on the html and use var mySubnav = $("[data-submenu]"); on the js side.
  • implement a solid testing environment
  • couple as loose as possible, by using the least specific selectors, e.g. $("a.sub-menu'). See also
  • Eliminate the actual string literals that represent CSS selectors from the body of your jQuery code by (1) retrieving references to static DOM elements beforehand, and (2) storing selector strings in one place (at the top of your code).
  • use javascript frameworks, like Backbone, which decouple javascript from the DOM via views
  • use delegate and live regarding coupling due to event management
javascript jquery coding-style decoupling
Edit
Report

2 Answers

3

One option is to use a Javascript framework, like Backbone. It gives you the concept of views which help decouple your Javascript from the DOM structure. For example, you can create the Comment view, which you assign to the following div:

<div class="comment">
    <span class="title"></span>
    <p class="body"></p>
</div>

And then you can access elements in the view relative to the comment div:

var title = this.$(".title");

This makes it easy to change the DOM structure outside of the comment div as long as the internals of the comment div remain the same.

answered 2011-07-25T18:36:51.727
2

Use Custom prefixed classes for UI hooks ui-specificGuy

Provided HTML

<div class="container grid8">
    <ul class="ul1 horizontal">
        <li>List Item 1</li>
        <li>List Item 2</li>
    </ul>
</div>

Bad - using style purposed classes/hooks

$('.container.grid8').stuff();
$('.ul1.horizontal').moreStuff();

Adjusting the HTML

<div class="container grid8 ui-specificContainer">
    <ul class="ul1 horizontal ui-specificList">
        <li>List Item 1</li>
        <li>List Item 2</li>
    </ul>
</div>

Good - using your own purposed classes/hooks

$('.ui-specificContainer').stuff();
$('.ui-specificList').moreStuff();

Only be as specific as neccessary

If this will accomplish your goal.

$('.ui-targetedElement')

Then why have a selector that looks like this?

$('ul > li a.ui-targetedElement')

This simply introduces unnecessary DOM structure dependencies into the functionality you are building, and you should be able to be proactive in this regard because you should be providing your own hooks (prefixed classes) at this point right?

Ultimately though I would say that tight coupling between the DOM and the script are sometimes unavoidable because of the nature of how they work together.

Full Article

answered 2011-07-25T18:28:59.490

Your Answer