Simplify JavaScript Object Oriented Programming Model: Part 1

Code reviews of JavaScript code is always a headache for web developers because large JavaScript code is not easy to read and understand so this article might help introduce how to write simple and readable code in JavaScript. To make things easy I am using jQuery here but I will show each thing here.

It is important to note that there are no classes in JavaScript because JavaScript is a prototypal object-oriented language. This means objects inherit from objects, not classes from classes as in object-oriented languages (C#, Java). Everything is an object except for the primitive data types (boolean, number and string) and undefined.

A "class" is only a concept that supports the Object-Oriented Programming model in JavaScript. When a JavaScript function is invoked as a constructor with the new keyword then that function calls a class (conceptually).

A road map to learn object oriented JavaScript

• Simplify JavaScript Object Oriented Programming Model: Part 2
  
• Simplify JavaScript Object Oriented Programming Model: Part 3

An Example

To show the JavaScript Object-Oriented Programming model, I am using a simple program that changes the background color when the window is loaded into the bowser, in other words when the DOM is rendered in the browser. So let's see an example.

First of all we create a JavaScript (js) file called page.js that contains the following code snippet.

(function($) {
    function Page() {
        var $this = this;

        function initialize() {
            $('body').css('background-color', 'rgba(123, 120, 234, 0.7)');
        }

        $this.init = function() {
            initialize();
        }
    }
    $(function() {
        var self = new Page();
        self.init();
    })
}(jQuery))

Now you are thinking, what are we doing in this code? So let's see each line of code one by one.

Remove jQuery Conflicts

When we are developing a large project it's possible to use more than one JavaScript library and it's also possible for their aliases to conflict. You can remove conflicts using the following code that shows $ alias represents jQuery, in other words $ is doing the same as jQuery so you can also replace $ by jQuery.

(function($) {

    //code here

}(jQuery))

Class and global Variable

I have been previously mentioned that class is a concept in JavaScript. As in the following code sample we have created some functions but we invoke the Page() function by its constructor using the new keyword. That's why it's called a class instead of a function.

function Page() {
    var $this = this;

    function initialize() {
        $('body').css('background-color', 'rgba(123, 120, 234, 0.7)');
    }

    $this.init = function() {
        initialize();
    }
}
$(function() {
    var self = new Page();
    self.init();
})

Sinice we assign this to the variable $this in this function it's an instance of it, in other words we have an object creating a Page() class and then assigns it to the $this variable. One more thing is, It's conventional in JavaScript to write the class name in Pascal case and the internal function name in Camel case to differentiate them.

Private and Public Function

As you know, the Page() is a function is also a class but internally we create two more functions as shown in the following code snippet.

function initialize() {
    $('body').css('background-color', 'rgba(123, 120, 234, 0.7)');
}

$this.init = function() {
    initialize();
}

Here initialize() is a private function because it is not access outside the Page() class so how to access it outside?

Since we have the $this variable that was assigned a value that is an object, we create a property such as $this.init and assign a function() to it. Since $this.init is also in the Page() class it can access the private function initialize(). So $this.init is a public function that can call outside the Page() class by its object.

Call on Window Load

As in the following code it's also a function that creates an object of the Page() class and calls its public method init().

function initialize() {
    $('body').css('background-color', 'rgba(123, 120, 234, 0.7)');
}

$this.init = function() {
    initialize();
}

This function is always called when the window loads, in other words it is similar to $(document).ready().

$(function() {
    $(document).ready(function() { ==
    })
})

The following code snippet for a HTML page has a reference of both the jQuery library and the page.js script file.

<!DOCTYPE html>
   <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
         <title>index</title>
      </head>
      <body>
         <h1>Welcom JavaScript & jQuery !</h1>
      </body>
   </html>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/page.js"></script>