I heard about this word MetaProgramming in my class and yawned ! One more meta to this world. The instructor introduced it in context of Ruby’s capabilities and I thought will I or anyone use it? But only recently I realized its usefulness in used it sucessfully in my pet language- JavaScript.
Basically, metaprogramming is to write code that will write code. So, you write 1 block of code and that code will create some 10 or n blocks of code. And this code will also be executed/compiled/interpreted at the same cycle. So you can see the results of this along with other pieces of code.
I was working on this Yahoo Maps project using Yahoo maps Ajax API, and I had to create as markers as there are accomidations in the database. I found a clever way of populating everything into JS arrays and then iterating over the array to create markers and i was successful. So the code is something like this
for(var i=0;i<accom_type.length;i++)
{
var geoPoint = new YGeoPoint(lat[i],longt[i]);
marker[i]=new YMarker(geoPoint,markerImage(accom_type[i]),”marker”+i);
marker[i].addAutoExpand(title[i]);
var markerMarkup=”Information about the hotel”;
YEvent.Capture(marker[i],EventsList.MouseClick,
function (){
marker[i].openSmartWindow(desc[i]);
});
map.addOverlay(marker[i]);
}
So for each marker i have to add a YEvent to open a smart window. I have tested this code in FF and thought its working fine and I am done. Only later I realized IE had started shouting at me with a bug.
And I started the usual hate mantra against IE and started looking at the code more closely- no use I am using standard JS with no extras. IE is breaking at the exact line
marker[i].openSmartWindow(desc[i]);
with marker[i] being null. Then why is Firefox not breaking? So to test it I put a hardcoded string in the smartwindow
marker[i].openSmartWindow(”dummy description”);
Ah then I got it, only one marker event is being created all the times. This is one of those strange moments you feel IE has helped you than FF to iron out the bug.
Now, how to solve this? I have to create events for each of the markers seperately otherwise the code is not working. But I can’t write manually an event for every marker and also markers might increase in future. So almost first time I did not use google but I used my knowledge of JS and looked into JS definitive guide for reference for eval. And aha, now I see it how to code this intelligently and put events code in an eval statement and it worked !
So the final code looked like this
for(var i=0;i<accom_type.length;i++)
{
var geoPoint = new YGeoPoint(lat[i],longt[i]);
marker[i]=new YMarker(geoPoint,markerImage(accom_type[i]),”marker”+i);
marker[i].addAutoExpand(title[i]);
var markerMarkup=”Information about the hotel”;
map.addOverlay(marker[i]);
//We have to add as many events as there are markers
// To avoid verbosity using eval to create kind of meta JS
eval(”YEvent.Capture(marker["+i+"],EventsList.MouseClick,”+
” function (){”+
“marker["+i+"].openSmartWindow(desc["+i+"]);”+
“});”);
}
This code gave me a lot of satisfaction since I’ve been able to figure out something on my own and also use knowledge gained in my class ! A MS degree is definitely worth it !