Convert standalone Javascript to widget

We have an 8,300-line Javascript application, which implements an interactive diagram for a hand of bridge. It's currently written with about 250 top-level variables, 250 functions, about 130 lines of driver code outside of functions, and 30 hard-coded element IDs referenced in various places; it's entirely self-contained, no libraries are used. It gets its parameters from the URL query string. So the way we use it on web pages is to load it in an iframe.

This is implemented as 3 files:

  • handviewer.html - This is the page we point to in iframes. It contains about 70 lines of HTML with all the required DIVs, and loads the CSS and JS (called handviewer-old.html in the test below)
  • hvstyles.css - The CSS for the page
  • handviewer.js - The Javascript code described above

In handviewer.html, the active elements have inline onclick attributes that call functions in handviewer.js.

The problem is that when we embed lots of these on a page, performance suffers. Iframes are a pain to begin with, and lots of them all pointing to the same server run into connection limits. And even though they're all pointing at the same script, the parameters in the query string act as a cache-buster. Loading a page with 12 of these diagrams takes 3-5 seconds with reasonably fast browsers. Looking at the timeline, you can see that the loads are staggered. So I'd like to convert it to a widget that can be applied to a DIV, with the parameters as inline arguments.

A test page with these 12 iframes is at:

I'm preparing to do this by hand -- I'll wrap a function around the whole thing, replace the IDs with classes, so that document.getElementById(x) becomes theDiv.getElementsByClass(x)[0], and rewrite the function that extracts query string parameters to get them from an options argument. But I wonder if there are any tools around that can assist in the process. If anyone has done a conversion like this, do you have techniques that help?


I took a look at your code ...

if(cardDivs[seat][suit][i].innerHTML=="") ...

Don't do that. Make a classic JS array of booleans to mark "empty items".

And generally, don't access DOM too much. It seems, that your whole "model" (from MVC terminology) and application state is stored in DOM.

Need Your Help

Combine Gyroscope with accelerometer to get heading

android orientation accelerometer gyroscope azimuth

I'm using an Android device to get the heading(azimuth, or yaw angle).

Open Internet Explorer browser with POST parameters

c# windows-phone-7 post xna windows-phone

I would like to open a webpage in Internet Explorer using the WebBrowserTask but I would also like to pass a POST parameter(s) as well.