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?

Answer 1

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