[JS] prototype addProperty - Softwareontwikkeling

zondag 28 mei 2006 11:05

Acties:

Topicstarter

In Flash kun je addProperty gebruiken op deze manier:

Actionscript:

JavaScript:

MovieClip.prototype.addProperty('_color', function() {
        return new Color(this).getRGB();
}, function(rgb) {
        new Color(this).setRGB(rgb);
});

// voorbeeld

myMovieclip._color = 0xFF0000;

Is dat op één of andere manier ook mogelijk in JavaScript?
Ik zou bijvoorbeeld graag ._x gebruiken om de positie van een element op te halen of te zetten.
Het bovenstaande voorbeeldje zou zoiets opleveren, maar dat is geen geldige JavaScript:

JavaScript:

Object.prototype.addProperty('_x', function(){

    var el = this;

    var offsetTop = 0;

    do {

      offsetTop += el.offsetTop

    } while ((el = el.offsetParent));

    return offsetTop;
});

zondag 28 mei 2006 11:10

Acties:

Rowanov

Kop eens wat anders...

Kwestie van even rondbladeren op het forum

[rml][ purisme] prototypes / OO in JavaScript *[/rml]

zondag 28 mei 2006 11:12

Acties:

André

Analytics dude

JavaScript:

Object.prototype._x = function()
{
  var el = this;
  var offsetTop = 0;
  do { offsetTop += el.offsetTop } while (el = el.offsetParent);
  return offsetTop; 
}

Niet getest, maar dit zou volgens mij gewoon moeten werken?

zondag 28 mei 2006 11:17

Acties:

orf

Topicstarter

Dan is het meer een functioncall:

alert(object._x());

Ik ben op zoek naar (redelijk puristisch)

alert(object._x);

Standaard prototypes kende ik al wel, maar ik zoek een vergelijkbaar iets aan de addProperty methode van Flash.

Bedankt.

zondag 28 mei 2006 11:28

Acties:

crisp

Devver

Pixelated

Dat kan in javascript alleen voor statische properties:

JavaScript:

1	Object.prototype._x = 100;

[ Voor 126% gewijzigd door crisp op 28-05-2006 11:34 ]

Intentionally left blank

zondag 28 mei 2006 11:30

Acties:

orf

Topicstarter

Hmm, balen. Kon het al nergens vinden.
Bedankt.

zondag 28 mei 2006 11:32

Acties:

André

Analytics dude

Oke, dat kan pas bij DOM level 3 voor zover ik weet, ik kan het zo even niet terug vinden.

zondag 28 mei 2006 11:34

Acties:

crisp

Devver

Pixelated

javascript 1.5 heeft wel getters en setters:

JavaScript:

Object.prototype.__defineGetter__('_x', function()
{
  var el = this;
  var offsetTop = 0;
  do { offsetTop += el.offsetTop } while (el = el.offsetParent);
  return offsetTop; 
});

maar je support is dan wel beperkt tot moderne browsers (dus geen Internet Explorer)

(in IE kan je sowieso geen expando's definieren voor HTML objecten)

[ Voor 10% gewijzigd door crisp op 28-05-2006 11:36 ]

Intentionally left blank

zondag 28 mei 2006 11:36

Acties:

orf

Topicstarter

Dat lijkt verdacht veel op de Flash methode

Jammer van de beperkingen. In Flash (SWiSH) gebruik ik het veel.

zondag 28 mei 2006 14:14

Acties:

storeman

Ik zit zo ongeveer met hetzelfde probleem. Het werkt wel in FF maar in IE, ho maar.

Simpel voorbeeldje

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="JSmouseObj/objPrototype.js"> </script>
<style type="text/css">
    body{
        margin:0px;
        padding:0px;
        width:100%;
        height:100%;
    }   
    #test, #myDiv
    {
        top:100px;
        left:130px;
        width:120px;
        height:100px;
        position:absolute;
        border:1px solid #000000;
        border-top:2px solid #335599;
        z-index:3;
        background-color:#006633;
    }
</head>

<body>
<div id="vak" style="left:30px; top:30px; width:500px; height:500px; border:1px solid #000000; position:absolute;"> </div>
<div id="myDiv">Bladieblaa<br />Boehoeheo</div>
<script type="text/javascript">
    document.getElementById('myDiv').blaat();
</script>

</body>
</html>

En met in het javascript bestandje

JavaScript:

// JavaScript Document

Object.prototype.blaat = function()
{
    this.onmousedown = function(e){ alert('mouse down!'); }
}

In FF krijg ik wel een alert, maar in IE niet, kan ik dit omzeilen. Ik ben bezig met drag-functionaliteit toe te voegen aan objecten. Dit lijkt me de mooiste manier, heb t al in objecten, maar daar loop ik tegen bepaalde beperkingen aan.

[ Voor 13% gewijzigd door storeman op 28-05-2006 14:18 ]

"Chaos kan niet uit de hand lopen"

zondag 28 mei 2006 14:38

Acties:

crisp

Devver

Pixelated

Nee, zoals ik hiervoor al zei ondersteund IE geen expando's op HTML objecten, en expando's op het Object object worden ook niet overgenomen door HTML objecten - dat heeft te maken met het feit dat DOM in IE niet native geimplementeerd is maar via COM (het is dus ook maar zeer de vraag of IE er ueberhaupt ooit ondersteuning voor gaat bieden).

[ Voor 16% gewijzigd door crisp op 28-05-2006 14:38 ]

Intentionally left blank

zondag 28 mei 2006 14:44

Acties:

storeman

pfff... dat zuigt!

Zijn hier workarounds voor?

"Chaos kan niet uit de hand lopen"

zondag 28 mei 2006 14:46

Acties:

crisp

Devver

Pixelated

storeman schreef op zondag 28 mei 2006 @ 14:44:
pfff... dat zuigt!

Zijn hier workarounds voor?

Ja, je zou gebruik kunnen maken van behavior om middels CSS events toe te kennen, of na pageload de DOM traversen en dan aan elk matching element je event toekennen. Voor dat laatste zijn wel een aantal tools beschikbaar zoals Dean Edwards' cssQuery.
Nadeel van het laatste is dat het niet dynamisch is.

Overigens wb het gebruik van prototyping; ik zou dergelijke methods niet toevoegen aan het primitive Object object maar meer specifiek aan bijvoorbeeld HTMLElement of zelfs nog specifieker, bijvoorbeeld HTMLDivElement oid

[ Voor 27% gewijzigd door crisp op 28-05-2006 14:49 ]

Intentionally left blank

zondag 28 mei 2006 20:27

Acties:

storeman

ja, idd HTMLDivElement zou een goede candidaat zijn, echter krijg ik het niet voor elkaar om daar een prototype aan te koppelen, ik doe nu het volgende:

JavaScript:

HTMLDivElement.prototype.blaat = function()
{
    alert('HTMLDivElement.prototype werkt!');
}

en in de HTML

HTML:

<div id="myDiv" class="myDiv">Dit is een div</div>

<script type="text/javascript">
    document.getElementById('myDiv').blaat();
</script>

Wederom werkt het goed in FF, en IE snapt er dus weer geen snars van. Krijg zelfs geen foutmelding, helaas

[ Voor 19% gewijzigd door storeman op 28-05-2006 21:08 ]

"Chaos kan niet uit de hand lopen"

zondag 28 mei 2006 22:17

Acties:

crisp

Devver

Pixelated

storeman schreef op zondag 28 mei 2006 @ 20:27:
[...]
Wederom werkt het goed in FF, en IE snapt er dus weer geen snars van. Krijg zelfs geen foutmelding, helaas

Ik heb toch net uitgelegd dat (en waarom) IE dit ueberhaupt niet ondersteund?

Intentionally left blank

zondag 28 mei 2006 23:38

Acties:

storeman

Idd, ik heb heel beroerd zitten lezen. Ik meende dat je zei dat HTMLDivElement een workaround was, maar daar hoopte ik dus vurig op. Echter bleek niets minder waar....

Dat wordt dus een beetje jammer, nu maar eens afwegen of ik een FF only app ga schrijven en mensen gaan overtuigen FF te gaan gebruiken

.

"Chaos kan niet uit de hand lopen"