Test Driven JavaScript Development- P11

Test Driven JavaScript Development- P11:This book is about programming JavaScript for the real world, using the techniquesand workflow suggested by Test-Driven Development. It is about gaining confidencein your code through test coverage, and gaining the ability to fearlessly refactor andorganically evolve your code base. It is about writing modular and testable code. Itis about writing JavaScript that works in a wide variety of environments and thatdoesn’t get in your user’s way.
Nội dung trích xuất từ tài liệu:
Test Driven JavaScript Development- P11 9.5 Unobtrusive Tabbed Panel Example 193 Listing 9.10 Using the tab controller (function () { if (typeof document == undefined || !document.getElementById) { return; } var dom = tddjs.dom; var ol = document.getElementById(news-tabs); /* ... */ try { var controller = tddjs.ui.tabController.create(ol); dom.addClassName(ol.parentNode, js-tabs); controller.onTabChange = function (curr, prev) { dom.removeClassName(getPanel(prev), active-panel); dom.addClassName(getPanel(curr), active-panel); }; controller.activateTab(ol.getElementsByTagName(a)[0]); } catch (e) {} }()); The getPanel function used in the above example uses the semantic markup to find which panel an anchor should toggle. It extracts the part of the anchor’s href attribute after the hash character, looks up elements with corresponding names, and finally picks the first one it finds. It then traverses the element’s parent until it finds a div element. The method can be seen in Listing 9.11. Listing 9.11 Finding the panel to toggle (function () { /* ... */ function getPanel(element) { if (!element || typeof element.href != string) { return null; } var target = element.href.replace(/.*#/, ); var panel = document.getElementsByName(target)[0];Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. From the Library of WoweBook.Com 194 Unobtrusive JavaScript while (panel && panel.tagName.toLowerCase() != div) { panel = panel.parentNode; } return panel; } /* ... */ }()); Note that getPanel defensively checks its argument and aborts if it doesn’t receive an actual element. This means that we can fearlessly call it using the curr and prev anchors in the onTabChange method, even though the prev argument will be undefined the first time it is called. To make the tabbed panels appear as panels, we can sprinkle on some very simple CSS, as seen in Listing 9.12. Listing 9.12 Simple tabbed panel CSS .js-tabs .section { clear: left; display: none; } .js-tabs .active-panel { display: block; } .js-tabs .nav { border-bottom: 1px solid #bbb; margin: 0 0 6px; overflow: visible; padding: 0; } .js-tabs .nav li { display: inline; list-style: none; } .js-tabs .nav a { background: #eee; border: 1px solid #bbb; line-height: 1.6;Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. From the Library of WoweBook.Com 9.5 Unobtrusive Tabbed Panel Example 195 padding: 3px 8px; } .js-tabs a.active-tab { background: #fff; border-bottom-color: #fff; color: #000; text-decoration: none; } All the style rules are prefixed with “.js-tabs”, which means that they will only take effect if the script in Listing 9.10 completes successfully. Thus, we have a nice tabbed panel in browsers that support it and fall back to inline bookmarks and vertically presented panels of text in unsupporting browsers. Implementation of the unobtrusive tabs might strike you as a bit verbose and it is not perfect. It is, however, a good start—something to build on. For instance, rather than coding the panel handling inline as we just did, we could create a tabbedPanel object to handle everything. Its create method could receive the outer div element as argument and set up a tabController and offer something like the getPanel function as a method. It could also improve the current solution in many ways, for example, by checking that the tabs do not activate panels outside the root element. By implementing the tabController separately, it can easily be used for similar, yet different cases. One such example could be building a tabbed panel widget in which the links referenced external URLs. The onTabChange callback could in this case be used to fetch the external pages using XMLHttpRequest. By design, this tabbed panel would fall back to a simple list of links just like the panel we just built. Because the original unobtrusive example used the jQuery library, we could of course have done so here as well. By using it where appropriate, we’d end up shaving off quite a few lines of code. However, although the script would end up shorter, it would come with an additional 23kB (minimum) of library code. The unobtrusive tab controller we just built weigh ...