Convert standalone Javascript to widget -
we have 8,300-line javascript application, implements interactive diagram hand of bridge. it's written 250 top-level variables, 250 functions, 130 lines of driver code outside of functions, , 30 hard-coded element ids referenced in various places; it's entirely self-contained, no libraries used. gets parameters url query string. way use on web pages load in iframe.
this implemented 3 files:
handviewer.html
- page point in iframes. contains 70 lines of html required divs, , loads css , js (calledhandviewer-old.html
in test below)hvstyles.css
- css pagehandviewer.js
- javascript code described above
in handviewer.html
, active elements have inline onclick
attributes call functions in handviewer.js
.
the problem when embed lots of these on page, performance suffers. iframes pain begin with, , lots of them pointing same server run connection limits. , though they're pointing @ same script, parameters in query string act cache-buster. loading page 12 of these diagrams takes 3-5 seconds reasonably fast browsers. looking @ timeline, can see loads staggered. i'd convert widget can applied div, parameters inline arguments.
a test page these 12 iframes at:
http://dev.bridgebase.com/barmar_test/many-hv-old.html
i'm preparing hand -- i'll wrap function around whole thing, replace ids classes, document.getelementbyid(x)
becomes thediv.getelementsbyclass(x)[0]
, , rewrite function extracts query string parameters them options argument. wonder if there tools around can assist in process. if has done conversion this, have techniques help?
i took @ code ...
if(carddivs[seat][suit][i].innerhtml=="") ...
don't that. make classic js array of booleans mark "empty items".
and generally, don't access dom much. seems, whole "model" (from mvc terminology) , application state stored in dom.
Comments
Post a Comment