JS OO programmeren hoe precies

[vorlox]

Beste Medetweakes,

Ik heb een project waarbij perse javascript gebruikt moet worden..tis niet mijn fav.. maar goed.
Nu kan ik wel wat javascript, maar nu wil ik het eigenijk op de oo manier doen zoals ik gewend ben.
Online kom ik genoeg voorbeelden tegen... echter geen van deze voorbeelden maakt gebruik van classes...en dat snap ik dus niet..

ik verwacht dus zoiets als

code:

class MyAlert
{
    var strMessage = "";

    function DoAlert()
    {
        alert(this.strMessage);
    }
}


/* En dan aanroepen als */
var objAlert = new MyAlert();
objAlert.strMessage = 'Doe nou es iets';
objAlert.DoAlert();

maar zoals je begrijpt doet dit dus helemaal niks.. ja syntex erroren.
Wat ik online zie is dat alle methods gewoon allemaal door elkaar staan????
Hoe kun je dan meerdere objecten tegelijk aanmaken van iets?? en hoe kan een object dan zijn eigen property values hebben??

Ik snap'ter ggn hout van

[ Voor 3% gewijzigd door vorlox op 29-04-2006 19:06 . Reden: typo ]

[Cyphax]

Interessant topic:
[rml][ js] Object based scripten[/rml]
Het werkt wel, maar echt ideaal is het niet als je iets als Java ofzo gewend bent geloof ik.
Maar evengoed: het kan wel.

[vorlox]

He Cyphax... das dus wat ik o.a inderdaad gevonden had..maar dat snap ik dus niet....hoe set ik dan een propety voor 1 object?

[Verwijderd]

Basically is het heel makkelijk als je het eenmaal weet. Verwacht geen zaken als multiple inheritance, access modifiers, interfaces, overloading van operators of methods, enzovoorts.


function Namespace.ClassName(arguments){};
Namespace.ClassName.prototype.MethodName = function(){};


Een voorbeeld hiervan is:

code:

function Car(){
this.speed;
this.brand;
this.type;
}
Car.prototype.start = function(){
alert('vroem vroem');
}
Car.prototype.stop = function(){
alert('prut prut');
}

var myCar = new Car();
myCar.start();
myCar.stop();


Inheritance kan bijvoorbeeld op de volgende wijze

function Bmw(){
Car.apply(this,arguments);
this.brand = 'bmw';
this.type = '6';
}
Bmw.prototype = new Car;

var myBmw = new Bmw();
myBmw.start();
myBmw.stop();

[ Voor 25% gewijzigd door Verwijderd op 29-04-2006 20:00 ]

[funkwurm]

Deze site legt het verschil tussen traditioneel OOP en Javascript-style OOP (loosely typed) mooi uit vind ik zelf. Kijk vooral bij de survey.

[André]

Gordijnstoks verhaal even toegepast op jouw code:

JavaScript:

function MyAlert()
{
  this.strMessage = "";
}
MyAlert.prototype.DoAlert = function()
{
  alert(this.strMessage);
}

/* En dan aanroepen als */
var objAlert = new MyAlert();
objAlert.strMessage = 'Doe nou es iets';
objAlert.DoAlert();

[ Voor 2% gewijzigd door moto-moi op 29-04-2006 22:20 ]

[Verwijderd]

Waarbij het jammer is dat getters/setters niet door alle browsers ondersteund worden. De nette manier zou dan zijn geweest:

objAlert.setMessage('Doe nou es iets');

Voor Gecko heb je __defineGetter__ en __defineSetter__ en IE laat wel constructies toe als

set waarde(value) {variable = value},
get waarde() {return variabele}

Maar die zijn niet geimplementeerd.

[ Voor 48% gewijzigd door Verwijderd op 29-04-2006 22:17 ]

[vorlox]

bleeh het lukt echt niet.... ik dacht dat ik het begreep maar helaaaaaas.

voor de welwillende onder ons

JavaScript:

//Class
function MyXml()
{
    //properties
    this.rp;
    this.ie = false;

} //End function MyXml()

//--------------------------------------------------------------------------------

//request
MyXml.prototype.request = function(url)
{
    if (window.XMLHttpRequest)
    {
        this.rp = new XMLHttpRequest();
        this.rp.onreadystatechange = this.readyhandler;
        this.rp.open("GET", url, true);
        this.rp.send(null);
    } //End if (window.XMLHttpRequest)
    else if (window.ActiveXObject)
    {
        //set ie
        this.ie = true;
        //do req
        this.rp = new ActiveXObject("Microsoft.XMLHTTP");
        if (this.rp)
        {
            this.rp.onreadystatechange = this.readyhandler;
            this.rp.open("GET", url, true);
            this.rp.send();
        } //End if (this.rp)
        
    } //End else if (window.XMLHttpRequest)
    
} //End MyXml.prototype.request = function(url)

//--------------------------------------------------------------------------------

//handler
MyXml.prototype.readyhandler = function()
{
    if (this.rp.readyState == 4)
    {
        if (this.rp.status == 200)
        {
            //Process
            this.process();
            
        } //End if (this.rp.status == 200) 
        else 
        {
            //Error
            alert("There was a problem retrieving the XML data:\n" + req.statusText);
        } //End else if (this.rp.status == 200)
        
    } //End if (this.rp.readyState == 4)

} //End MyXml.prototype.readyhandler = function()

//--------------------------------------------------------------------------------

MyXml.prototype.process = function()
{
    alert(this.rp.responseText);
} //End MyXml.prototype.process = function()

//--------------------------------------------------------------------------------

function DoRequest()
{
    var xml = new MyXml();
    xml.request('xml.php');

} //End function DoRequest()

//--------------------------------------------------------------------------------

en ik roep het zo aan

HTML:

<input type="button" name="Go" value="Go" onClick="DoRequest();">

toch is in de method de this.rp null of geen object..... hoe kan dit nou

[ Voor 4% gewijzigd door vorlox op 29-04-2006 22:28 ]

[crisp]

omdat je eventhandler niet uitgevoerd wordt in de scope van je object, en 'this' in je process method dus niet naar je object verwijst

Dat kan je oplossen met een closure:

JavaScript:

var self = this;
this.rp.onreadystatechange = function() { self.readyhandler(); }

[ Voor 35% gewijzigd door crisp op 29-04-2006 22:56 ]

[funkwurm]

Op die link die ik je gaf staat ergens uitgelegd dat javascript self en this door elkaar haalt, inclusief workaround, als ik die workaround toepas is de "undefined" waarschuwing weg uit FF. Ben op dit moment echter te lui om IE/Opera testen, en ook heb ik geen xml.php in elkaar geflanst.

Hoe het ook zei, jou code gaf me idd this.rp undefined, dit niet:

JavaScript:

//Class
function MyXml()
{
    //properties
    var self=this;
    this.rp;
    this.ie = false;

} //End function MyXml()

//--------------------------------------------------------------------------------

//request
MyXml.prototype.request = function(url)
{
    if (window.XMLHttpRequest)
    {
        self.rp = new XMLHttpRequest();
        self.rp.onreadystatechange = self.readyhandler;
        self.rp.open("GET", url, true);
        self.rp.send(null);
    } //End if (window.XMLHttpRequest)
    else if (window.ActiveXObject)
    {
        //set ie
        self.ie = true;
        //do req
        self.rp = new ActiveXObject("Microsoft.XMLHTTP");
        if (self.rp)
        {
            self.rp.onreadystatechange = self.readyhandler;
            self.rp.open("GET", url, true);
            self.rp.send();
        } //End if (self.rp)
        
    } //End else if (window.XMLHttpRequest)
    
} //End MyXml.prototype.request = function(url)

//--------------------------------------------------------------------------------

//handler
MyXml.prototype.readyhandler = function()
{
    if (self.rp.readyState == 4)
    {
        if (self.rp.status == 200)
        {
            //Process
            self.process();
            
        } //End if (self.rp.status == 200) 
        else 
        {
            //Error
            alert("There was a problem retrieving the XML data:\n" + req.statusText);
        } //End else if (self.rp.status == 200)
        
    } //End if (self.rp.readyState == 4)

} //End MyXml.prototype.readyhandler = function()

//--------------------------------------------------------------------------------

MyXml.prototype.process = function()
{
    alert(self.rp.responseText);
} //End MyXml.prototype.process = function()

//--------------------------------------------------------------------------------

function DoRequest()
{
    var xml = new MyXml();
    xml.request('xml.php');

} //End function DoRequest()

//--------------------------------------------------------------------------------

/me kijkt met uitpuilende ogen op z'n horloge

[ Voor 3% gewijzigd door funkwurm op 29-04-2006 23:00 ]

[twiekert]

Het zal misgaan bij het toekennen van een eventhandler voor de onreadystatechanged event.

JavaScript:

this.rp.onreadystatechange = this.readyhandler; 

Wat hier gebeurt is dat je als eventhandler niet de method readyhandler als onderdeel van de MyXml instance toekent, maar de functie readyhandler in de context van de XMLHttpRequest, waar 'this' ook heen verwijst. this is dus nu de xmlhttprequest instance geworden ipv de MyXml instance. this.rp bestaat daar dus gewoon niet.

Meer over deze feature kan je vinden op: http://blog.livollmers.net/?p=17
De uiteindelijke oplossing is ervoor te zorgen dat je eventhandler binnen de context van je xml instance wordt aangeroepen:

JavaScript:

var _this = this;
this.rp.onreadystatechange = function(req) { _this.readyhandler(req); }

met behulp van een anonymous function en een reference naar de xml instance (_this) wordt de event handler nu wel binnen de context van de MyXml instance aangeroepen.

Ik kan je het javascript framework prototype erg aanbevelen als je wat meer met ajax gaat doen, het is een erg handig framework voor ajax requests en handige dingetjes om object georienteerd te werken in javascript.

source: http://prototype.conio.net/
docs: http://wiki.script.aculo.us/scriptaculous/show/Prototype

Prototype biedt standaard functionaliteit aan om het bovenstaande probleem op te lossen (de aanroep naar een method instance sluitend maken):

JavaScript:

this.rp.onreadystatechange = this.readyhandler.bind(this);

bind is een uitbreiding op de standaard javascript functie die automatisch zorgt dat de eventhandler binnen de juiste context aangeroepen wordt.

[crisp]

Voor de gein even een beetje herschreven naar hoe ik het zou doen:

JavaScript:

var MyXml = function()
{
    var rp;
}
MyXml.prototype =
{
    request: function(url)
    {
        this.rp = new XMLHttpRequest();
        if (rp)
        {
            var self = this;
            this.rp.onreadystatechange = function() { self.readyhandler(); }
            this.rp.open('GET', url, true);
            this.rp.send(null);
        }
        else
        {
            alert('This browser has no suitable XMLHttpRequest functionality');
        }
    },
    readyhandler: function()
    {
        if (this.rp.readyState == 4)
        {
            if (!this.rp.status || (this.rp.status >= 200 && this.rp.status < 400))
            {
                this.process();
            }
            else
            {
                alert('There was a problem retrieving the XML data' + (this.rp.statusText ? ':\n' + this.rp.statusText : ''));
                this.rp = null;
            }
        }
    },
    process: function()
    {
        alert(this.rp.responseText);
        this.rp = null;
    }
}

if (!window.XMLHttpRequest)
{
    window.XMLHttpRequest = function()
    {
        var types = [
            'Microsoft.XMLHTTP',
            'MSXML2.XMLHTTP.5.0',
            'MSXML2.XMLHTTP.4.0',
            'MSXML2.XMLHTTP.3.0',
            'MSXML2.XMLHTTP'
        ];

        for (var i = 0; i < types.length; i++)
        {
            try
            {
                return new ActiveXObject(types[i]);
            }
            catch(e) {}
        }

        return undefined;
    }
}

var xml = new MyXml();
xml.request('xml.php');

[vorlox]

Holy moly... bedankt mensen..
Mooie voorbeelden..... schitterende notatie crisp

thanks

[funkwurm]

Crips, waarom gebruik je prototyping alhier? Voor zover ik weet kan het zonder, heeft prototyping voordelen boven zoiets? (niet getest):

JavaScript:

var MyXml = function()
{
    var rp;
    this.request=function(url)
    {
        this.rp = new XMLHttpRequest();
        if (rp)
        {
            var self = this;
            this.rp.onreadystatechange = function() { self.readyhandler(); }
            this.rp.open('GET', url, true);
            this.rp.send(null);
        }
        else
        {
            alert('This browser has no suitable XMLHttpRequest functionality');
        }
    }
    this.readyhandler=function()
    {
        if (this.rp.readyState == 4)
        {
            if (!this.rp.status || (this.rp.status >= 200 && this.rp.status < 400))
            {
                this.process();
            }
            else
            {
                alert('There was a problem retrieving the XML data' + (this.rp.statusText ? ':\n' + this.rp.statusText : ''));
                this.rp = null;
            }
        }
    }
    this.process=function()
    {
        alert(this.rp.responseText);
        this.rp = null;
    }
}

if (!window.XMLHttpRequest)
{
    window.XMLHttpRequest = function()
    {
        var types = [
            'Microsoft.XMLHTTP',
            'MSXML2.XMLHTTP.5.0',
            'MSXML2.XMLHTTP.4.0',
            'MSXML2.XMLHTTP.3.0',
            'MSXML2.XMLHTTP'
        ];

        for (var i = 0; i < types.length; i++)
        {
            try
            {
                return new ActiveXObject(types[i]);
            }
            catch(e) {}
        }

        return undefined;
    }
}

var xml = new MyXml();
xml.request('xml.php');

[crisp]

funkwurm schreef op zondag 30 april 2006 @ 00:30:
Crips, waarom gebruik je prototyping alhier? Voor zover ik weet kan het zonder, heeft prototyping voordelen boven zoiets?

Ja, als je je methods op jouw manier beschrijft dan zullen ze voor elke instantie weer opnieuw gedefinieerd worden. Dat kost extra tijd en memory