Book Image

jQuery Design Patterns

By : Greasidis
Book Image

jQuery Design Patterns

By: 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 (13 chapters)
12
Index

Lazy Loading Modules


Finally, we will get an introduction to the advanced technique of Lazy Loading Modules. The key concept of this practice is that, during the page load, the browser will only download and execute those modules that are required for the initial rendering of the page while the rest of the application modules are requested after the page is fully loaded and is required to respond to a user action. RequireJS (http://requirejs.org/) is a popular JavaScript library that is used as a module loader but, for simple cases, we can achieve the same result with jQuery.

As an example of this, we will use it to lazy load the informationBox module of the Dashboard example that we saw in previous chapters, after the first click of the user on the Dashboard's <button>. We will abstract the implementation that is responsible for downloading and executing JavaScript files into a generic and reusable module named moduleUtils:

(function() { 
    'use strict'; 

    dashboard.moduleUtils...