jQuery Design Patterns

Book description

Learn the best practices on writing efficient jQuery applications to maximize performance in large-scale deployments

About This Book

  • Learn about the observer pattern and the deferred observer pattern, two of the most popular design patterns that handle custom events
  • Advance your jQuery skills by learning about patterns such as divide and conquer, facade, and builder and factory to handle complex results
  • This step-by-step guide to applying micro-patterns and optimizing jQuery applications will help you get the best performance in a production environment

Who This Book Is For

This step-by-step guide to applying micro-patterns and optimizing jQuery applications will help you get the best performance in a production environment

What You Will Learn

  • Respond to user actions
  • Achieve greater flexibility and code decoupling
  • Have a central point for emitting and receiving application level events
  • Structure the application into small independent modules
  • Structure the application into small independent modules
  • Isolate the procedure of generating complex parts of the application
  • Efficiently orchestrate asynchronous procedures using jQuery Deferred and Promises
  • Utilize the most widely-used client-side templating libraries for more complex use cases

In Detail

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.

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.

Style and approach

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.

Table of contents

  1. jQuery Design Patterns
    1. Table of Contents
    2. jQuery Design Patterns
    3. Credits
    4. About the Author
    5. About the Reviewer
    6. www.PacktPub.com
      1. eBooks, discount offers, and more
        1. Why subscribe?
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. A Refresher on jQuery and the Composite Pattern
      1. jQuery and DOM scripting
        1. Manipulating the DOM using jQuery
          1. Method Chaining and Fluent Interfaces
      2. The Composite Pattern
        1. How the Composite Pattern is used by jQuery
        2. Comparing the benefits over the plain DOM API
        3. Using the Composite Pattern to develop applications
          1. A sample use case
          2. The Composite Collection Implementation
          3. An example execution
          4. Alternative implementations
      3. The Iterator Pattern
        1. How the Iterator Pattern is used by jQuery
        2. How it pairs with the Composite Pattern
        3. Where can it be used
      4. Summary
    9. 2. The Observer Pattern
      1. Introducing the Observer Pattern
        1. How it is used by jQuery
          1. The jQuery on method
          2. The document-ready observer
        2. Demonstrate a sample use case
        3. How it is compared with event attributes
        4. Avoid memory leaks
      2. Introducing the Delegated Event Observer Pattern
        1. How it simplifies our code
        2. Compare the memory usage benefits
      3. Summary
    10. 3. The Publish/Subscribe Pattern
      1. Introducing the Publish/Subscribe Pattern
        1. How it differs from the Observer Pattern
      2. How it is adopted by jQuery
        1. Custom events in jQuery
        2. Implementing a Pub/Sub scheme using custom events
      3. Demonstrating a sample use case
        1. Using Pub/Sub on the dashboard example
        2. Extending the implementation
        3. Using any object as a broker
      4. Using custom event namespacing
      5. Summary
    11. 4. Divide and Conquer with the Module Pattern
      1. Modules and Namespaces
        1. Encapsulating internal parts of an implementation
        2. Avoiding global variables with Namespaces
        3. The benefits of these patterns
        4. The wide acceptance
      2. The Object Literal Pattern
      3. The Module Pattern
        1. The IIFE building block
        2. The simple IIFE Module Pattern
          1. How it is used by jQuery
        3. The Namespace Parameter Module variant
        4. The IIFE-contained Module variant
      4. The Revealing Module Pattern
      5. Using ES5 Strict Mode
      6. Introducing ES6 Modules
      7. Using Modules in jQuery applications
        1. The main dashboard module
        2. The categories module
        3. The informationBox module
        4. The counter module
        5. Overview of the implementation
      8. Summary
    12. 5. The Facade Pattern
      1. Introducing the Facade Pattern
      2. The benefits of this pattern
      3. How it is adopted by jQuery
        1. The jQuery DOM Traversal API
        2. The property access and manipulation API
      4. Using Facades in our applications
      5. Summary
    13. 6. The Builder and Factory Patterns
      1. Introducing the Factory Pattern
        1. How it is adopted by jQuery
        2. Using Factories in our applications
      2. Introducing the Builder Pattern
        1. How it is adopted by jQuery's API
        2. How it is used by jQuery internally
        3. How to use it in our applications
      3. Summary
    14. 7. Asynchronous Control Flow Patterns
      1. Programming with callbacks
        1. Using simple callbacks in JavaScript
        2. Setting callbacks as object properties
        3. Using callbacks in jQuery applications
        4. Writing methods that accept callbacks
        5. Orchestrating callbacks
          1. Queuing in order execution
            1. Avoiding the Callback Hell anti-pattern
          2. Running concurrently
      2. Introducing the concept of Promises
        1. Using Promises
          1. Using the jQuery Promise API
          2. Using Promises/A+
          3. Comparing jQuery and A+ Promises
        2. Advanced concepts
      3. Chaining Promises
        1. Handling thrown errors
        2. Joining Promises
        3. How jQuery uses Promises
        4. Transforming Promises to other types
          1. Transforming to Promises/A+
          2. Transforming to jQuery Promises
        5. Summarizing the benefits of Promises
      4. Summary
    15. 8. Mock Object Pattern
      1. Introducing the Mock Object Pattern
      2. Using Mock Objects in jQuery applications
        1. Defining the actual service requirements
        2. Implementing a Mock Service
        3. Using the Mock Service
      3. Summary
    16. 9. Client-side Templating
      1. Introducing Underscore.js
        1. Using Underscore.js templates in our applications
          1. Separating HTML templates from JavaScript code
      2. Introducing Handlebars.js
        1. Using Handlebars.js in our applications
          1. Separating HTML templates from JavaScript code
          2. Pre-compiling templates
      3. Retrieving HTML templates asynchronously
        1. Adopting it in an existing implementation
        2. Moderation is best in all things
      4. Summary
    17. 10. Plugin and Widget Development Patterns
      1. Introducing jQuery Plugins
        1. Following jQuery principles
          1. Working on Composite Collection Objects
          2. Allowing further chaining
        2. Working with $.noConflict()
        3. Wrapping with an IIFE
      2. Creating reusable plugins
        1. Accepting configuration parameters
        2. Writing stateful jQuery plugins
        3. Implementing a stateful jQuery Plugin
        4. Destroying a plugin instance
        5. Implementing getter and setter methods
        6. Using our plugin in our Dashboard application
      3. Using the jQuery Plugin Boilerplate
        1. Adding methods to your plugin
      4. Choosing a name
      5. Summary
    18. 11. Optimization Patterns
      1. Placing scripts near the end of the page
      2. Bundling and minifying resources
        1. Using IIFE parameters
      3. Using CDNs
        1. Using JSDelivr API
      4. Optimizing common JavaScript code
        1. Writing better for loops
      5. Writing performant CSS selectors
      6. Writing efficient jQuery code
        1. Minimizing DOM traversals
          1. Caching jQuery objects
          2. Scoping element traversals
          3. Chaining jQuery methods
        2. Don't overdo it
        3. Improving DOM manipulations
          1. Creating DOM elements
          2. Styling and animating
          3. Manipulating detached elements
          4. Introducing the Flyweight Pattern
        4. Using Delegate Observers
        5. Using $.noop()
        6. Using the $.single plugin
      7. Lazy Loading Modules
      8. Summary
    19. Index

Product information

  • Title: jQuery Design Patterns
  • Author(s): Thodoris Greasidis
  • Release date: February 2016
  • Publisher(s): Packt Publishing
  • ISBN: 9781785888687