Javascript prototyping

[ZeroXT]

JavaScript:

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]

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?}

[ZeroXT]

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é]

Duwtje

HTML:

<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]

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]

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.

[crisp]

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:

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');

[Soultaker]

Dat hoeft toch niet per se met een closure?

JavaScript:

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:

function $(id) { return new ElementWrapper(id) }

[ZeroXT]

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:

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:

$('foo');

Moet ik dan toch zoeken naar prototyping?

[X-Lars]

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.