Mike was refactoring an old web application written in Perl. We joke about Perl being a “write only language,” but the original developer wanted to take that unreadable attitude to the JavaScript front-end portion of the application.
function setup() {
position('m1',46,220);
position('m1g',33,200);
position('m1c',33,200);
position('m2',46,330);
position('m2g',33,310);
position('m2c',33,310);
}
The strings reference the IDs of various elements on the page. The IDs themselves, however, mean nothing. Why m1g? No idea.
function offall() {
hideitem('m2i1');
hideitem('m2i1c');
}
As you can also see, there’s no attempt to use CSS classes or other selectors to make it easy to find all of the UI widgets that need to be hidden- one simply needs to access each one by its meaningless ID value.
Which also means when it comes time to show elements, it gets nasty:
function rollonmenu(item) {
clearcurrenttimeout();
offall();
overmenu=1;
highlight(item);
if (item=='m1') {
}
if (item=='m2') {
showitem('m2i1');
showitem('m2i1c');
}
if (item=='m3') {
}
if (item=='m4') {
}
if
}
All this is in the service of hiding or showing sub-options based on which item a user has selected. And it’s cryptic, verbose, and ugly. But this isn’t the real WTF in this code. TRWTF is how they insert the menu into the web page:
var _targ = document.getElementById('menu');
_targ.innerHTML='<div ... 10441 characters all on one line ';
The HTML describing this UI widget is a single JavaScript string, all on one line.
Remy Porter
Source link
