[JS] Reference naar variabele

[Mei]

Voor zover ik weet ondersteunt JS geen letterlijke references naar variabelen, maar alleen naar objecten. Is hier misschien een soort workaround voor?

Mijn situatie: Ik zit met een loop die een X aantal keren uitgevoerd moet worden. In die loop moet afhankelijk van een waarde van een meegegeven variabele een style property van een element aangepast worden. Ik kan nu in elke loop een check doen welke waarde deze variabele heeft en aan de hand daarvan de goede property aanpassen, maar handiger is het als ik standaard een reference naar de goede property door kan geven en altijd die reference ga aanpassen. Ik wil het script zo licht mogelijk houden (JS is al snel te zwaar), maar ook zo onderhoudsvrij en flexibel mogelijk. References zouden dus een ideale uitkomst zijn.

Alvast bedankt

[BtM909]

(JS is al snel te zwaar)

Even heel kort door de bocht: je hebt het over het aanpassen van een property. Je kan die toch in standaard variabelen stoppen en die variabele kunnen aanpassen. In hoeverre wil je echt references naar variabele en met welk doel?

[Mei]

JS is best belastend voor de client. Ik merk nu op mijn computer (iMac mid 2007) al dat hij soms hapert als een ander programma druk bezig is.

Nu moet ik zegmaar het volgende doen:

JavaScript:

if(var=value1)
{
style.prop1=newvalue;
}
if(var=value2)
{
style.prop2=newvalue;
}
if(var=value3)
{
style.prop3=newvalue;
}

Maar zoiets zou erg mooi zijn:

JavaScript:

style.var=newvalue;

Waarbij var dus een reference naar de style property is.

[TeeDee]

Afaik kan je een var niet converteren naar een property.

Edit: schoot me net te binnen of je het misschien via getters/setters kan doen, maar ach, het is al laat en dat sloeg vziw nergens op

crisp schreef op woensdag 07 november 2007 @ 22:43:
[...]

dat kan toch?

JavaScript:

var prop = 'backgroundColor';
element.style[prop] = 'black';

Och, zo had ik het iig nog niet bekeken.

[ Voor 95% gewijzigd door TeeDee op 07-11-2007 22:44 ]

[crisp]

Mei schreef op woensdag 07 november 2007 @ 21:22:
Maar zoiets zou erg mooi zijn:

JavaScript:

style.var=newvalue;

dat kan toch?

JavaScript:

var prop = 'backgroundColor';
element.style[prop] = 'black';

En sec gezien zullen een paar if-jes echt geen performance-drain zijn, zelfs het aanpassen van die style-property is dat niet. Wat performance kost is het renderen van die change door de browser, maar daar ontkom je niet aan (hoewel als het om veel wijzigingen gaat het soms slim is om vooraf de display property op 'none' te zetten en achteraf weer te unsetten, of om in 1 keer mbv de cssText property alle styles tegelijk toe te kennen).

[ Voor 43% gewijzigd door crisp op 07-11-2007 22:46 ]

[Mei]

crisp schreef op woensdag 07 november 2007 @ 22:43:
[...]

dat kan toch?

JavaScript:

var prop = 'backgroundColor';
element.style[prop] = 'black';

Hmm, stom, helemaal vergeten dat dat kon

En sec gezien zullen een paar if-jes echt geen performance-drain zijn, zelfs het aanpassen van die style-property is dat niet. Wat performance kost is het renderen van die change door de browser, maar daar ontkom je niet aan (hoewel als het om veel wijzigingen gaat het soms slim is om vooraf de display property op 'none' te zetten en achteraf weer te unsetten, of om in 1 keer mbv de cssText property alle styles tegelijk toe te kennen).

Ook niet als je 100 keer een blok van 10-20 if-statements moet doorlopen?

Wat cssText betreft, ga ik eens achteraan. Klinkt wel interessant (Hoewel niet bruikbaar voor script)

[crisp]

Mei schreef op donderdag 08 november 2007 @ 09:17:
[...]
Ook niet als je 100 keer een blok van 10-20 if-statements moet doorlopen?

2000 if-jes valt nog wel mee hoor
In jouw voorbeeld zou ik overigens sneller kiezen voor een switch, maar zorg er in ieder geval voor dat je de condities die het meest waarschijnlijk zijn vooraan zet

[Mei]

Ik hoor de ene keer dat je switches maar beter kan vermijden en de andere keer dat ze handig zijn...

Ik heb mijn code nu zo omgebouwd dat de style properties als een array benaderd worden (thanks Crisp ) en dat de if-statements helemaal aan het begin, dus nog voor de loops uitgevoerd worden. Heb zo mijn code ook flink kleiner kunnen maken. Wat me anders per style property nog 30 a 40 regels zou kosten kost me nu goed 30 regels per een heleboel properties (dit omdat dingen als kleuren veranderen anders gaat dan breedtes enz.)

[BtM909]

Overigens, kan je nog een snippet plaatsen van wat je wilt. Wellicht dat we je verder kunnen helpen met optimaliseren

[Mei]

Mijn snippet telt momenteel 300 a 350 regels Het moet een soort library worden.

Maar zit nog wel hiermee:

JavaScript:

if(oParams.color!=undefined)
{
    oParams.style='color';
    blapie._fx_initColor(blapie._sys_cloneParams(oParams));
}
if(oParams.backgroundColor!=undefined)
{
    oParams.style='backgroundColor';
    blapie._fx_initColor(blapie._sys_cloneParams(oParams));
}
if(oParams.top!=undefined)
{
    oParams.style='top';
    blapie._fx_init(blapie._sys_cloneParams(oParams));
}
if(oParams.left!=undefined)
{
    oParams.style='left';
    blapie._fx_init(blapie._sys_cloneParams(oParams));
}
if(oParams.width!=undefined)
{
    oParams.style='width';
    blapie._fx_init(blapie._sys_cloneParams(oParams));
}
if(oParams.height!=undefined)
{
    oParams.style='height';
    blapie._fx_init(blapie._sys_cloneParams(oParams));
}
if(oParams.opacity!=undefined)
{
    oParams.style='opacity';
    blapie._fx_initOpacity(blapie._sys_cloneParams(oParams));
}

JavaScript:

blapie({
    element:{
        type:'ID',
        value:'blapie_content'
        },
    backgroundColor:{
        value:['#0f0099', '#996000'],
        duration:500
        },
    width:{
        value:[100, 750],
        duration:50,
        unit:'px'
        },
    opacity:{
        value:[1, 0.1],
        duration:500,
        callback:{
            value:boe,
            delay:2000
            }
        }
    });

De bovenste code staat in de functie blapie(). De onderste code roept blapie() aan en geeft dat hele object als parameters mee. Zoals je waarschijnlijk wel kan zien gaat het er in dit geval om dat de achtergrondkleur, de breedte en de transparantie veranderd worden. Alle gegevens hiervoor staat in het parameterobject. In de bovenste code zie je dat elke property nagekeken wordt. Er zijn namelijk 3 aparte functies voor die veranderingen. Eentje voor algemene waardes (normale getallen enzo), eentje voor kleuren (met support voor hex waardes) en eentje voor opacity (met wat workarounds omdat nog niet alle browsers de CSS3-prop opacity ondersteunen). Er moet dus per property gecheckt worden of deze bestaat. Is dat het geval, gooi die prop in een variabele en roep de goede functie aan. Probleem is nu dat ik met deze methode voor elke CSS-prop een nieuw if-statement moet aanmaken. Is verre van ideaal, aangezien je dan een gigantisch blok met statements krijgt. Ik heb al even zitten denken hoe ik dit het meest praktisch op kan lossen, maar tot nu toe heb ik nog geen oplossing kunnen vinden. Hebben jullie misschien wat tips?

[Mei]

Kickz0rz

[crisp]

Zoiets:

JavaScript:

var cloned = blapie._sys_cloneParams(oParams);
for (var prop in oParams)
{
    cloned.style = prop;
    switch (prop)
    {
        'color':
        'backgroundColor':
            blapie._fx_initColor(cloned);
            break;
        'opacity':
            blapie._fx_initOpacity(cloned);
            break;
        default:
            blapie._fx_init(cloned);
    }
}