Javascript OOP events

Question

I want to create an object that can parse a certain filetype. I've looked at some of the files in the File API and I want my object to work about the same. So basically, what I want is this:

A function, called CustomFileParser. I want to be able to use it as the following:

var customFileParser = new CustomFileParser();
customFileParser.parsed = paresed;
customFileParser.progress = progress;

customFileParser.parse(file);

function parsed(event){
 //The file is loaded, you can do stuff with it here.
}

function progess(event){
 //The file load has progressed, you can do stuff with it here.
}

So I was thinking on how to define this object, but I'm not sure how to define these events and how I should do this.

function customFileParser(){
 this.parse = function(){
  //Do stuff here and trigger event when it's done... 
 }
}

However, I'm not sure how to define these events, and how I can do this. Anyone can give me a hand?

No, I'm not a total OO javascript beginner. I've done some with it, but the internet is full of bad practices. I just want to learn a clean start and learn properly how it's done. I'm having difficulty judging sources because I don't know what's actual good practice. — Timo Willemsen
– Timo Willemsen, Commented Jul 27, 2011 at 10:32
Use document.customEvent and shim it out for older browsers using window.dispatchEvent — Raynos
– Raynos, Commented Jul 27, 2011 at 10:39
Why did my comment (the one Timo responded to above) disappear???!!! I SAY IT AGAIN: Have a look at developer.yahoo.com/yui/theater, Douglas Crockford's Javascript videos. After reading the response (above) I see that this pointer IS PERFECTLY SUITED TO ANSWER THE QUESTION. — Mörre
– Mörre, Commented Jul 27, 2011 at 12:45
Awesome Morre, I don't know why it's deleted. Ill check it out :) — Timo Willemsen
– Timo Willemsen, Commented Jul 27, 2011 at 12:49

zatatatata · Accepted Answer · 2011-07-27 11:10:30Z

Javscript is prototype-based OOP language, not class-based like most other popular languages. Therefore, the OOP constructs are a bit different from what you might be used to. You should ignore most websites that try to implement class-based inheritance in JS, since that's not how the language is meant to be used.

The reason people are doing it because they are used to the class-based system and are usually not even aware that are alternatives to that, so instead of trying to learn the correct way, they try to implement the way that they are more familiar with, which usually results in loads and loads of hacks or external libraries that are essentially unnecessary.

Just use the prototype.

function CustomFileParser(onParsed, onProgress) {
    // constructor
    this.onParsed = onParsed;
    this.onProgress = onProgress;
};

CustomFileParser.prototype.parse = function(file) {
    // parse the file here
    var event = { foo: 'bar' };
    this.onProgress(event);
    // finish parsing
    this.onParsed(event);
};

And you can use it like so

function parsed(event) {
    alert(event);
}

function progress(event) {
    alert(event);
}

var customFileParser = new CustomFileParser(parsed, progress);

var file = ''; // pseudo-file
customFileParser.parse(file);

Thanks for your response, both you and Darkyen had some constructor parameters for the events. Why is this?
@Timo The constructor is needed to assign those events to the specific instance of the CustomFileParser. The this keyword is what references the current instance. You could have numerous instances of CustomFileParser running in parallel with each one having different handlers. That's why the constructor has to assign specific handlers to the specific instance.
@Raynos. I don't think Object.create is yet supported in all widely spread browsers.
@Zanfa use the ES5 shim. Only browser that doesnt support object.create is IE8

ShrekOverflow · Accepted Answer · 2011-07-27 10:30:37Z

From what it sounds to me i think you need your program to look like this

function customFileParser( onparse , progress){
this.onparse = onparse;
this.progressStatus = 0;
this.progress = progress;
this.parser = function (chunk) 

}
this.parse = function(){
// Do stuff of parsing


// Determine how much data is it
// Now make a function that parses a bit of data in every run
// Keep on calling the function till the data is getting parsed
// THat function should also increase the percentage it think this can be done via setTimeout.
// After every run of the semi parser function call the progress via something like
this.parser();
if(progressStatus <100){
this.progress(this.progressStatus);
}else{
 this.parsed();
 }
}
}

and u can create instance of that object like

 var dark = new customFileParser( function () { // this tells what to
    do what parsed is complete  } , function (status) { // this tells what
    to do with the progress status } ) ;

using the method i suggested. you can actually define different methods for all the instances of the object you have !

Collectives™ on Stack Overflow

Javascript OOP events

2 Answers 2

9 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Related