Question

I have read that it is a good practice to not use too many global variables in javascript, so I am trying to package some functions related to navigation buttons of my app in a single variable like this:

var navs = {
  projects:   function(){
    main.removeClass().addClass('showing_projects');
    //... other code
  },
  line_items: function(){
    main.removeClass().addClass('showing_line_items');
    //... other code
  },
  media:      function(){
    main.removeClass().addClass('showing_media');
    //... other code
  }
}

So that I can do

navs.projects()

to show the projects. My question is, I have this function showNotify() that I need to run after calling any of the navs.projects(), navs.line_items(), or navs.media(). I feel that it is not DRY to have this showNotify() line added to each of these three properties/methods. Is there a way that I can have showNotify() run each time these I call these three methods?

Thank You

Answer 1

You could parameterize the parts of each of those functions that are different:

var navs = {
    addClassAndNotify: function(className, fn) {
        main.removeClass().addClass(className);
        fn();
        showNotify();

    }
}

And used like this:

navs.addClassAndNotify('showing_media', function() {
    // showing media code
});

You might also create a function generator, like this:

function create(className, fn) {
    return function() {
        main.removeClass().addClass(className);
        fn();
        showNotify();
    }
}

And then create your functions like this:

var navs = {
    projects: create(function(){
        //... other code
    }),
    line_items: create(function(){
        //... other code
    }),
    media: create(function(){
        //... other code
    }),
}

But I don’t think calling showNotify in each function is a big deal.