Edit Question - KnowledgeHub

Title Body

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

Tags (comma-separated) Cancel