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.

Related Content you might be interested in

Current Title:

Small book image
jQuery Design Patterns
Thodoris Greasidis
Feb, 2016 | 246 pages
No titles found
Table of Contents (18 chapters)
jQuery Design Patterns
jQuery Design Patterns
Credits
Credits
About the Author
About the Author
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
A Refresher on jQuery and the Composite Pattern
A Refresher on jQuery and the Composite Pattern
jQuery and DOM scripting
The Composite Pattern
The Iterator Pattern
Summary
2
The Observer Pattern
The Observer Pattern
Introducing the Observer Pattern
Introducing the Delegated Event Observer Pattern
Summary
3
The Publish/Subscribe Pattern
The Publish/Subscribe Pattern
Introducing the Publish/Subscribe Pattern
How it is adopted by jQuery
Demonstrating a sample use case
Using custom event namespacing
Summary
4
Divide and Conquer with the Module Pattern
Divide and Conquer with the Module Pattern
Modules and Namespaces
The Object Literal Pattern
The Module Pattern
The Revealing Module Pattern
Using ES5 Strict Mode
Introducing ES6 Modules
Using Modules in jQuery applications
Summary
5
The Facade Pattern
The Facade Pattern
Introducing the Facade Pattern
The benefits of this pattern
How it is adopted by jQuery
Using Facades in our applications
Summary
6
The Builder and Factory Patterns
The Builder and Factory Patterns
Introducing the Factory Pattern
Introducing the Builder Pattern
Summary
7
Asynchronous Control Flow Patterns
Asynchronous Control Flow Patterns
Programming with callbacks
Introducing the concept of Promises
Chaining Promises
Summary
8
Mock Object Pattern
Mock Object Pattern
Introducing the Mock Object Pattern
Using Mock Objects in jQuery applications
Summary
9
Client-side Templating
Client-side Templating
Introducing Underscore.js
Introducing Handlebars.js
Retrieving HTML templates asynchronously
Summary
10
Plugin and Widget Development Patterns
Plugin and Widget Development Patterns
Introducing jQuery Plugins
Creating reusable plugins
Using the jQuery Plugin Boilerplate
Choosing a name
Summary
11
Optimization Patterns
Optimization Patterns
Placing scripts near the end of the page
Bundling and minifying resources
Using CDNs
Optimizing common JavaScript code
Writing performant CSS selectors
Writing efficient jQuery code
Lazy Loading Modules
Summary
Index
Index

Writing performant CSS selectors

Even though Sizzle (jQuery's selector engine) hides the complexity of DOM traversals based on complex CSS selectors, we should have an idea of how our selectors are performing. Understanding how CSS selectors are matched against the elements of the DOM helps us write more efficient selectors which perform better when used with jQuery.

The key characteristic of efficient CSS selectors is specificity. According to this, ID and Class selectors are always more efficient than selectors with many results like div and *. When writing complex CSS selectors, keep in mind that they are evaluated from the right to the left and that a selector gets rejected after recursively testing it against every parent element until the root of the DOM.

As a result, try to be as specific as possible with the rightmost selector in order to cut down the matched elements as quickly as possible during the execution of the selector.

// initially matches all the anchors of the page 
// and...
Previous Section
End of Section 6
Next Section