Design Diary: Interesting JavaScript Bugs Born from My Bright Ideas

There are two (known today) very subtle bugs coming from my latest bright ideas about professional JavaScript. Actually there’s one bug today the other is a design ‘issue.’ The bug is characterized by a click event that fires and fires—like it’s in a loop. I wasted many hours (at ‘home’ and in the W2 labor camp) trying to look for loops. No dice.

It turns out (J’ah provides) that my Display Builder pattern did not account for running display builder procedures once at load time instead of again and again. I’m not going to take the time (this month) to find the exact proof of this but it appears that ‘wiring up’ events repeatedly with YUI can cause them to fire repeatedly.

The second issue (bug?) has to do with Firebug. You see, my interpretation of Douglas Crockford’s module pattern (published in JavaScript: The Good Parts which slightly different from the YUI pattern) means my code is full of this stuff:(function(){

SONGHAY.ui.Client = { //use ‘self’ instead of ‘this’ in here… };

var self = SONGHAY.ui.Client;

})(); According to Doug’s jslint.com, the variable self is not of a closure. This is because it appears after the object literal, SONGHAY.ui.Client. In fact, the variable self is marked “unused” by jslint.com (but, when the variable self appears inside of SONGHAY.ui.Client, it is not marked as an implied global—until further notice, this little detail is very important to me).

When debugging this stuff in Firebug, the variable self is assigned to “Window”—which I assume is a bug or me writing crappy JavaScript. I am not afraid to be told that I am writing crappy code—so any person reading this (with some documentation to back them up) please do take the time to inform me instead of snickering to yourself like a punk-ass Church mouse and moving on… I assure you: you will not be wasting your time… You see how deprecating I am when asking for help?

The question “we” might ask here is, “Why are you trying to avoid using the keyword this?” Here are a few links that cover the this issue:

• “Javascript—The this keyword”
• “A better understanding of JavaScript” Alexander Kirk: “If you call this function from within a HTML page via an onclick event, this is refers to the calling object (i.e. the link).”
• “Javascript Tutorial—Why The this Keyword Breaks” The Tallest: “The this keyword is never null or undefined in javascript—it always defaults back to pointing at the global object (in browsers this would be the window object).”

rasx()