1

I have an occurence where I want to have a main js-file with one resize function and specific files that can add workload to the main file without changing the mainfile and manually calling functions.

Lets say I have an object literal

var App = {
  resize: function(){
    // Code should be executed here
  },
  addResize: function(){
    // ?
  }
}

and I want a function to add code to the resize function which dynamically adds workload to the resize function (which gets called on window resize):

App.addResize(function(){ ... });

The first thing that came to my mind is to store the anonymous functions from addResize to an array and iterating over it in the resize function, but that doesn't feel like doing a best-practice:

var App = {
  resizeFunctions = [];
  resize: function(){
    // iterate over resizeFunctions and call each one
    // here I define throttling/debouncing ONCE
  },
  addResize: function(fn){
    this.resizeFunctions.push(fn);
  }
}

window.onresize = App.resize();

App.addResize(fn1);
App.addResize(fn2);

Is there a better way?

Thomas Strobl
  • 155
  • 8
  • Do I understand this correctly: you want to extend your object from a different file? Define `App` in one file, and then a function that belongs to `App` in another? Or do you want to make `addResize()` do more things, defined in a separate file? – MMM Feb 26 '14 at 09:52
  • The correct answer will depend on a few things: Does each other piece of work need to happen in a specific order? Do the functions need access to specific data within the App 'class'? Will they be commonly added/removed on a case-by-case basis, or is it a one-time setup with all future calls to `resize()` working in the same way? – Nevett Feb 26 '14 at 09:53
  • I want different files to tell the App-Object what should be done when calling App.resize without touching the file where App is defined. But it's a one-time-setup on page load. Kinda like modules in a system. – Thomas Strobl Feb 26 '14 at 09:56
  • So, only one file decides what `resize` does? It's not a combination of several files? – MMM Feb 26 '14 at 09:58
  • Well App.resize gets called when the window is resized and the work to be done should be defined externally by calling addResize which adds a to-be-executed-function to App.resize – Thomas Strobl Feb 26 '14 at 10:08

4 Answers4

1

as you are referring to one function, ie. a resize function, I assume that you are looking for function overloading:

Function overloading in Javascript - Best practices
http://ejohn.org/blog/javascript-method-overloading/

If you want to extend the functionality of a set of methods that are all related to a single parent-object into different child objects, I would look into prototypal inheritance.
It allows you to define re-define the parent methods for each of the child-objects.

Community
  • 1
  • 1
html_programmer
  • 18,126
  • 18
  • 85
  • 158
  • Thanks for the resource, but how does App.resize store the functions that should be called everytime App.resize gets called? – Thomas Strobl Feb 26 '14 at 10:14
  • Check if the link that I've added is useful for your purpose. – html_programmer Feb 26 '14 at 10:15
  • "Better" only depends on your needs. If it works for you, and you feel that it will make your code more readable and maintainable in this fashion without giving up, then it's probably better. Depending on what the resize function does, you don't `have` to overload the function with an anonymous function. Depending on your needs, you can also overload the resize function with optional parameter values and manage the function accordingly. – html_programmer Feb 26 '14 at 11:19
0

You can treat your object literal as array. 

App["resize"] = function(){
  //Code goes here
}

__

Or

App.resize = function(){
//Code here
}

Both are equally good. These will update the definition of resize

If you want to add some new method, then too the same syntax will work.

App["myNewMethod"] = new function(){
 //Code here
}

Edit after OP's comment 

var oldFun = App["resize"];   // or may be store this in App itself
App["resize"] = function(){
    //Pre-processing 

    // Now call original resize method
    oldFun();   //If resize method used method argument then use oldFun.apply( this, arguments );


    //Post processing 
}
Rakesh Juyal
  • 35,919
  • 68
  • 173
  • 214
0

Do you want to overwrite the existing function? Then you can just do this:

App.addResize = function(){}
WhiteFang
  • 199
  • 1
  • 10
0
App.addResize(function(){ ... });

would pass the function to addResize as an attribute but not add it to it. You could do

App.addResize.newFunction = function(){ ... };

Where newFunction is the name of the function

pstenstrm
  • 6,339
  • 5
  • 41
  • 62