JavaScript Linux PHP All
Up

Search



Structure Your JavaScript Code - Part 1






Recent




PHP MySQL Pagination

PHP MySQL pagination is used to partition the data from the database to navigate the webpage easier and faster....


How To Use VPS Servers

You will learn how to use VPS servers correctly via the commands without the need of any interface or control panel....


Get Your Own Virtual Server Hosting

Virtual servers are widely used to host websites due to the great features they provide and the cheap costs....


PHP Database Connection

By having a PHP database connection for your program, it will be easy to append and retrieve records and save the statuses of your program....


Detailed Example Of A JavaScript Object Oriented Code

Learn how to use the properties and methods in the object oriented code and how to call the methods from inside and outside the mother object....


Create A JavaScript Object Oriented Code


Create A JavaScript Object Oriented Code
766   javascript

By having a JavaScript object oriented code, your program will be more clear and well structured.



It is very important to structure your JavaScript code by using a simple well organized approach, it will make your code more readable & reusable. Also, the integration will be so simple in the future specially when your code gets bigger. There are two ways to define a JavaScript object, the first one is the Constructor function method, here is what an object definition looks like using the Constructor function:


// The mother object (Constructor function)
function myObject() = {};

In this article, the Literal notation object type will be explained as it is easier to implement and also it will help you to separate your code portions to avoid the collision with other scripts specially when you use exclusive object name that reflects your product or software name, like: alfaSoftware_messages.

The common three parts of this aspect are:


1.   The Mother Object

It is the main container for your code that will contain the Properties and the Methods (Functions). If we take a real example, the mother object is similar to the bag that contains items. The mother object is represented as below in the code:


// The mother object (Literal notation)
var myObject = {};

In our real example, the bag that contains items is the mother object. Here is how the bag represented in the code:


// The mother object is the bag
var bag = {};


2.   The Properties

Properties are similar to the items inside the bag, like the makeup tool, perfume, cellular phone, etc. Properties are represented as below in the code:


// Property related to the mother object
myObject.myFirstProperty = 5;

In our bag example, each property inside the bag has a value (the brand), below is how they are represented in the code:


// Properties related to the mother object (the bag)
bag.makeup = "Origins";
bag.perfume = "Diesel";
bag.cellular = "Samsung Galaxy";
bag.pen = "Staedtler";


3.   The Functions

Functions are like the services that are provided within the mother object. In our bag example, the zipper is providing an opening and closing service within the bag, so the functions for our bag can be open and close. Functions are represented as below in the code:


// Method (function) related to the mother object
myObject.myFirstFunction = function(){};

In our bag example, each method inside the bag has a name (open & close) and their value is what does the function provide. Below is how they are represented in the code:


// Functions related to the mother object (the bag)
bag.open = function(){};
bag.close = function(){};

The overall parts can be combined together as seen in the code below:


// The mother object
var myObject = {};

// Property related to the mother object
myObject.myFirstProperty = 5;

// Method (function) related to the mother object
myObject.myFirstFunction = function(){};

The whole code for the bag example is represented as below:


// The mother object is the bag
var bag = {};

// Properties related to the mother object (the bag)
bag.makeup = "Origins";
bag.perfume = "Diesel";
bag.cellular = "Samsung Galaxy";
bag.pen = "Staedtler";

// Functions related to the mother object (the bag)
bag.open = function(){};
bag.close = function(){};

As you see, the JavaScript object oriented code structure is a great way to write a robust program that you can track its parts easily and extend it at anytime in the future. You can have more than one object with extra properties and functions, the next article will explain an advanced example about how the properties and methods are interacting within the mother object.













Home · About · Contact · Terms · Company Website

· · · ·