JavaScript Literal Object In seperate Files

Question

Say I have this structure:

File1.js:

var myObject = {
   bindEvents: function() {
     console.log('Root events binding');
   }
}

keyboard-object.js:

myObject.bindEvents: function() {
   console.log('Keyboard events binding');
}

mouse-object.js:

myObject.bindEvents: function() {
   // extends original bindEvents and adds more functionality 
   // right now this behavior overrides the original bindEvents method
   console.log('Mouse events binding');
}

How can I trigger myObject.bindEvents() and make sure it is fired in each file?

My purpose is to split one big object into separate files and make one method that fires all the corresponding method(s) in each file, as in bindEvents should trigger bindEvents (or keyboardEvents in my case) in the object

But order of calling must be taken care of. The file2 must have been executed before calling the bindEvents method. — Rajaprabhu Aravindasamy, Nov 01 '17 at 09:41
Like that you are not accomplishing what you want. If myObject can register different event dynamically you'll not be able to fire keyboardEvents which is declared after bindEvents. I mean the order matters. Or change your solution by pushing into an object a { eventNameKey : function() { // your call back } fire it when you ask it for. — Disfigure, Nov 01 '17 at 09:41
Edited the question again. my purpose is to fire one 'bindEvents' and have all the sub-classes or extending-classes execute their own method of 'bindEvents' — Broshi, Nov 01 '17 at 09:46
A point to note, keys in an object must be unique. So you will have only 1 `bindEvents` — Rajesh, Nov 01 '17 at 09:52

score 0 · Answer 1 · answered Nov 01 '17 at 09:56

0

You are essentially after a custom events handler for objects here. I would take a look at the one that Backbone.js supplies.

answered Nov 01 '17 at 09:56

Tiger_Mike

136
8

score 0 · Answer 2 · answered Nov 01 '17 at 10:20

Be ware that you are not assigning an anonymous function to (earlier declared) myObject properties with the described syntax (as in):

myObject.bindEvents: function() { console.log('Keyboard events binding'); }

What you are doing here is actually labeling the anonymous function with the word "myObject.bindEvents" which doesn't do you any good.

I think that - aside from this error - you are trying to do something like this:

myObject.bindEvents = function() { console.log('Keyboard events binding'); }

And only Now your myObject has a property method of bindEvents which than you can invoke by simply declaring:

myObject.bindEvents(); later on your script.

score 0 · Answer 3 · answered Nov 01 '17 at 13:15

0

Ok eventually I decided to use two (or more) seperate objects and trigger methods by firing events which are set on the document.

So my current solution is this:

myObject.js

var myObject = {
   bindEvents: function() {
     // some code here

     $(document).trigger('myObject:bindEvents');
   }
}

secondObject.js

var secondObject = {
   bindEvents: function() {
     // separate code and logic here
   }
}

$(document).on('myObject:bindEvents',function(){
   secondObject.bindEvents();
});

This gives me the flexibility to add more separate objects and bind their methods to events which are fired by the myObject object.

answered Nov 01 '17 at 13:15

Broshi

3,334
5
37
52

I suspect that my answer made you feel a little bit embarrassed with your self - but I think it's time you give 2 minutes read on JavaScript labels a lot of 'seasoned' programmers never heard about! – Bekim Bacaj Nov 01 '17 at 19:09
Embarrased? not really, it's good to know there's a difference between labeling and actually declaring a property. but my main goal is to trigger one method and have other classes (or subclasses) trigger their own method as well. thanks for the tip anyways! – Broshi Nov 02 '17 at 08:19

JavaScript Literal Object In seperate Files

3 Answers3