Javascript prototyping

Pagina: 1
Acties:

Onderwerpen


  • ZeroXT
  • Registratie: December 2007
  • Laatst online: 10-07 11:07
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function $(id)
{
    this.id = id;
    
    this.set = function(waarde)
    {
        alert(waarde);
        this.document.getElementById(this.id).value = waarde;
        return true;
    }
    
    if(document.getElementById(this.id))
    {
        return document.getElementById(this.id);
    }
}


Ik kan nu met $('element') het object selecteren maar nu wil ik dat ik gelijk een waarde (bijv. stuk tekst) kan setten in een div of inputveld maar deze wil ik dan zo oproepen: $('element').set('gegevens');

Nu ben ik gaan zoeken en kwam ik uit bij het term prototyping alleen krijg ik het niet voor elkaar.

Kunnen jullie me een duwtje in de goede richting geven? :)

[ Voor 22% gewijzigd door ZeroXT op 11-11-2010 12:43 ]


  • zwippie
  • Registratie: Mei 2003
  • Niet online

zwippie

Electrons at work

Met innerHtml() kun je de inhoud van een element veranderen. De waarde van een input veld zou met .value te veranderen moeten zijn.

Ben je bekend met jQuery?

How much can you compute with the "ultimate laptop" with 1 kg of mass and 1 liter of volume? Answer: not more than 10^51 operations per second on not more than 10^32 bits.


  • ZeroXT
  • Registratie: December 2007
  • Laatst online: 10-07 11:07
ik wil het gebruik van innerHTML voorkomen omdat ik me graag aan de DOM houdt. En wil geen javascript library's gebruiken maar toch bedankt voor je antwoord.

  • André
  • Registratie: Maart 2002
  • Laatst online: 08-07 16:59

André

Analytics dude

Duwtje
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<input type="text" id="tekst" value="">
<script type="text/javascript">
  function $(id)
  {
    this.id = id
    if(document.getElementById(this.id))
    {
      this.elm = document.getElementById(this.id);
    } 
  }
  $.prototype.set = function(waarde) { if (this.elm) { this.elm.value = waarde; } }

  test = new $('tekst');
  test.set('gegevens');
</script>

  • R4gnax
  • Registratie: Maart 2009
  • Laatst online: 04-07 15:01
ZeroXT schreef op donderdag 11 november 2010 @ 12:37:
ik wil het gebruik van innerHTML voorkomen omdat ik me graag aan de DOM houdt. En wil geen javascript library's gebruiken maar toch bedankt voor je antwoord.
  1. De DOM implementatie van browsers is op een aanzienlijk aantal punten (met name in IE) buggy. In een aantal gevallen is het gebruik van innerHTML onvermijdelijk als je alles cross-browser vlot wilt hebben werken.
  2. "Reinventing the square wheel" ?

  • jhu
  • Registratie: December 2000
  • Laatst online: 28-06 13:53

jhu

ZeroXT schreef op donderdag 11 november 2010 @ 12:37:
ik wil het gebruik van innerHTML voorkomen omdat ik me graag aan de DOM houdt. En wil geen javascript library's gebruiken maar toch bedankt voor je antwoord.
Ik denk dat je alleen ontkomt aan het gebruik van een library als je iets maakt voor een bedrijf of instelling die allemaal één en dezelfde browser gebruiken.

Er is helemaal niks mis met het gebruik van jQuery, sterker nog, dat is zo goed uitgedacht voor alle browsers dat het netter is dan je ooit zelf kan bereiken.

Zet de cv maar uit moe, die AMD draait nu stabiel


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 09:18

crisp

Devver

Pixelated

Ik denk dat je niet per-sé zoekt naar prototyping, maar meer naar 'chaining'. Dat bereik je door een DOM-element binnen een closure te plaatsen en een set methods binnen die scope terug te geven; in een simpel voorbeeld:

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function $(id)
{
    var element = document.getElementById(id);

    var methods = {
        set: function(text)
        {
            if (element)
                element.appendChild(document.createTextNode((element.hasChildNodes() ? ' ' : '') + text));

            return methods;
        }
    };

    return methods;
}

$('foo').set('aap').set('noot').set('mies');

Intentionally left blank


  • Soultaker
  • Registratie: September 2000
  • Laatst online: 10-07 20:18
Dat hoeft toch niet per se met een closure?
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
function ElementWrapper(id) {
    this.element = document.getElementById(id)
}

ElementWrapper.prototype.addText = function(text) {
    if (this.element.hasChildNodes()) text = ' ' + text
    this.element.appendChild(document.createTextNode(text))
    return this
}

new ElementWrapper("some-id").addText("foo").addText("bar").addText("baz")

Persoonlijk vind ik het ál te liberale gebruik van closures in een OO-taal niet echt mooi, omdat ze op verborgen state werken. Als methoden zijn ze dan niet handig te hergebruiken bij overerving. In het voorbeeld hierboven mis je daarvoor sowieso een expliciete constructor.

Als je de constructor niet expliciet wil callen kun je altijd nog een functie als $ definiëren:
JavaScript:
1
function $(id) { return new ElementWrapper(id) }

Acties:
  • 0 Henk 'm!

  • ZeroXT
  • Registratie: December 2007
  • Laatst online: 10-07 11:07
crisp schreef op donderdag 11 november 2010 @ 21:16:
Ik denk dat je niet per-sé zoekt naar prototyping, maar meer naar 'chaining'. Dat bereik je door een DOM-element binnen een closure te plaatsen en een set methods binnen die scope terug te geven; in een simpel voorbeeld:

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function $(id)
{
    var element = document.getElementById(id);

    var methods = {
        set: function(text)
        {
            if (element)
                element.appendChild(document.createTextNode((element.hasChildNodes() ? ' ' : '') + text));

            return methods;
        }
    };

    return methods;
}

$('foo').set('aap').set('noot').set('mies');
Dit is inderdaad wat ik zoek. Alleen nu verlies ik wel een belangrijke functionaliteit. Ik kan nu namelijk niet meer alleen het element als object benaderen.

JavaScript:
1
$('foo');


Moet ik dan toch zoeken naar prototyping?

Acties:
  • 0 Henk 'm!

  • X-Lars
  • Registratie: Januari 2004
  • Niet online

X-Lars

Just GoT it.

Je kunt toch gewoon zorgen dat het object dat je teruggeeft (`methods`) een referentie bevat naar het DOM element? In het voorbeed van Soultaker is dat er al, in het voorbeeld van crisp voeg je bijv. `element = element,` toe tussen regel 5 en 6. Dan heb je dus op elke link in je chain een referentie `.element` beschikbaar.

Overigens kan je in het voorbeeld van crisp `return this` gebruiken op regel 11.

Afhankelijk van de hele context, ben ik ook wel meer gecharmeerd van de `ElementWrapper` benadering.
Pagina: 1