JavaScript and Object Oriented Principles

JavaScript can be implemented as a simple collection of Functions, sometimes referred to as Methods or as a structured Object Oriented Programming client side dynamic language.

Most JavaScript Development on the Web

… Uses Unstructured Collections of Unrelated Functions

…… This is Expensive to Maintain Over Time

We will be looking to solve this dilemma
by creating JavaScript that complies
with OOP Best Practices and Principles

What is JavaScript?

JavaScript is an interpreted computer programming language.

When used in web browsers, implementations allow client-side scripts to interact with the user and control the browser to alter the displayed Web content.

JavaScript is a Prototype-based
Scripting Language
with Dynamic Typing

It uses First Class Functions as it treats functions as “First Class Citizens”. Its syntax was influenced by the original C Language.

JavaScript implements many names and naming conventions from Java, but the two languages are otherwise unrelated and have very different semantics.

The key design principles within JavaScript are taken from the older “Self and Scheme” programming languages.

Self Languages are Prototype based.

… Scheme Languages use

…… Functional Programming paradigms.

This paradigm is a style of building the structures and elements of computer programs that treats computation as the evaluation of mathematical functions and avoids state and mutable data.

JavaScript is a multi-paradigm language

… Imperative, and Functional Programming Styles

…… Along with Supporting Object Oriented Programming

Imperative Programming is a programming paradigm that describes computation in terms of statements that change a program state.

Prototype-based Programming is a type of object-oriented programming in which behavior reuse, Inheritance, is performed via a process of cloning existing objects that serve as prototypes.

Dynamic Programming is a term used broadly in computer science to describe a class of high-level programming languages that, at run-time, execute many common behaviors that other languages might perform during compilation.

Object Oriented JavaScript

JavaScript, in its pure form, does not support the concepts of Encapsulation, one of the Pillars of Object Oriented Programming.

Issues with Using Unstructured JavaScript

When JavaScript is consumed within a Browser in operates within the Browser’s Document Object Model, the “DOM“.

The DOM is a Large Container that Holds all of the Elements on a Web page as Objects.

… Everything in HTML and Other Markup Languages

…… Are Objects that Exist within the Browser’s DOM

When Functions are created, and assigned to a variable, in unstructured JavaScript everything “Bubbles Up” to the top of the DOM.

Naming conflicts are not resolved at Design Time, as JavaScript is a Dynamic non-compiled language.

There is No Code Validation at Design Time

… Only Run-time Errors

…… And Behavior Anomalies

The JavaScript “Parser” resolves conflicts using a “First Encountered” strategy: The First Name Wins.

**The “First Name” is generally determined
by the order in which the JavaScript files are loaded**

As it is common practice in developing User Interfaces for Business solutions to use many Client side Developers this issue with Objects bubbling up to the top of the DOM become difficult to manage and even more difficult to debug.

JavaScript Encapsulation to the Rescue

Although it is not native to the JavaScript language there are techniques that allow an enlightened developer to program to Object Oriented Best Practices and Principles.

JavaScript Closures and the Namespace

JavaScript can simulate the concept of a Class and the encapsulation of related Classes into an organizational namespace much the same way as true Object Oriented languages.

+The JavaScript Closure

The JavaScript Closure creates a boundary for objects.

A JavaScript Object has scope within the Function and one level up.

By nesting a Function inside a Function we can control the scope of the Objects and prevent them from bubbling up to the top of the DOM.

+The JavaScript Namespace

The creation of an empty JavaScript object in JavaScript Object Notation, JSON, we can create an encapsulated container that acts as a traditional Namespace.

This container Encapsulates common JavaScript “Classes” as Functions designed as JavaScript Closures.

+Code Samples

This code shows the Namespace “portalTiles” with two nested functions:

portalTiles.selections – Not a Closure
portalTiles.display – Is a Closure

The declaration of the Namespace uses a Best Practice convention of checking if the Namespace has already been created. It creates a new object only if the namespace is not in the DOM already.

// Declaring the Namespace as an Empty JSON Object Container
var portalTiles = portalTiles || {};

// A JavaScript Function that is not a Closure
// Bubbles to the top of the "portalTiles Namespace
portalTiles.selections = function () {
    $('#portalSelections').bind('click', function () {
        $('#portalDisplay').toggle('slow');
    });
};

// A JavaScript Function that is a Closure
// The "list" varable is consumed in the Nested Function and does not Bubbles to the top of the "portalTiles Namespace
portalTiles.selectionDisplay = function (portalTilesList) {
    var list = portalTilesList;

    // The Function that creates the Closure
    portalTiles.display = function () {
        $(list).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');
                    });
            });
        });
    };
};

// Declaring the Namespace as an Empty JSON Object Container

var portalTiles = portalTiles || {};

// A JavaScript Function that is not a Closure

// Bubbles to the top of the "portalTiles Namespace

portalTiles.selections = function () {

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

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

});

};

// A JavaScript Function that is a Closure

// The "list" varable is consumed in the Nested Function and does not Bubbles to the top of the "portalTiles Namespace

portalTiles.selectionDisplay = function (portalTilesList) {

var list = portalTilesList;

// The Function that creates the Closure

portalTiles.display = function () {

$(list).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');

});

};

The JavaScript Namespace organizes
related JavaScript Closures
into separate files that can be
easily maintained over time at a
lower cost of ownership for the Client

Wisdom Pearl # 121 – Work Quality Concept

Your Work is Only as Good

… As How it is Perceived by the Next Person who Touches It

…… Positive Acceptance of your Work is Your Preeminent Responsibility

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

JavaScript and Object Oriented Principles

JavaScript can be implemented as a simple collection of Functions, sometimes referred to as Methods or as a structured Object Oriented Programming client side dynamic language.

Most JavaScript Development on the Web

… Uses Unstructured Collections of Unrelated Functions

…… This is Expensive to Maintain Over Time

We will be looking to solve this dilemma by creating JavaScript that complies with OOP Best Practices and Principles

What is JavaScript?

JavaScript is an interpreted computer programming language.

When used in web browsers, implementations allow client-side scripts to interact with the user and control the browser to alter the displayed Web content.

JavaScript is a Prototype-based Scripting Language with Dynamic Typing

It uses First Class Functions as it treats functions as “First Class Citizens”. Its syntax was influenced by the original C Language.

JavaScript implements many names and naming conventions from Java, but the two languages are otherwise unrelated and have very different semantics.

The key design principles within JavaScript are taken from the older “Self and Scheme” programming languages.

Self Languages are Prototype based.

… Scheme Languages use

…… Functional Programming paradigms.

This paradigm is a style of building the structures and elements of computer programs that treats computation as the evaluation of mathematical functions and avoids state and mutable data.

JavaScript is a multi-paradigm language

… Imperative, and Functional Programming Styles

…… Along with Supporting Object Oriented Programming

Imperative Programming is a programming paradigm that describes computation in terms of statements that change a program state.

Prototype-based Programming is a type of object-oriented programming in which behavior reuse, Inheritance, is performed via a process of cloning existing objects that serve as prototypes.

Dynamic Programming is a term used broadly in computer science to describe a class of high-level programming languages that, at run-time, execute many common behaviors that other languages might perform during compilation.

Object Oriented JavaScript

JavaScript, in its pure form, does not support the concepts of Encapsulation, one of the Pillars of Object Oriented Programming.

Issues with Using Unstructured JavaScript

When JavaScript is consumed within a Browser in operates within the Browser’s Document Object Model, the “DOM“.

The DOM is a Large Container that Holds all of the Elements on a Web page as Objects.

… Everything in HTML and Other Markup Languages

…… Are Objects that Exist within the Browser’s DOM

When Functions are created, and assigned to a variable, in unstructured JavaScript everything “Bubbles Up” to the top of the DOM.

Naming conflicts are not resolved at Design Time, as JavaScript is a Dynamic non-compiled language.

There is No Code Validation at Design Time

… Only Run-time Errors

…… And Behavior Anomalies

The JavaScript “Parser” resolves conflicts using a “First Encountered” strategy: The First Name Wins.

The “First Name” is generally determined by the order in which the JavaScript files are loaded

As it is common practice in developing User Interfaces for Business solutions to use many Client side Developers this issue with Objects bubbling up to the top of the DOM become difficult to manage and even more difficult to debug.

JavaScript Encapsulation to the Rescue

Although it is not native to the JavaScript language there are techniques that allow an enlightened developer to program to Object Oriented Best Practices and Principles.

JavaScript Closures and the Namespace

JavaScript can simulate the concept of a Class and the encapsulation of related Classes into an organizational namespace much the same way as true Object Oriented languages.

The JavaScript Namespace organizes related JavaScript Closures into separate files that can be easily maintained over time at a lower cost of ownership for the Client

Wisdom Pearl # 121 – Work Quality Concept

Your Work is Only as Good

… As How it is Perceived by the Next Person who Touches It

…… Positive Acceptance of your Work is Your Preeminent Responsibility

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

We will be looking to solve this dilemma
by creating JavaScript that complies
with OOP Best Practices and Principles

JavaScript is a Prototype-based
Scripting Language
with Dynamic Typing

**The “First Name” is generally determined
by the order in which the JavaScript files are loaded**

The JavaScript Namespace organizes
related JavaScript Closures
into separate files that can be
easily maintained over time at a
lower cost of ownership for the Client