CODEWITHSUNDEEP
javascriptwidgetrefactoring
Barmar
Barmar

Reputation: 781058

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:

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:

http://dev.bridgebase.com/barmar_test/many-hv-old.html

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?

Upvotes: 0

Views: 907

Answers (1)

Ivan Kuckir
Ivan Kuckir

Reputation: 2549

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.

Upvotes: 1

Related Questions