Tag: oop

Object oriented Javascript with CommonJS in Titanium app

Class definition

// class definition + commonjs module
function ClassName() {
    // code...
}
module.exports = ClassName;

Use normal javascript function as class definition. Follow certain class / function naming convention to make sure you are not confused between a class or a function. For example, class name use Pascal case (ClassName), while function name use camel case (isFunctionName).

Public / private methods

By utilising the scope of function or variable definition, we can make that function/variable to be public or private

function ClassName() {

	// public method
	this.getData = function() {}
	
	// private method
	function processData() {}

}

After instantiating ClassName, we can invoke public method on the object. Private method will never be accessible outside of the class scope

var cls = new ClassName();
cls.getData();

Public / private properties / variables

function ClassName(args) { // `args` will be private variable

	// private properties/variables
	var pageNum = 1;
	
	// public properties
	this.version = 1.0;

	// getter
	this.getPageNum = function() {
		return pageNum;
	};
	
	// setter
	this.setPageNum = function(num) {
		pageNum = num;
	};
	
}

Similar to public method, only public properties are accessible from the object created. Developer can use getter/setter method to access private properties. Getter/setter method is useful if you want to keep private variables from being modified outside of the class.

It’s a good practice to use getter/setter on object properties, because we can control who can modify the object properties and when it is modified by external component, we can customize the behavior.

// for example, here is method set the page number of an object.
// in this setter method, we can customize the behavior in case 
// the external component provide invalid input
this.setPageNum = function(num) {
	if (num < 1) {
		num = 1;
	}
	if (num > maxNum) {
		num = maxNum;
	}
	pageNum = num;
}

Static method/properties

ClassName.getName = function() {};
ClassName.appName = 'test';

// static properties can also used as constant
ClassName.APP_ID = 'xxx';

Inheritance

There are no direct way to achieve class inheritance similar to what Java, Python or other languages that have true OOP feature. In Javascript however, we can extend an object functionality by defining it in another class.

function NewClassName() {

	var self = new ClassName();
	
	// extend object with new method
	self.processSomething = function() {};
	
	return self;

}

Another way to customize a class is that class must provide some kind of abstraction. So that when instantiating the class, we can pass some arguments to it to modify its behavior (kind of polymorphism).

function AnotherClassName() {
	
	var self = new ClassName({
		id: 1,
		name: 'abc',
		onClick: onClick
	});
	
	function onClick() {
		// code...
	}
	
	self.doSomething = function() {};

	return self;
	
}

// using the child class, we still can invoke methods from parent class
var acn = new AnotherClassName();
acn.getData();
acn.doSomething();

OOP the right way

Most of tutorials on object oriented programming tells the reader about how to do it rather than why we have to write it that way. This post attempts to explain why we write object oriented code the way it is.

Why object oriented? Object oriented is a way to write an application in components to reduce code repetition, enhance maintainability (able to unit test) & to let developer to focus on specific parts of app (separation of concern). Therefore, an app must be structured into components (component-based application).

In explaining class & objects in oop, it’s better to use real world example. Here I’ll take cache component of a web application. The basic functionality of cache component is to store app level data into temporary storage & retrieve it quickly. Now we can assume the basic class of a cache component is like this:

class Cache {
	public function get($key) {}
	public function set($key, $data, $expired) {}
	public function delete($key) {}
}

Notice we’re using public method. Public methods are used to expose functionality of a component for other components to use. This is the basic of designing an API, we’re defining how to use a component, what input it receives & what the output it’s expected to produce

class Cache {
	/**
	 * @param string $key
	 * @return array|false
	 */
	public function get($key) {}
	/**
	 * @param string $key
	 * @param mixed $data
	 * @param string|int $expired
	 */
	public function set($key, $data, $expired) {}

	// ...
}

How about the implementation? We know that cache component can use many types of backend, such as file based, SQLite, Memcached, Redis etc. Here is where inheritance is useful. Inheritance is used to either implement methods to a specific condition or to change the way data is processed (override).

class Cache {
	// ... public methods ...

	protected function purge() {}
	protected function getExpirationTime() {}
	protected function formatInputData() {}
	protected function formatOutputData() {}
}

Here we are using protected method. Protected is used on methods that are not going to be used by other components – these methods are going to be override by child class & used within the class itself. Let’s take a look at the example of child class implementations:

// using sqlite backend
class SQLiteCache extends Cache {
	private $connection;
	public function __construct() {
		parent::__construct();
		$this->connect();
	}
	private function connect() {
		// connect to database
		$this->connection = new PDO('sqlite::memory:');
	}
}

// using memcached backend
class MemcachedCache extends Cache {}

// using file-based backend
class FileCache extends Cache {
	// expose specific hidden methods to let extended class
	// to manipulate the data based on its backend
	protected function formatInputData() {
		if (!is_string($this->data)) {
			$this->data = serialize($this->data);
		}
	}
}

In SQLiteCache class, it has its own connect() method, that’s going to be used in this class only. That’s why it’s declared private. We may have connect() method in MemcachedCache to connect to memcached server, however the implementation is totally different from SQLiteCache, so we may write those methods separately without needing a parent class. Only create a parent class to combine child classes that has similar code (reduce code repetition).

In FileCache, we’re implementing formatInputData() because we couldn’t store PHP variable other than strings into file, so we serialize() the vars. This is the appropriate way to implement hook pattern (like in WordPress). Since this methods is declared in our base Cache class, this method can be called before storing the data into cache store, with different type of backend may already manipulate the data format to suite the backend requirement.

Let’s say this code is packaged in a module released by other developer and we’re not satisfied with the MemcachedCache implementation, we can extends that class and write our own implementation. This way, we’re not disturbing the module code & it’s important so that we don’t have to hack the module code again every time we want to update it.

class BetterMemcachedCache extends MemcachedCache {
	protected function getExpirationTime() {
		// return time-to-live instead of expiration timestamp
		return strtotime($this->expired, 0);
	}
}

Summary: Write OOP code in components, public methods are the API of the components, protected methods are for specific implementation & private methods are for usage within that class only. In general, we may have a lot of protected methods (to achieve hook pattern) and a few private methods (only to group repetitious code).