Posted: Wed Jan 23, 2008 6:28 pm Post subject: Plug 'n Play Javascript Widgets
Plug’n Play Javacript is the name I gave to a technique that is not new I think, but that I tend to use more an more. It’s a way of writing my widgets in a manner completely independent from the presentation (HTML code), and most reusable as possible in other projects. The main theory focus on the usage of the elements class name.
To demonstrate this technique, take a look for example at this simple fade in / fade out slideshow. If you look at the code you can see that there isn’t much dependency between the html code and the javascript code. Basically the only dependency it’s that we’re calling a element based on it’s id. If for any reason we decide to change the id of the element, we need to get back to our javascript code and change it there to. It’s not such a big issue in this particular example, but even though I’ll make it simpler. Using my good old (not so old) dom handling toolkit, I’ll write a method that after the page loads, checks for a certain class name, slideshow for example, and converts the found elements into slideshows:
for (var i = 0; i < slideshows.length; i++) {
new SlideShow(slideshows[i], 25, 500, true);
}
});
Now we can add or remove or alter slideshows without touching the javascript code… At least looks like that, but you’re probably asking “Oh yeah, what if I want to change the initialization parameters like the fading time and the stoppage time? I have to go to the to mess in the javascript code anyway…”, and conclude with “This guy is really stupid!”. But now I fight back, I’m not that stupid, let me introduce you the real stuff… Code first:
for (var i = 0; i < slideshows.length; i++) {
var args = slideshows[i].className.match(/slideshow_\d+_\d+_(t|f)/)[0].replace(/^slideshow_/, '').split('_');
new SlideShow(slideshows[i], parseInt(args[0]), parseInt(args[1]), args[2] == 't');
}
});
Hum, tricky code hu? I made it unclear on purpose, I wanted to trick you, he he… If you take a look at the gelElementsByClass method on my dom handling toolkit, you’ll easily see that we can safely use regular expressions. So, the idea is use the class name not only to identify the widget, but to pass the arguments as well. So, any element with a class name with the form of slideshow_\d+_\d+_(t|f) (slideshow word plus an underscore, a number, another underscore, another number, yet another underscore, and finally a t or an f), will be identified by as a slideshow widget.
The var args = ... big line of code can be splitted in a more friendly way:
Code:
var args = slideshows[i].className.match(/slideshow_\d+_\d+_(t|f)/); //extract what we want from the className
args = args[0]; //this is perfectly safe, that regexp was tested once when calling getElementsByClass
args = args.replace(/^slideshow_/, ''); //remove the slideshow keyword, we don't need it anymore
args = args.split('_'); //split the string using the underscore as the split base
The first line is needed, because an element can have multiple class names, and our slideshow definition may not be alone.
After we get our args array, we can call the costructor of the slideshow, passing the element, parseInt(args[0]) which represents the fading speed, parseInt(args[1]) that represents the stoppage time and args[2] == 't', which is a boolean stating if we want the slideshow to stop on mouse over.
Now, we can define the same slideshow in the example (from the slideshow page) just adding the class name “slideshow_25_500_t”, 25 as the speed, 500 as the stoppage time and t, stop on mouse over…
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum
