Advice for Building Library Objects

When I wanted to find out how to correctly create my library object, no amount of Google searches seemed to help. As a result, much frustration and trial and error eventually gave me a limited idea of what to do. Now that I realise how easy it actually is once you know how, I thought it would be a good idea to write this article and bridge the gap for others as mystified as I was.

The article assumes that readers have a working knowledge of Javascript variables, operators and functions.

Step One: The Object

Let's create a library object...

var myObject;

What? You're not impressed? That's really all there is to it. All we've done is create a variable but because Javascript treats all variables as objects the hard part is already over. Essentially, our object will be just one big variable. In order to make our simple variable into a fully-fledged reusable library object, the trick is to define a number of properties and methods that all belong to it.

In order to define those methods and properties, we use the customary assignment operator (=) on our variable. After this, our properties are contained in curly braces to let javascript know that there are many properties to be assigned instead of a single value.

var myObject =
{
	// Properties and methods go here
}

So this is our library object, ready to receive instructions.

Step Two: Defining a property of the object

Our object, like children in the mind of Mr Gradgrind, is an empty vessel waiting to be filled with facts. For its first lesson, the object will learn a universal greeting and, in deference to years of programming tutorial convention, that greeting will be a string containing the words: 'Hello World!'.

var myObject =
{
	greeting: 'Hello World!'
}

Having defined the property with the name 'greeting', if we call alert(myObject.greeting), junior says his first words.

Lesson two involves expanding our fledgling object's vocabulary with a farewell, but this will also be part of our greeting property which is going to become an array. To make the conversion is quite simple:

var myObject =
{
	greeting: ['Hello World!', 'Goodbye World']
}

This format for assigning values to an array is fairly standard and should hold no surprises. greeting[0] = 'Hello World!' and greeting[1] = 'Goodbye World!'. We can also assign boolean and number values to an object's properties.

Step Three: Defining a method of the object

So far we've taught our object to talk, it's time to teach it to walk and this is done by creating methods. Methods are of course predefined functions of an object.

var myObject =
{
	greet: function()
	{
		alert(myObject.greeting[0]);
	},

	part: function()
	{
		alert(myObject.greeting[1]);
	},

	greeting: ['Hello World!', 'Goodbye World']
}

Including a window.onload = myObject.greet; call in the page will call the greet() method of the object and cause the alert box to pop up with the string defined at position 0 in the greeting array. No prizes for guessing then that window.onunload = myObject.part; will do the same with greeting[1] when the user leaves the page.

Incidentally, notice the comma after each of the new methods, this tells Javascript that we've finished defining this property/method and are moving on to the next. The last property/method in the object doesn't have a comma.

Step Four: Properties on the fly

It's possible to set properties of the object from within methods. To illustrate this, here's a rewritten version of our object so far:

var myObject =
{
	greet: function()
	{
		myObject.greeting[0] = 'Hello World!';
		alert(myObject.greeting[0]);
	},

	part: function()
	{
		myObject.greeting[1] = 'Goodbye World!';
		alert(myObject.greeting[1]);
	},

	greeting: []
}

When the greet() method of myObject is called, the code sets the value of the first array item to 'Hello World!' and the part() method sets the second item to 'Goodbye World!'.

We can even do away with declaring the array called greeting and just create the property at the same time as setting it. If we go back to using the greeting method as just a string variable, our code becomes:

var myObject =
{
	greet: function()
	{
		myObject.greeting = 'Hello World!';
		alert(myObject.greeting);
	},

	part: function()
	{
		myObject.greeting = 'Goodbye World!';
		alert(myObject.greeting);
	}
}

Now our object only takes on the property called 'greeting' if one of the two methods is called. Also, the property has the value given to it by either method.

Step Five: Why?

We've learned how to build a basic library object, assign it properties and methods and also learned how to use the two together. What are the benefits of this approach? In a word, encapsulation. All the vital code is contained within the object and properties of the object are better protected from being overwritten by other scripts.

It's important to realise that a library object is not the same as a constructor function. Once the object is defined, you cannot create new objects from it, it is the finished product. For this reason, library objects work best as portable, reusable blocks of code for manipulating a webpage's Document Object Model.

2005-11-27