Question

I am re-working some tooltip functionality on my site.

Am experimenting with the Revealing module pattern as laid out here:

http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#designpatternsjavascript

As a quick test i tried this:

var tooltip = function(){

    var foobar = 'foo and bar';

    function getAlerter(){
        return alert(foobar);
    }

    return{
        alerter: getAlerter
    }

}();

tooltip.alerter();

Which alerts ‘foo and bar’ as expected.

However, i need to pass the element that triggered the tooltip functionality like so:

var tooltip = function(elem){

    var trigger = elem;

    function getAlerter(){
        return alert(trigger);
    }

    return{
        alerter: getAlerter
    }

}();

tooltip.alerter('.trigger');

But this returns undefined. Am not sure why 🙁

Answer 1

It’s because you are using immediately executing function (() at the end of your ‘module’), and at the moment when your function is declared and executed no value is passed.

You could tell your getAlerter function to accept additional parameter:

function getAlerter(trigger){
   // your getter code...
}

but it questions the whole idea behind your pattern.
If you want to invoke your module with an element assigned, you most likely should end up with something like this:

var tooltip = function(elem){
    // your whole module code...
}('.trigger');

or, if you want multiple instances, remove the () at the end of your ‘module’, and run it like this:

var myTooltip = tooltip('.alerter');
myTooltip.alerter();

if you want to keep it as a single instance, you could easily add init method:

var tooltip = function(elem){

    var trigger;

    function getAlerter(){
        return alert(trigger);
    };

    function init(elem) {
        trigger = elem;
    }
    return{
        alerter: getAlerter,
        init: init
    }
}();

and run it like this:

tooltip.init('.alerter');
tooltip.alerter();