Book Image

jQuery Design Patterns

By : Thodoris Greasidis
Book Image

jQuery Design Patterns

By: Thodoris Greasidis

Overview of this book

jQuery is a feature-rich JavaScript library that makes HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a variety of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. jQuery solves the problems of DOM manipulation, event detection, AJAX calls, element selection and document queries, element attribute and data management, as well as object management utilities. This book addresses these problems and shows you how to make the best of jQuery through the various design patterns available. The book starts off with a refresher to jQuery and will then take you through the different design patterns such as facade, observer, publisher/subscriber, and so on. We will also go into client-side templating techniques and libraries, as well as some plugin development patterns. Finally, we will look into some best practices that you can use to make the best of jQuery.
Table of Contents (18 chapters)
jQuery Design Patterns
About the Author
About the Reviewer

Using Mock Objects in jQuery applications

In order to demonstrate how the Mock Object Pattern can be used during the development of a multi-part application, we will extend the dashboard example, as we saw in Chapter 4, Divide and Conquer with the Module Pattern, in order to present thumbnails of YouTube videos from web developing conferences. The video references are grouped into four predefined categories and the related buttons will be displayed based on the current category selection, as illustrated below:

The changes that need to be introduced to the HTML and the CSS are minimal. The only extra CSS that is needed for the above implementation, when compared to the existing implementation from Chapter 4, Divide and Conquer with the Module Pattern, is related to the width of the thumbnails:

.box img { 
  width: 100%; 

The change in the HTML is intended to organize the <button> elements of each category. This change will make our implementation more straightforward since the categories...