Javascript Inheritance Basics

I recently had the pleasure of writing a small AJAX application library based around/wrapping Ext JS.
Due to the requirements and the way the original application was devised, I needed to always make sure I pass a specific parameter on every AJAX request.
Here’s how I did it using my version of JavaScript prototypal inheritance (it may or may not be the right way to go about it, but it works for me).

One thing to note is I did wrap a lot of the Ext functionality, for future proofing really, so if some developer comes along and isn’t an Ext fan, then they can change the base library without changing code throughout the application.

The Javascript Parent Class

First we set up our base library to perform the common functionality needed by the application,
including making the AJAX request.

var MyApp = function() {
	var version = 1;

	// private members and methods
	var _insertModule = function(moduleName) {
		// ...
	}

	/**
	 * Common param needed through the application
	 *
	 * @param int programId
	 * @access private
	 */
	var _programId = null;

	return {

		/**
		 * Accessor set.
		 *
		 * @access public
		 */
		setProgramId : function(int_id) {
			_programId = int_id;
		},

		/**
		 * Accessor get.
		 *
		 * @access public
		 */
		getProgramId : function() {
			return _programId;
		},

		loadIcon : '/images/icons/icon-loader.gif',

		/**
		 * Wraps Ext.Ajax to allow changing of Libs in need be.
		 */
		Ajax : function(config) {
			return Ext.Ajax.request(config);
		},

		fromJSON : function(data) {
			return Ext.util.JSON.decode(data)
		},

		toJSON : function(data) {
			return Ext.util.JSON.encode(data);
		}
	};
};

So that’s the foundation for the application library. Like I said It wrap Ext so any developers who want to switch it for YUI or JQuery need only change the base file.
These examples don’t do much really, I’ve obviously trimmed out a large amount of code so it fits on the blog page!

Using the prototype property to extend the base class

The class that will extend the base will be a small class representing the notes or email section of my application.
The function documented sends a request to the server in the event when a user clicks to mark a note as read.

MyApp.Note = {

	/**
	* Marks a note as read.
	* @param int note id
	* @param int page id
	* @param img (optional image parameter)
	*/
	markAsRead : function(note_id)
	{
		if(confirm('Are you sure you would like to mark this note as read?'))
		{
			// set to spinner temporarily.
			//this.Get('note_icon_' + note_id).dom.src = this.loadIcon;

			this.Ajax({
				url: '/messaging/note_mark/' + page_id + '/',
				method :'get',
				params : {
					'note_id' : note_id
				},
				success: function(http_response)
				{
					// change the icon to an open envolope to indicate as read...
					alert('success');
					// handle the response...
				},
				failure: function(http_response)
				{
					// handle the failure
				}
			});
		}
	}
};

// IMPORTANT!! we set the prototype to the base object.
MyApp.Note.prototype = MyApp;

So as you see we set the prototype to the base object, that means that the this keyword now has access to all the methods of the Base object. Cool eh?
I’ve tried to think of this as typical class like inheritance, but you can’t, the best way to think of it is static classes extending static classes just with this thrown in for good measure 🙂

So what’s the benefit?

Well this meant in my case I was able to hijack the parameters of the Ajax request and inject some new ones before it was sent to the server. So my new Ajax method looks like this:

		/**
		 * Wraps Ext.Ajax to allow changing of Libs in need be.
		 */
		Ajax : function(config) {
			if(!config.programId)
			{
				config.programId = this.getProgramId();
			}

			// debugging? force GET requests
			//config.method = 'GET';

			return Ext.Ajax.request(config);
		},

Howaaazattt?!?!

Leave a comment if you’re unsure whats going on here and I’ll try my best to explain it.

Douglas “the man” Crockford also has a great piece on his way of dealing with the lack of classes in JavaScript. See his piece here

Javascript Objects for Noobs

Well whats this you say, 2 posts in the space of 10 days… yes I have a little blogging fever, and thanks to the newest addition of WordPress making it all the more pleasurable.

Also Thank You to Aaron @ ExtJs for taking the time to read my post on Inline Editing with Ext and offer some friendly advice and feedback. I’ve not got around to trying out his solution yet, but will post (again, yeah, whoop!) when i do.

Alright that last bit was too nerdy all the whooping, I’m starting to sound American… and there goes my audience.

Ok down to business of Javascript Object goodness. This is gonna be brief, as I’m not totally clued up on it yet. I’ve had top force myself to enjoy this stuff as it work forced upon me for work after I took up from a contractor.

Being a season PHP developer I’m used to seeing

class Bla
{
public aMethod(){

}
}
$a = new Bla();

Yes, PHP is great for that, as is C# and Java for all the pre defined class horseyness. Javascript however has no classes. Your objects are objects straight off the bat.

JSON/Object Literals

Firstly what a wanky title object literals, my arse… they’re more like a static class. Sorry to get sweary but they are. When ever you see something like this:

var MyObject = {
aProperty : 'propertyvalue',

getName : function(){

}
}

It means people, that its already 100% an object. Took me a while to get my head around but there’s no need to do

var x = new MyObject();

It can simply be invoked in a static manner (or what we PHP dudes would class as static) thus:

alert(MyObject.getname());

Easy part over..

Proper Javascript objects, ones that you create instances of are created using a function. Now I’ve seen so many crap examples of this its untrue, you teach me nothing sometimes internet…here’s a better one. Well OK its average too I was pushed for time and have rambled enough.

I want to show you how I start out with creating my javascript objects first of all. I used the following template:

var ObjectName = function(config){

// private variables go here.
var _private1 = 'not visible form outside the object.';
var _private2 = '';

// private functions
var _privateFunction = function(){

}

var _init = function(){
// another private function.
}

// public property
this.privelidged = "i'm priveliged";

// privelidged methods here like this.
this.privelidgedMethod = function(){
/**
* this method has access to our private parts of our obejcts so here
* we can do this kinda thing _privateFunction();
*/
}

// any constructor code goes here.
_init();

// you can call private methods here and the ones created with this.methodName
this.privelidgedMethod();
}

This will leave your object interface or API looking like this when instanciated.

So the only callable method is privelidgedMethod not bad eh? Oh and use Aptana too – it rocks.

If you want to make anything truely public you’d add it to the prototype of the object you just created as an Object Literal (yeah wanky name thingy again!).

ObjectName.prototype = {
property : 'value',

render : function (){
// we still have access to our other variables not the private ones tho.
// however if our prvelidged ones call private ones who are we to judge!!
alert(this.privelidged);
}
}

var x = new ObjectName();
x.render();

This is a topic that I could write more about but once again, I’ve bored myself… any problems leave a comment and we’ll have a chat!

This post was written using Zend Studio hahahah