Javascript Class (Object Oriented) - Softwareontwikkeling

donderdag 17 januari 2008 21:01

Acties:

Systeem Beheerder

Topicstarter

Hoi, ik heb een flink script in elkaar gestoken en wil het nu in een classe gaat stoppen, alleen een probleem, en dit is het best uitgelegt met het volgende voorbeeld;

code:

  function doAlert() {
    alert('you hovered' + this.id);
  }
  function init() {
    document.getElementById('button').onmouseover = doAlert;
  }

Bovenstaande code werkt gewoon, wanneer ik hem in een document steek met een element met id "button" dan, wanneer je over de button hovered met je muis zou hij het id van de button moeten alerten.. dit is ntrlk niet wat ik daadwerkelijk wil bereiken maar dit legt mijn probleem in het kort uit.

Want, stel ik converteer bovenstaande code naar een class, krijg ik dit;

code:

myClass() {
  this.doAlert = function() {
    alert('you hovered' + this.id);
  }
  this.init = function() {
    document.getElementById('button').onmouseover = this.doAlert;
  }
}

je ziet het al.. in een class ga je ook met "this." werken..

heeft iemand enig idee hoe ik dit oplos?

Naatan.com - Blog & Wordpress Plugins | Divia-CMS.com (OpenSource) - Currently Recruiting!

donderdag 17 januari 2008 21:58

Acties:

Amorphis

Google op "javascript closures".

Veel javascript frameworks hebben voor jouw probleem handige functies geschreven. In iedergeval mootools en prototype.

donderdag 17 januari 2008 22:00

Acties:

Verwijderd

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
var MyClass = function(){
    function addLoadEvent(func){var oldonload = window.onload;if (typeof window.onload != 'function'){window.onload = func;}else{window.onload = function(){if(oldonload){oldonload();}func();}}}
    function addEvent(obj, type, fn){
        if (obj.attachEvent){
            obj['e'+type+fn] = fn;
            obj[type+fn] = function(){obj['e'+type+fn](window.event);};
            obj.attachEvent('on'+type, obj[type+fn]);
        }else obj.addEventListener(type, fn, false);
    }
    return{
        init: function() {
            addLoadEvent(function(){
                var t = document.getElementById('button');
                addEvent(t, 'mouseover',function(value){
                        return function(){
                            alert('you hovered: ' + value);
                        }
                    }(t.id)
                );
            });
        }
    }
}();

MyClass.init(); 
</script>
</head>
<body>
<div id="button">button</div>
</body>
</html>

Sorry maar dit is denk ik de beste manier om je class op te zetten, niet een poging van mij om je direct het moeras in te sturen.
De twee "addEvent" functies zijn 'private' functies en zijn niet middels bijvoorbeeld MyClass.addEvent() aan te roepen. De init: functie is 'public' (Check ook met firebug de 'Dom' tab).

Deze regel:

JavaScript:

function(value){
    return function(){
        alert('you hovered: ' + value);
    }
}(t.id)

is wat lastiger uit te leggen. Menno van Slooten kan dat beter dan ik: http://www.mennovanslooten.nl/blog/post/62...

Maar ik hoor het wel als je er niet uit komt!

[ Voor 0% gewijzigd door Verwijderd op 17-01-2008 22:03 . Reden: haastige spoed... ]

donderdag 17 januari 2008 22:09

Acties:

Naatan

Systeem Beheerder

Topicstarter

Thanks Amorphis!

hij was best simpel uiteindelijk

var self = this;

Naatan.com - Blog & Wordpress Plugins | Divia-CMS.com (OpenSource) - Currently Recruiting!

donderdag 17 januari 2008 22:10

Acties:

Verwijderd

Naatan schreef op donderdag 17 januari 2008 @ 22:09:
Thanks Amorphis!

hij was best simpel uiteindelijk

Wat je beter kunt doen, is een library als prototype of mootools gebruiken. Zoals hij al zei. Dat scheelt je enorm veel dingen uitzoeken.

donderdag 17 januari 2008 22:12

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op donderdag 17 januari 2008 @ 22:00:
Sorry maar dit is denk ik de beste manier om je class op te zetten, niet een poging van mij om je direct het moeras in te sturen.

Waarom zou dat 'de beste manier' zijn? Eerlijk gezegd vind ik dat daar behoorlijk op af te dingen is, niet in de laatste plaats omdat deze code compleet onleesbaar is (niet voor mij natuurlijk maar wel voor zo'n beetje de rest van de mensheid

).

Waarom niet gewoon de methods prototypen? En hoezo heb je closures nodig in dit simpele geval?

HTML:

<script type="text/javascript">

function MyClass()
{
}

MyClass.prototype.init = function()
{
    document.getElementById('button').onmouseover = this.doAlert;
}
MyClass.prototype.doAlert = function()
{
    alert('you hovered: ' + this.id);
}

var myInstance = new MyClass();
myInstance.init();

</script>

Intentionally left blank

donderdag 17 januari 2008 22:24

Acties:

Verwijderd

Je hebt gelijk Crisp, het is 'over the top'... ik kon me alleen niet echt voorstellen dat het bij een hover effectje zou blijven... en dan maar meteen (denk ik) goed beginnen

[ Voor 2% gewijzigd door Verwijderd op 17-01-2008 22:25 . Reden: 'denk ik' erbij... ]

donderdag 17 januari 2008 23:08

Acties:

Naatan

Systeem Beheerder

Topicstarter

Ik zie niet in hoe de prototype methode om dit probleem heen zou zeilen?

Enfin, ik heb het nu opgelost, en het werkt.. dus ik ga me verder niet verdiepen in nog een andere methode

het blijft idd niet bij een mouseover, maar echt heel veel meer is het niet.

Naatan.com - Blog & Wordpress Plugins | Divia-CMS.com (OpenSource) - Currently Recruiting!