Sending data from classes?

Question

I'm looking into deferred and custom events. I'm not sure what method would suit my application.

I have a class that calls another class. Inside this class a user can drag files on to the window.

Once the file has been dragged on, I wish to send details about the files to my main class.

I've thought about using deferred, but the user needs to drag files over and over again, and as of my understanding this can only be used once.

So in my main class I:

this.dropBox = new DropBox();

Then in the DropBox class I have:

$(window).on('drop', this.drop);

But what should I put in my 'drop' method. Every time something is dropped I wish to 'alert' my main class about it and act upon it. How can I 'listen' for the event. Should I use deferred, custom event or something else?

score 0 · Answer 1 · answered Jun 05 '14 at 09:49

Why not just give a callback over to the DropBox?

Well, like this code in the main class:

this.dropBox = new DropBox(function(fileInfo) {
  // this code can be executed by the DropBox Object multiple times!
});

And the DropBox:

window.DropBox = function(callback) {
  this.userHasDroppedFiles = function(fileinfo) {
    // do stuff
    callback(fileinfo); // give the fileinfo back with the callback!
  }
}

Also, there are no classes in JavaScript! You have only Objects, and you can use constructor-functions combined with prototypes to generate a class like behaviour, but you will never actually have classes like in Java, C# or similar languages. Keep this always in mind. Some JS frameworks build their own class layer on top of the main JS possibilities, then you may have Framework classes, but also never native JavaScript classes, because native JavaScript classes dont exist!

Ja͢ck · Accepted Answer · 2014-06-05T15:25:22.203

0

There are typically two options for this:

Delegate

A delegate should implement a certain "interface", a set of functions that handle certain events.

function DropBox(delegate)
{
    this.delegate = delegate;

    $(window).on('drop', $.proxy(this, 'drop'));
}

DropBox.prototype.drop = function(e) {
    // do stuff with event
    this.delegate.drop(e);
}

// inside main instance
this.dropBox = new DropBox(this);
// delegate interface
this.drop = function(e) {
    // handle file drop
};

Callback

If the delegate only needs one function, you can use a callback as well:

function DropBox(dropEventHandler)
{
    this.dropEventHandler = dropEventHandler;
    $(window).on('drop', this.drop);
}

DropBox.prototype.drop = function(e) {
    this.dropEventHandler(e);
};

// inside main instance
var self = this;
this.dropBox = new DropBox(function(e) {
    // handle file drop
    // use 'self' to reference this instance
});

edited Jun 05 '14 at 15:25

answered Jun 05 '14 at 10:03

Ja͢ck

170,779
38
263
309

Thanks, why is this method preferred over a custom event? – user3710433 Jun 05 '14 at 10:13
@user3710433 What exactly do you mean by custom event? – Ja͢ck Jun 05 '14 at 10:15
This: http://www.sitepoint.com/jquery-custom-events/ I could trigger an event in my class and listen for it in my main class. Is this not advised? – user3710433 Jun 05 '14 at 10:21
@user3710433 Well, it would make sense if dropbox itself was more like a view (or attached to an HTML element); in this case, there will only be one dropbox, so I don't see the appeal. – Ja͢ck Jun 05 '14 at 10:23
1

@user3710433 I'm not talking about [`delegate()`](http://api.jquery.com/delegate/); a delegate is an object instance that implements a particular interface (or protocol if you will). – Ja͢ck Jun 05 '14 at 11:13
Thanks Jack, do you have any links where I can read up on this, I keep finding stuff on delegate() which is not relevant – user3710433 Jun 05 '14 at 12:43
@user3710433 You could look at [Delegation](http://en.wikipedia.org/wiki/Delegation_(programming)) – Ja͢ck Jun 05 '14 at 13:06
@Jack your delegate example won't work. When called `this` is a dom element, you should pass a bound function or closure `$(window).on('drop', this.drop.bind(this));` – HMR Jun 05 '14 at 14:20
@HMR You're right. I've updated the answer, thanks for spotting that. – Ja͢ck Jun 05 '14 at 15:25

Sending data from classes?

2 Answers2

Delegate

Callback

Linked