[JS] Correct creeren / destructen van js objecten

[vorlox]

Beste Tweakers,

Ik heb een aantal vragen over het goed opzetten van een javascript object.
Voor mijn eigen voorbeeld heb ik een treeView als voorbeeld gepakt. (Niet dat er niet genoeg te vinden zijn maar dit is puur proberen te begrijpen / leren)

Even klein stukje van mijn ontwerpje (Alle inrelevante dingen heb ik weggelaten)

code:

(object) base
    (methoden)
        httpRequest
        onHttpComplete

(object) treeView extends base
    (Properties)
        (array) childNodes
    (methoden)
        addNode
        draw

(object) treeNode extends base
    (Properties)
        (string) id
        (string) name
        (string) childLoadUrl
        (bool) childsLoaded
        (object) parentUl
        (array) childNodes
    (methoden)
        draw
        addNode
        expand
        collapse
        loadChildnodes

Bovenstaand heb ik in een werkend script verwerkt.
Echter een aantal vragen zijn gerezen

In het treeView object maak ik altijd een lege UL aan zodat je altijd een parent Ul object heb.
Vervolgens plak ik aan alle nodes die via de addNode van of de treeView of een treeNode binnen komen het parent object.
Zodat elke treeNode dus een oParentUl heeft.
Bij de method "draw" uit het treeNode object maak ik een UL object

code:

treeNode.prototype.draw = function()
{
    var oSpan = document.createElement('span');
    oSpan .innerHTML = this.name
    this.oLI = document.createElement('li');
    this.oUL = document.createElement('ul');
    this.oLI.appendChild(oSpan);
    this.oLI.appendChild(this.oUL);
}

Wanneer ik vanuit de treeView de methode "draw" aanroep zal deze dus door alle childnodes heen lopen en daar ook de method "draw" aanroepen.
Dus als de treeView 2 keer gebouwd word, dan worden er dus nieuwe javascript HTML objecten aangemaakt.
Nu kan ik natuurlijk wel alles eerst op NULL zetten, maar daarmee lijk je alleen de referentie weg te halen maar niet het object te destructen.
Ook heb ik nog wat geprobeerd met removeNode, maar het lijkt niet uit te maken.
Je zou toch verwachten dat wanneer je het object overschrijft dat de garbage collector het oude object opruimt? (Ik kan hier geen defenitie voor vinden)

Verder is dus elke node een nieuw object, terwijl het ook met een multi array af zou kunnen en een paar extra methods in de treeView.
Volgende vraag gaat dus over het destructen van objecten, ik kan er zeer weinig over vinden, behalve dan dat het niet zou kunnen.

Iedere keer als je zegt document.createElement wordt er toch een object aangemaakt. Moet je dan iets doen met window.onUnload
en dan zelf een array met objecten bijhouden zodat je bij unload al deze aangemaakte objecten via document.removeChild weer wegt dient te halen?

Dan als laatse een vraag over het expanden van de treeNodes.
In elke treeNode heb ik een expand/collapse functie, de expand functie heeft echter een extra eigenschap, namelijk het controleren of de childNodes geladen zijn.
Zo niet dan zal deze treeNode nu intern eerst de methode "loadChildNodes" aanroepen alvorens te expanden.
Zo wel dan kan meteen expand aangeroepen worden.
Het voordeel aan de ene kant is dat je een soort caching mechanisme hebt, aan de andere kant als er dus iets veranderd zal je dat dus niet meekrijgen indien je node al geopend had.
Is het dan beter om het niet vast te houden en toch bij elke keer expand een nieuwe httpRequest doen?

Soms als ik aan het testen ben zie ik mozilla,ie oplopen tot wel 80/90MB. Dus ik moet haast wel een hoop open referenties hebben.

[RobIII]

vorlox schreef op zaterdag 02 februari 2008 @ 01:32:
Het voordeel aan de ene kant is dat je een soort caching mechanisme hebt

Je omschrijft hier 'lazy loading' (ook wel 'lazy fetching' of 'lazy initialisation'); een redelijk veelgebruikt concept. Met die termen in Google zou je al het 1 en ander moeten kunnen vinden omtrent een aantal van je vragen.

offtopic:
Mijn excuses voor de korte reply op je nette topic; het is me nu even te laat en ik ben te gaar om er verder op in te gaan

[ Voor 9% gewijzigd door RobIII op 02-02-2008 01:45 ]

[vorlox]

Super, ik kende dus die "lazy fetching term" niet maar heb net even een stuk zitten lezen op www.devwebsphere.com en daar staan toch idd wel weer wat dingen die me doen nadenken.
De overhead op de server van een aantal kleine calls is dus in princiepe hoger dan 1 grote call.
Met andere woorden in deze context zou ik dus de hele treeview direct moeten laden, of met het reeds ingebouwde caching mechanisme blijven werken.
Echter als er dan in de tree weer wat veranderd moet je dus de hele tree herladen. ?he begrij p ik he tnou niet.... laat maar (Bedankt Rob tis idd laaat) morgen weer verder. Fuck nee eerst carnavallen

[vorlox]

Uh mag ik deze weer ff omhoog *kicken*

Haha thanks ja schitterende carnaval gehad. hehe althans de onderdelen die ik me kan herinneren ghe.

Ok prima ik ga kijken wat hij doet, het lijkt er idd op dat firefox bij meerdere pagina's oploopt in geheugen... shit nooit echt goed naar gekeken. Ik (stom) dacht dat de browser na elke request zijn (mijn) zooi wel zou opruimen, maar das toch niet helemaal waar.

Ik ga es eveneen test scrippie scrijven waar ik alleen maar via document.createElement nodes ga aanmaken welke ik zelf overschrijf.

[ Voor 88% gewijzigd door vorlox op 07-02-2008 08:12 ]

[f.v.b]

Goede carnaval gehad?

Ik vind 90MB niet vreemd voor Firefox. Die van mij zit ondertussen op het dubbele. Na een paar dagen werken zit ie vaak op de 500 MB.

Ga eens wat stress testen om geheugenlekken op te sporen. Dus laat je javascript eens duizend keer de treeview opnieuw opbouwen. Wat gebeurt er dan? Is het reeel om aan te nemen dat iemand ooit duizend keer de treeview opnieuw moet inlezen?

En Firefox 2 heeft een aantal bekende geheugen lekken. Binnenkort verholpen in Firefox 3. Laat je nu niet gek maken door een brakke browser.