User-friendly object model in JavaScript

Member 10277780, 25 Sep 2013

Rate this:

Please Sign up or sign in to vote.

User-friendly object model in JavaScript.

It won't be easy for beginner programmers to understand the principles of the object model and inheritance in JavaScript. I will try to help you: to describe a class it is necessary to describe class constructor (it is just a simple function). Class methods and inheritance are described through prototypes. The hidden methods and properties are made through closing.

But to my mind this way isn't convenient. I will tell you simpler way. Let's create the project:

<!DOCTYPE HTML>
<html>
<head>
   <title>Sample project</title>
   <!-- Styles -->
   <link rel="stylesheet" type="text/css" href="http://a-web.me/styles/default/a-web.css" >
   <!-- Scripts -->
   <script type="text/javascript" src="http://a-web.me/scripts/a-web.js"></script>
</head>
<body>
   <script type="text/javascript">
       /**
         * Entry point
         */
       function main() {
       }
   </script>
</body>
</html>

The main function will be called automatically after page is loaded. In our example HTML code doesn't change therefore I will write only a JavaScript-code. Let's create a class TMyClass.

/**
  * My class
  */
var TMyClass = AWeb.class({
    public : {
      /**
        * Constructor
        */
      constructor : function() {
         alert( "MyClass constructor" );
      }
   }
});

/**
  * Entry point
  */
function main() {
   var myClass = new TMyClass();
}

Let's add the private variable "name" and the public method "getName":

/**
  * My class
  */
var TMyClass = AWeb.class({
    public : {
      /**
        * Constructor
        */
      constructor : function( initValue ) {
         this.name = initValue||"A-class";
      },
      
      /**
        * Returns name
        */
      getName : function() {
         return this.name;
      }
   }
});

I pay your attention that the "name" variable is available only in the class TMyClass. The call of "myClass.name" will return undefined value. But the call of "myClass.getName()" will return "A-class" value.

Let's create an inherit class:

/**
  * My class
  */
var TMyInhClass = AWeb.class({
    extends : TMyClass,
    public : {
      /**
        * Constructor
        */
      constructor : function() {
         this.super( "B-class" );
      }
   }
});

The inherit class can access all the public and protected methods of a parent class. There is an example of call:

/**
  * Entry point
  */
function main() {
   var myClass = new TMyClass(),
       myInhClass = new TMyInhClass();
       
   alert(
      "myClass.getName() = " + myClass.getName() + "\n" +
      "myInhClass.getName() = " + myInhClass.getName() + "\n\n" +
      
      "myClass.name = " + myClass.name + "\n" +
      "myInhClass.name() = " + myInhClass.name
   );
}

Complete code looks like:

<!DOCTYPE HTML>

<html>
<head>
   <title>Sample project</title>
   <!-- Styles -->
   <link rel="stylesheet" type="text/css" href="http://a-web.me/styles/default/a-web.css" >
   <!-- Scripts -->
   <script type="text/javascript" src="http://a-web.me/scripts/a-web.js"></script>
</head>
<body>
   <script type="text/javascript">
      /**
        * My class
        */
      var TMyClass = AWeb.class({
          public : {
            /**
              * Constructor
              */
            constructor : function( initValue ) {
               this.name = initValue||"A-class";
            },
            
            /**
              * Returns name
              */
            getName : function() {
               return this.name;
            }
         }
      });

      /**
        * My class
        */
      var TMyInhClass = AWeb.class({
          extends : TMyClass,
          public : {
            /**
              * Constructor
              */
            constructor : function() {
               this.super( "B-class" );
            }
         }
      });

      /**
        * Entry point
        */
      function main() {
         var myClass = new TMyClass(),
             myInhClass = new TMyInhClass();
             
         alert(
            "myClass.getName() = " + myClass.getName() + "\n" +
            "myInhClass.getName() = " + myInhClass.getName() + "\n\n" +
            
            "myClass.name = " + myClass.name + "\n" +
            "myInhClass.name() = " + myInhClass.name
         );
      }
   </script>
</body>
</html>

Very simply. I will pay your attention again that private methods and variables are visible only in a class methods. The examples use the AWeb Library.

If the article has helped someone, I will tell you about the properties of the classes, I will give examples of protected methods and interfaces of classes in the next article. Thanks.