Saturday, June 8, 2013

How to define a class in JavaScript?

Introduction


JavaScript (JS) is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. At present JavaScript is becoming a more and more popular language. It was originally implemented as part of web browsers so that client-side scripts may interact with the user, control the browser, but now it can be used to write code for server side (Node.Js) or even can be used in databases to write queries (NoSQL).

JavaScript is a very flexible programming language. It can be easily extended with new features which are used in other programming languages.

As it was mentioned before, JavaScript is a prototype based scripting language. A prototype is an object and every created function automatically gets a prototype property that points to a new blank object. In earlier versions of JavaScript created objects were vulnerable, because they could be modified at any time accidentally or on purpose. In some cases it’s an advantage, but when it comes to writing libraries it is a hude disadvantage.

Situation changed when ECMAScript 5 version was released. It included many cool features, which allow to have flexibilty and create more reliable and steady libraries. It allows to implement open/close principle: “A module should be open for extension but closed for modifications”. It means that if client programmer wants to extend an existing object he must create his own derived object.

How to define a class in JavaScript?


There are no classes in JavaScript, because JavaScript is not a type based language like java or C#. Classes can be emulated in JavaScript. They are useful when you need to write complex applications.


First of all let’s create a class using JavaScript basic features and then optimize the same code with class4js library.

One of most important ECMAScript 5 addition was ‘strict mode’, which actually removes features from the language, making the program simpler and less error-prone. If you want to exploit the full potential of JavaScript, all written code should work in strict mode.

‘use strict’;

// You codes goes here...

In order to create a class, function which will represent a type and will act as constructor of that type should be declared.

var Shape = function () {
  this.__x = 0;
  this.__y = 0;
};

Now let’s create a prototype for the function. Then the function is instantiated and all properties from prototype are copied to new a instance.

Shape.prototype = Object.create(Object.prototype, {
  x: {
    get: function () {
      return this.__x;
    },
    set: function (value) {
      this.__x = value;
    },
    enumerable: true,
    configurable: false
  },
  y: {
    get: function () {
      return this.__y;
    },
    set: function (value) {
      this.__y = value;
    },
    enumerable: true,
    configurable: false
  },
  moveTo: {
    value: function (x, y) {
      this.x = x;
      this.y = y;
    },
    writable: false,
    enumerable: true,
    configurable: false
  },
  draw: {
    value: function () {
      console.log("Drawing shape at: (" + this.x + ", " + this.y + ")");
    },
    writable: false,
    enumerable: true,
    configurable: false
  }
});

Object property descriptor has these optional keys:

  • writable - true if and only if the value associated with the property may be changed with an assignment operator
  • enumerable - true if and only if this property shows up during enumeration of the properties on the corresponding object
  • configurable - true if and only if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object

When the new type is defined it’s can be locked.

Object.seal(Shape);
Object.seal(Shape.prototype);

When the object is locked, it can not be modified. In case of trying to do so, an error will be raised.

Object.defineProperty(obj, "prop", { value: 17 }); 
// throws an error

After all defined function can be instantiated.

var shape = new Shape();
Object.seal(shape);

shape.x = 50;
shape.y = 50;
shape.moveTo(120, 85);
shape.draw();
// Drawing shape at: (120, 85)

console.log(shape instanceof Shape);
// true

Here is the final result.

‘use strict’;

var Shape = function () {
  this.__x = 0;
  this.__y = 0;
};

Shape.prototype = Object.create(Object.prototype, {
  x: {
    get: function () {
      return this.__x;
    },
    set: function (value) {
      this.__x = value;
    },
    enumerable: true,
    configurable: false
  },
  y: {
    get: function () {
      return this.__y;
    },
    set: function (value) {
      this.__y = value;
    },
    enumerable: true,
    configurable: false
  },
  moveTo: {
    value: function (x, y) {
      this.x = x;
      this.y = y;
    },
    writable: false,
    enumerable: true,
    configurable: false
  },
  draw: {
    value: function () {
      console.log("Drawing shape at: (" + this.x + ", " + this.y + ")");
    },
    writable: false,
    enumerable: true,
    configurable: false
  }
});

Object.seal(Shape);
Object.seal(Shape.prototype);

var shape = new Shape();
Object.seal(shape);

shape.x = 50;
shape.y = 50;
shape.moveTo(120, 85);
shape.draw();
// Drawing shape at: (120, 85)

console.log(shape instanceof Shape);
// true

This code can be easily optimized with class4js library.

‘use strict’;

var Shape = $class({
  __construct__: function () {
    this.__x = 0;
    this.__y = 0;
  },
  x: {
    get: function () {
      return this.__x;
    },
    set: function (value) {
      this.__x = value;
    }
  },
  y: {
    get: function () {
      return this.__y;
    },
    set: function (value) {
      this.__y = value;
    }
  },
  moveTo: function (x, y) {
    this.__x = x;
    this.__y = y;
  },
  draw: function () {
    console.log("Drawing shape at: (" + this.x + ", " + this.y + ")");
  }
});

var shape = new Shape({ x: 50, y: 50});

shape.moveTo(120, 85);
shape.draw();
// Drawing shape at: (120, 85)

console.log($is(shape, Shape));
// true

Features


Here you can get main keywords of class4js. To get more details, documentation should be visited.

  • $class - it is used to define class
  • $abstract_class - it is used to define abstract class
  • $static_class - it is used to define static class
  • $enum - it is used to define enum
  • $interface - it is used to define interface
  • $is - it is used to check type
  • $create - it is used to create object
  • $init - it is used to initialize object
  • $module - it is used to define module
  • $namespace - it is used to define namespace
  • $extend - it is used to define method to exiting type
  • $super - it is used to access parent's method

Conclusion


class4js module emulates classes and their related features introducing new sugar syntax. This syntax allows to write less code, to have better code reuse and allows to protect your library from undesirable modifications which can break your code. Another class4js advantage is that the library is written in JavaScript and doesn’t have any dependencies, and doesn’t need any extra tools to maintain it. Just include to your project and use it.

References


Saturday, June 1, 2013

Install classic gnome desktop in Ubuntu 12.04

To have gnome Ubuntu desktop on your computer, simply open terminal and type such command:
sudo apt-get install gnome-panel

Saturday, May 18, 2013

Installing PhantomJS on Ubuntu 13.04

PhantomJS is a headless WebKit with JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

I have a virtual machine in which Ubuntu 13.04 (64-bit) version is installed. After a few attempts, I found the way how to install PhantomJS 1.9 to my virtual machine.

Steps are bellow:

~cd /Downloads
wget https://phantomjs.googlecode.com/files/phantomjs-1.9.0-linux-x86_64.tar.bz2
sudo tar xvf phantomjs-1.9.0-linux-x86_64.tar.bz2
sudo mv phantomjs-1.9.0-linux-x86_64 /usr/local/share/phantomjs
sudo ln -s /usr/local/share/phantomjs/bin/phantomjs /usr/bin/phantomjs
To check is installed successfully run such command:
phantomjs --version

Friday, May 17, 2013

How to install Sublime Text 2 on Ubuntu

There is a good blog post how to install Sublime Text 2 on Ubuntu. This blog post can be found here.

Wednesday, May 15, 2013

SVG Loader

A few weeks ago I started working on project in which I used svg images. In internet I found a solution how to create svg loader.

To get source code of svg loader go here.

Tuesday, February 19, 2013

NoSQL Distilled: A Brief Guide to the Emerging World of Polyglot Persistence

A few days go I finished reading book NoSQL Distilled: A Brief Guide to the Emerging World of Polyglot Persistence.

The first part of the book concentrates on core concepts, including schemaless data models, aggregates, new distribution models, the CAP theorem, and map-reduce. In the second part, the authors explore architectural and design issues associated with implementing NoSQL. They also present realistic use cases that demonstrate NoSQL databases at work and feature representative examples using Riak, MongoDB, Cassandra, and Neo4j.

Tuesday, February 12, 2013

ASP.NET web api

Microsoft introduced new ASP.NET Web API framework. This framework allows to create rest-services. There is nice diagram in which you can see base components of web api and also to see how requests are processed in server. which represents web api infrastructure.


Full diagram can be found here.