4 JavaScript Design Patterns You Should Know by Devan Patel (@devanp92)

js-patterns.js

/**
 * 1. Module Design Pattern
 * @link https://scotch.io/bar-talk/4-javascript-design-patterns-you-should-know#module-design-pattern
 */

(function () {

    // declare private variables and/or functions

    return {
        // declare public variables and/or functions
    }

})();

var HTMLChanger = (function () {
    var contents = 'contents';

    var changeHTML = function () {
        var element = document.getElementById('attribute-to-change');
        element.innerHTML = contents;
    };

    return {
        callChangeHTML: function () {
            changeHTML();
            console.log(contents);
        }
    };

})();

HTMLChanger.callChangeHTML();       // Outputs: 'contents'
console.log(HTMLChanger.contents);  // undefined


/**
 * 2. Revealing Module Pattern
 * A variation of the module pattern is called the Revealing Module Pattern.
 * The purpose is to maintain privacy for all variables and methods only finally revealed in the returned object literal.
 * The direct implementation looks like this:
 */

var Exposer = (function () {
    var privateVariable = 10;

    var privateMethod = function () {
        console.log('Inside a private method!');
        privateVariable++;
    };

    var methodToExpose = function () {
        console.log('This is a method I want to expose!');
    };

    var otherMethodIWantToExpose = function () {
        privateMethod();
    };

    return {
        first: methodToExpose,
        second: otherMethodIWantToExpose
    };
})();

Exposer.first();        // Output: This is a method I want to expose!
Exposer.second();       // Output: Inside a private method!
Exposer.methodToExpose; // undefined


/**
 * 3. Prototype Design Pattern
 * @link https://scotch.io/bar-talk/4-javascript-design-patterns-you-should-know#prototype-design-pattern
 */

var TeslaModelS = function () {
    this.numWheels = 4;
    this.manufacturer = 'Tesla';
    this.make = 'Model S';
};

TeslaModelS.prototype.go = function () {
    // Rotate wheels
};

TeslaModelS.prototype.stop = function () {
    // Apply brake pads
};


var TeslaModelS = function () {
    this.numWheels = 4;
    this.manufacturer = 'Tesla';
    this.make = 'Model S';
};

TeslaModelS.prototype = {
    go: function () {
        // Rotate wheels
    },
    stop: function () {
        // Apply brake pads
    }
};


var TeslaModelS = function () {
    this.numWheels = 4;
    this.manufacturer = 'Tesla';
    this.make = 'Model S';
};

TeslaModelS.prototype = function () {

    var go = function () {
        // Rotate wheels
    };

    var stop = function () {
        // Apply brake pads
    };

    return {
        pressBrakePedal: stop,
        pressGasPedal: go
    }

}();


/**
 * 4. Observer
 */

var Subject = function () {
    this.observers = [];

    return {
        subscribeObserver: function (observer) {
            this.observers.push(observer);
        },
        unsubscribeObserver: function (observer) {
            var index = this.observers.indexOf(observer);
            if (index > -1) {
                this.observers.splice(index, 1);
            }
        },
        notifyObserver: function (observer) {
            var index = this.observers.indexOf(observer);
            if (index > -1) {
                this.observers[index].notify(index);
            }
        },
        notifyAllObservers: function () {
            for (var i = 0; i < this.observers.length; i++) {
                this.observers[i].notify(i);
            }

        }
    };
};

var Observer = function () {
    return {
        notify: function (index) {
            console.log("Observer " + index + " is notified!");
        }
    }
};

var subject = new Subject();

var observer1 = new Observer();
var observer2 = new Observer();
var observer3 = new Observer();
var observer4 = new Observer();

subject.subscribeObserver(observer1);
subject.subscribeObserver(observer2);
subject.subscribeObserver(observer3);
subject.subscribeObserver(observer4);

subject.notifyObserver(observer2); // Observer 2 is notified!

subject.notifyAllObservers();
// Observer 1 is notified!
// Observer 2 is notified!
// Observer 3 is notified!
// Observer 4 is notified!


/**
 * 5. Singleton
 */

var printer = (function () {

    var printerInstance;

    function create() {

        function print() {
            // underlying printer mechanics
        }

        function turnOn() {
            // warm up
            // check for paper
        }

        return {
            // public + private states and behaviors
            print: print,
            turnOn: turnOn
        };
    }

    return {
        getInstance: function () {
            if (!instance) {
                instance = create();
            }
            return instance;
        }
    };

    function Singleton() {
        if (!instance) {
            instance = intialize();
        }
    }

})();

var officePrinter = printer.getInstance();