Prajwal Tuladhar’s Blog
 
programming, life and some random thoughts

Mar 28 2009

Flexible function call in JavaScript

Published by Prajwal Tuladhar at 8:19 pm under JavaScript, PrototypeJS

If you have used popular JavaScript libraries like PrototypeJS, jQuery and so on (I have used only PrototypeJS and Adobe Spry), you may have noticed the flexibility of calling their API class and methods. Something like this while using PrototyeJS AJAX API:


new Ajax.Request(url, {
	onSuccess: function(response)	{
		//do something
	}
	onException: function(response, exception)	{
		//do something
	}
	onFailure: function()	{
		//do something
	}
});

I have figured out that creating a method that can handle such call is certainly not so hard and in my opinion, it does provide some level of flexibility in the code.
Here is the same code:


function clickIt(options)	{
	this.message = "";
	this.afterClick = function()	{};

	for (var key in options) {
        this[key] = options[key];
    }

	this._execute = function()	{
		alert(this.message);
		this.afterClick();
	}

	this._execute();
}

The above method accepts a single object as an argument with two properties: message and afterClick and this._execute() is a kinda private method (JavaScript does not have an explicit access modifier). Now to call the above function:


Event.observe(window, 'load', function()	{
	$('iclick').observe('click', function(e)	{
		Event.stop(e);
		new clickIt({
			message: "This is some message",
			afterClick: function()	{
				if (confirm("Are you sure"))	{
					window.location.replace(this.href);
				}
			}
		});
	});
});

Since {} is regarded as object in JavaScript so one can use it to make a function/class more flexible and extensible. But since, users calling this class will have no knowledge what arguments are acceptable so, documentation plays crucial role (If you are creating an API then, the success and usability of that API heavily depends on the quality of documentation that acts as valid contract between interface and implementation code).


  • if you want to keep some variables or methods private in a javascript object you can simply do so by simply declaring them as a variable of the constructor.

    There are other ways of doing it using closure.

    I happened to find your post while researching for custom event handling after I posted an article on javascript variable scoping and ways to emulate private and privileged access to variables and functions.
    Good to see some fellow nepalese getting off their backside and putting effort to write up useful posts.
    I started blogging entirely for my selfish reason so that I can document my lessons learned someplace handy.

    If you want to share the lessons I learned on javascript variable scoping please visit
    http://www.anzaan.com/2009/05/javascript-variab...

    I have been using on YUI library due to its modularity and haven't used prototype although I used it briefly when I was learning javascript.
    May be we can share our experiences learn a few things someday.

    keep up the good work.
  • Hey, sorry for replying late.
    I did go through your post and it was nice post.
    My above post is just a fraction of your post indeed; just showing how to call static variables + methods from JS.
    Well, I haven't use YUI but whenever I have to create conventional class in JS I prefer using prototype API http://www.prototypejs.org/api/class/create
blog comments powered by Disqus

RSS Feed
Subscribe by email
Follow me @ Twitter