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. Creation Pattern 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. Structure Design 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. Behavior Pattern 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 prototype when defining methods on the Person data type. Since multiple Person objects will reference the same prototype, this allows the getAge() method to be shared by all instances of the Person data type, rather than for each instance redefines it. Additionally, any data type that inherits from Person can 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 retinaMacbook object 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);