Prototyping for Reusable Class Libraries

In a previous post we explored JavaScript Closures as a methodology for creating a Class Structure within a JSON Object functioning as a Namespace.

We are now going to take the next step into Class reuse with JavaScript Prototypes.

Everything in JavaScript is represented to the Browser as objects in the Brower’s Document Object Model, the DOM.

JavaScript is not natively an Object Oriented programming language.

As we say in the first post in this series, JavaScript Closures, we can emulate the Class and Namespace represented in OOP concepts using JavaScript.

JavaScript is a Prototype Language

… Prototyping gives Us a Vehicle

…… For Object Reuse

The JavaScript Prototype

Every object created using JavaScript has the ability to “Clone” itself.

This cloning process also exposes the ability to Override Defined Behavior within the Cloned Object.

A “Base Class” object can be created that exists only one time in memory but can be Instantiated an infinite number of times as a Cloned Prototype Object.

The derived object uses a Constructor, as a Function or Method Signature, and implements the Common In-Memory behavior in a Unique Object that resides in the Browser’s DOM.

Each Instantiation of a New Object

… When Derived from a Prototype

….. Uses the Same Memory as All Other Variations

The Child Objects are unique in the Constructor Parameters and possible Behavior Overrides but does not use any new memory for the collection of functional behaviors.

You can Create 1000’s of New Objects from Prototypes

… And the Only Memory Used is the Variations You have Defined

…… In the Constructor and Overloads within the Named Constructor

The JavaScript Prototype Design Pattern

The code examples below show a simple implementation of how we create the Prototype using a Constructor Signature

We use the special keyword “this” to associate the Function Body parameters and return values to the Constructor.

The Function Body is in memory only one but the Constructor can be created for as many Clones as required.

The ‘this’ Keyword Defines the relationship

… of Variables and Return Objects

…… Between the In-memory Code and the Derived Clones in the DOM

+The TMD Portal MVC 4 Website Flip Tiles Code Examples

The TMD Portal uses HTML 5 and CSS 3 with JavaScript to create a User Experience look that is similar to the Windows 8 and phone Live Tiles. The code below flips to content when hovered over.

The examples use three JavaScript files for Object Oriented representation in JavaScript:

portalTiles.js – This file is loaded first and holds the Once-In-Memory Prototype Objects
objectPrototypes.js – This file instantiate the “Clone” objects from the Constructor defined in the portalTiles.js file with the ‘new’ keyword
startup.js – This is the jQuery ‘$(document).ready’ function that bootstraps all the objects into the DOM once the document page is loaded

The portalTiles Namespace is created at the top of the portalTiles.js file and is used as the Class Container for the two Function Methods: Selections and SelectionsDisplay.

There are no parameters for this simple example so the ‘this’ keyword is not required to associate in-memory parameter returns to the Cloned Signatures.

Notice the first line of the Prototype Pattern is the Constructor without any parameters. This is what is called with the ‘new’ keyword in the objectPrototype.js file.

The code below the Constructor is the Prototype Pattern. This is what resides as common Reusable Code in memory.

portalTiles.js

var portalTiles = portalTiles || {};

portalTiles.Selections = function () {};
portalTiles.Selections.prototype = {
    display: function (portalSelections, portalDisplay) {

        $(portalSelections).bind('click', function () {
            $(portalDisplay).toggle('slow');
        });
    }
};

portalTiles.SelectionDisplay = function () { };
portalTiles.SelectionDisplay.prototype = {
    tileImages: function (portalTilesList) {

            $(portalTilesList).delegate('.tileSelection', 'click', function () {
                $('#tiles').toggle('slow', function () {
                    $('.tileName').html(name);
                    $('.tileDescription').html(window.description);
                    $('.tileImage').attr({
                        alt: name,
                        src: window.logoImage,
                        title: 'Visit ' + name + ' at ' + window.siteUrl
                    });

                    $(this).hover(
                        function () {
                            $(this).css('background-color', '#402d1b');
                            $('#portalTilesList').css('background-color', '#402d1b');
                        },
                        function () {
                            $(this).hide('slow');
                            $(this).css('background-color', '#68433a');
                            $('#portalTilesList').css('background-color', '#68433a');
                        });
                });
            });
    }
};

var portalTiles = portalTiles || {};

portalTiles.Selections = function () {};

portalTiles.Selections.prototype = {

display: function (portalSelections, portalDisplay) {

$(portalSelections).bind('click', function () {

$(portalDisplay).toggle('slow');

});

}

};

portalTiles.SelectionDisplay = function () { };

portalTiles.SelectionDisplay.prototype = {

tileImages: function (portalTilesList) {

$(portalTilesList).delegate('.tileSelection', 'click', function () {

$('#tiles').toggle('slow', function () {

$('.tileName').html(name);

$('.tileDescription').html(window.description);

$('.tileImage').attr({

alt: name,

src: window.logoImage,

title: 'Visit ' + name + ' at ' + window.siteUrl

});

$(this).hover(

function () {

$(this).css('background-color', '#402d1b');

$('#portalTilesList').css('background-color', '#402d1b');

function () {

$(this).hide('slow');

$(this).css('background-color', '#68433a');

$('#portalTilesList').css('background-color', '#68433a');

});

}

};

objectPrototypes.js

var portalSelections = new portalTiles.Selections();
var portalDisplay = new portalTiles.SelectionDisplay();

1 2	var portalSelections = new portalTiles.Selections(); var portalDisplay = new portalTiles.SelectionDisplay();

startup.js

$(document).ready(function () {
    portalSelections.display('#portalSelections', '#portalDisplay');   
    portalDisplay.tileImages('#portalTilesList');
});

$(document).ready(function () {

portalSelections.display('#portalSelections', '#portalDisplay');

portalDisplay.tileImages('#portalTilesList');

});

The Benefits of the JavaScript Prototype Design Pattern

Encapsulates function artifacts within the defined prototype code
Prevents naming conflicts in the DOM Root
Huge memory savings on commonly instantiate behavior objects.
Provides Overriding of defined behavior for custom functionality without creating an all new object in memory
Allows for separation of concerns using encapsulated JavaScript files for lower cost on maintenance over the lifetime of the Client-side code
Developers only have to understand the abstraction of the code through the use of the Constructor Signatures and injected Parameters
Namespace encapsulation of related prototypes for ease of understanding of the underlying intent of the JavaScript code

Wisdom Pearl # 123 – Organize Your Creations

A Place for Everything … And Everything in its Place

… Organize Your Creations By Their Behaviors and Responsibilities

Bio
Latest Posts

Brad Huett

I am a Principal Architect at Liquid Hub in the Philadelphia area specializing in Agile Practices as a Certified Scrum Master (CSM). I use Test Driven Development (TDD) and Acceptance Test Driven Development (ATDD) with Behavior Driven Development (BDD) as my bridge to Agile User Stories Acceptance Criteria in a Domain Driven Design (DDD) implementing true RESTful services

Latest posts by Brad Huett (see all)

DevOps: A Bridge to Your DevOps Culture - March 25, 2016
Embracing Test Driven Development (TDD) - March 25, 2016
DevOps: Delivering Agile Projects - March 25, 2016

February 2019
M	T	W	T	F	S	S
« Mar
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28

Prototyping for Reusable Class Libraries

In a previous post we explored JavaScript Closures as a methodology for creating a Class Structure within a JSON Object functioning as a Namespace.

We are now going to take the next step into Class reuse with JavaScript Prototypes.

Everything in JavaScript is represented to the Browser as objects in the Brower’s Document Object Model, the DOM.

JavaScript is not natively an Object Oriented programming language.

As we say in the first post in this series, JavaScript Closures, we can emulate the Class and Namespace represented in OOP concepts using JavaScript.

JavaScript is a Prototype Language

… Prototyping gives Us a Vehicle

…… For Object Reuse

The JavaScript Prototype

Every object created using JavaScript has the ability to “Clone” itself.

This cloning process also exposes the ability to Override Defined Behavior within the Cloned Object.

A “Base Class” object can be created that exists only one time in memory but can be Instantiated an infinite number of times as a Cloned Prototype Object.

The derived object uses a Constructor, as a Function or Method Signature, and implements the Common In-Memory behavior in a Unique Object that resides in the Browser’s DOM.

Each Instantiation of a New Object

… When Derived from a Prototype

….. Uses the Same Memory as All Other Variations

The Child Objects are unique in the Constructor Parameters and possible Behavior Overrides but does not use any new memory for the collection of functional behaviors.

You can Create 1000’s of New Objects from Prototypes

… And the Only Memory Used is the Variations You have Defined

…… In the Constructor and Overloads within the Named Constructor

The JavaScript Prototype Design Pattern

The code examples below show a simple implementation of how we create the Prototype using a Constructor Signature

We use the special keyword “this” to associate the Function Body parameters and return values to the Constructor.

The Function Body is in memory only one but the Constructor can be created for as many Clones as required.

The ‘this’ Keyword Defines the relationship

… of Variables and Return Objects

…… Between the In-memory Code and the Derived Clones in the DOM

The Benefits of the JavaScript Prototype Design Pattern

Encapsulates function artifacts within the defined prototype code

Prevents naming conflicts in the DOM Root

Huge memory savings on commonly instantiate behavior objects.

Provides Overriding of defined behavior for custom functionality without creating an all new object in memory

Allows for separation of concerns using encapsulated JavaScript files for lower cost on maintenance over the lifetime of the Client-side code

Developers only have to understand the abstraction of the code through the use of the Constructor Signatures and injected Parameters

Namespace encapsulation of related prototypes for ease of understanding of the underlying intent of the JavaScript code

Wisdom Pearl # 123 – Organize Your Creations

A Place for Everything … And Everything in its Place

… Organize Your Creations By Their Behaviors and Responsibilities

Brad Huett

Latest posts by Brad Huett (see all)

Share this:

Like this:

If you think this post was worth your time: Like It Please