Javascript's hidden gems

· javascript ·
Apr 4, 2004 by Aleksandar Vacić 3 minute read

I know I did not write for over a week now. I’m damn busy. Again, it’s Tim Connor’s fault. He left this fantastic link in the comments and after I read it, I was hooked so much that I’m overburning.

Mr. Crockford opened up a whole new level of Javascript programming for me. Before it, I was finally having a grip on how Javascript should be used in standards oriented pages. There, JS is not required to complete an action, but if you do enable it, you will complete it a lot quicker. The secret can simply be called..

Class abuse

As my latest WCH shows, I use one particular class to make the script working in IE5.0. I add WCHhider to any element that should be hidden when WCH is applied. That class is not in any CSS file, it is simply there as a marker.

This is a mild case of abuse.

Worse one is where I deliberately place classes on certain elements, just to be able to find them afterwards, when page is loaded. Using Mike Foster’s excellent X library you can do wonders. Here, I’m interested in xGetElementsByClassName, which returns an array of elements that have passed class name. Since all modern browsers support multiple class names, this is a sure-hit strategy.

What can you actually do with this? Well, let’s say that you have an unknown number of links on the page that all opens up the same link, but in the new window (see here, Horse form and Live commentary). There are various ways to open it up, but I wanted an accessible, yet usable stuff. Accessible means that even people with JS off can see this, and those with JS on will see it in new window.

To achieve that, I placed a regular A element, with href equal to link which should open in new window, and one dummy class.

<a href="link-to-open" class="TTwnd">....</a>

Now, on window.onload, you need to find all the links with this class and process all of them like this:

window.onload = function() {
  var aTmp = xGetElementsByClassName("TTwnd", document, "a");
  for (var i=0;i<aTmp.length;i++) {
    aTmp[i].onclick = function() {
      sHref = this.href;
      window.open(sHref...);
      return false;
    };
  }
}:

Very neat and very useful.

Private members and inheritance

So, just when I (more of less) finished recoding all my scripts to that, inheritance comes. I have developed several large JS applications, but I always disliked the fact that each function could call any other. Even though it is fastest to code, it also creates a whole a lot of mess, with no clear structure.

I was always trying to somehow divide my scripts into namespaces (for the lack of better word). That is why you see ADXM_, WCH_ and other prefixes. Douglas Crockford showed that Javascript can have private properties and methods as well as some sort of protected and public ones (not identical to Java or C# with same name).

So, now I’m recoding all of it again, using the parasitic inheritance to gradually build my objects. I have recoded WCH and ADxMenu to use this, only I don’t have time to post them. I’m damn busy recoding commercial work into this so I can use all the benefits of it. That work features 5 large Javascript modules, all calling each other here and there.

Now, instead of doing..

if (typeof(BS_BodyHide) != "undefined" && ...) ...

…I can use much cleaner form..

if (BS && ...) ....

This is the simplest example - possibilities are endless. And I just love it when I see something like this now:

LU.Market.Start();
LU.Sel.Start();