JavaScript Design Patterns: A closer look at effective design

Today, we will put on our computer science hats and learn some common design patterns. Design patterns provide developers with ways to solve technical problems in a reusable and elegant way. Interested in becoming a better JavaScript developer? Then keep reading.

Every few weeks, we revisit some of our readers' favorite posts from the site's history. This tutorial was first published in July 2012.

Introduction

Solid design patterns are the basic building blocks of maintainable software applications. If you've ever been in a technical interview, you'll love being asked these questions. In this tutorial, we'll cover some patterns you can start using today.

What is a design pattern?

Design patterns are reusable software solutions

Simply put, design patterns are reusable software solutions to specific types of problems that often occur during software development. After years of software development practice, experts have found ways to solve similar problems. These solutions have been encapsulated into design patterns. so:

• Patterns are proven solutions to software development problems
• Patterns are extensible because they are usually structured and have rules that you should follow
• Patterns can be reused to solve similar problems

We will cover some examples of design patterns further in this tutorial.

Types of design patterns

In software development, design patterns are usually divided into several categories. We'll cover the three most important ones in this tutorial. Here’s a brief explanation:

1. CreationPattern focuses on methods of creating objects or classes. This may sound simple (and in some cases it is), but large applications require control over the object creation process.

2. StructureDesign patterns focus on ways to manage relationships between objects in order to build applications in a scalable way. A key aspect of structural patterns is ensuring that changes to one part of the application do not affect all other parts.

3. BehaviorPattern focuses on communication between objects.

After reading these brief instructions you may still have questions. This is natural and things will become clear once we delve into some of the design patterns below. So please keep reading!

Notes on classes in JavaScript

When reading about design patterns, you will often see references to classes and objects. This can be confusing because JavaScript doesn't really have a construct called "class"; the more correct term is "data type".

Data types in JavaScript

JavaScript is an object-oriented language in which objects inherit from other objects with the concept of prototypal inheritance. Data types can be created by defining so-called constructors as follows:

function Person(config) { this.name = config.name; this.age = config.age; } Person.prototype.getAge = function() { return this.age; }; var tilo = new Person({name:"Tilo", age:23 }); console.log(tilo.getAge());

Please note the use of prototypewhen defining methods on the Persondata type. Since multiple Personobjects will reference the same prototype, this allows the getAge()method to be shared by all instances of the Persondata type, rather than for each instance redefines it. Additionally, any data type that inherits from Personcan access the getAge()method.

Handling Privacy

Another common problem in JavaScript is that there are no truly private variables. However, we can use closures to simulate privacy. Consider the following code snippet:

var retinaMacbook = (function() { //Private variables var RAM, addRAM; RAM = 4; //Private method addRAM = function (additionalRAM) { RAM += additionalRAM; }; return { //Public variables and methods USB: undefined, insertUSB: function (device) { this.USB = device; }, removeUSB: function () { var device = this.USB; this.USB = undefined; return device; } }; })();

In the above example, we created a retinaMacbookobject with public and private variables and methods. This is how we use it:

retinaMacbook.insertUSB("myUSB"); console.log(retinaMacbook.USB); //logs out "myUSB" console.log(retinaMacbook.RAM) //logs out undefined

There's a lot more we can do with functions and closures in JavaScript, but we won't cover everything in detail in this tutorial. With this little lesson on JavaScript data types and privacy, we can move on to learning about design patterns.

Creative Design Mode

There are many different types of creative design patterns, but we'll cover two of them in this tutorial: builders and prototypes. I find that these are used often enough to cause concern.

Builder Pattern

The builder pattern is often used in web development, and you may have used it before without realizing it. Simply put, this pattern can be defined as follows:

The application builder pattern allows us to construct objects by just specifying their type and contents. We don't have to create the object explicitly.

For example, you may have done this countless times in jQuery:

var myDiv = $('
This is a div.
'); //myDiv now represents a jQuery object referencing a DOM node. var someText = $('
'); //someText is a jQuery object referencing an HTMLParagraphElement var input = $('');

看一下上面的三个例子。在第一个中，我们传入了包含一些内容的

var Person = { numFeet: 2, numHeads: 1, numHands:2 }; //Object.create takes its first argument and applies it to the prototype of your new object. var tilo = Object.create(Person); console.log(tilo.numHeads); //outputs 1 tilo.numHeads = 2; console.log(tilo.numHeads) //outputs 2

var vehiclePrototype = { init: function (carModel) { this.model = carModel; }, getModel: function () { console.log( "The model of this vehicle is " + this.model); } }; function vehicle (model) { function F() {}; F.prototype = vehiclePrototype; var f = new F(); f.init(model); return f; } var car = vehicle("Ford Escort"); car.getModel();

$('.myList').addClass('selected'); $('#myItem').addClass('selected'); //dont do this on large tables, it's just an example. $("#dataTable tbody tr").on("click", function(event){ alert($(this).text()); }); $('#myButton').on("click", function(event) { alert("Clicked."); });

$(document).ready(function() { //all your code goes here... });

ready: (function() { ... //Mozilla, Opera, and Webkit if (document.addEventListener) { document.addEventListener("DOMContentLoaded", idempotent_fn, false); ... } //IE event model else if (document.attachEvent) { // ensure firing before onload; maybe late but safe also for iframes document.attachEvent("onreadystatechange", idempotent_fn); // A fallback to window.onload, that will always work window.attachEvent("onload", idempotent_fn); ... } })

//We just create an association between the jQuery events methods

//and those prescribed by the Observer Pattern but you don't have to. var o = $( {} ); $.subscribe = o.on.bind(o); $.unsubscribe = o.off.bind(o); $.publish = o.trigger.bind(o); // Usage document.on( 'tweetsReceived', function(tweets) { //perform some actions, then fire an event $.publish('tweetsShow', tweets); }); //We can subscribe to this event and then fire our own event. $.subscribe( 'tweetsShow', function() { //display the tweets somehow .. //publish an action after they are shown. $.publish('tweetsDisplayed); }); $.subscribe('tweetsDisplayed, function() { ... });

$('#album').on('click', function(e) { e.preventDefault(); var albumId = $(this).id(); mediator.publish("playAlbum", albumId); }); var playAlbum = function(id) { … mediator.publish("albumStartedPlaying", {songList: [..], currentSong: "Without You"}); }; var logAlbumPlayed = function(id) { //Log the album in the backend }; var updateUserInterface = function(album) { //Update UI to reflect what's being played }; //Mediator subscriptions mediator.subscribe("playAlbum", playAlbum); mediator.subscribe("playAlbum", logAlbumPlayed); mediator.subscribe("albumStartedPlaying", updateUserInterface);