Question

I have this example module which I want to initialize without making individual call but by having an array in the consumer page so each page can have a little array with the name of its required modules.

I have done this but it doesn’t call the module:

var navModule = (function() {
    var nav = {};
    var navHTMLobjs = {
        navList: $('#nav'),
        listItems: $('#nav').find('li'),
        listLinks: $('#nav').find('a')
    };
    nav.bindOver = function() {
        navHTMLobjs.navList.on('mouseover mouseout', 'li a', function(e) {
            if (e.type == 'mouseover') {
                $(this).addClass('over');
            }
            if (e.type == 'mouseout') {
                $(this).removeClass('over');
            }
        });
    };
    nav.isOverBinded = function() {
        return navHTMLobjs.navList.data('events').hasOwnProperty('mouseover') && navHTMLobjs.navList.data('events').hasOwnProperty('mouseout');
    };
    nav.turnOff = function() {
        navHTMLobjs.navList.off('mouseover mouseout');
    };
    nav.isNavTurnedOff = function() {
        return !navHTMLobjs.navList.data.hasOwnProperty('events');
    };
    nav.init = function() {
        this.bindOver();
    };
    return nav;
});
//var myNav = new navModule($('#nav'));
//myNav.init();
// So I want to only include this array which will be written by 
//back end and each page will only have its required bits.
var pageModules = ['navModule'];
for (var m in pageModules) {
    var fn = window[pageModules[m]];
    //var fn = Function(pageModules[m]); This says navModule is not defined :(
    if (typeof fn === 'function') {
        var inner = new fn();
        inner.init();
    }
}

Currently returns fn as undefined

Also let me know if this is the right way to go about this and if not maybe a suggestion.

Thanks

Answer 1

may be i don’t get the point, bu if you remove brackets covering anonymous function than it will not be envoked immediately and will be accessible to call via window[pageModules[m]]

in your case when function envokes immediately nav.init -> nav.bindOver, which doesn’t have any return statement so results undefined

var navModule = function() {
                var nav = {};
                var navHTMLobjs = {
                    navList: $('#nav'),
                    listItems: $('#nav').find('li'),
                    listLinks: $('#nav').find('a')
                };
                nav.bindOver = function() {
                    navHTMLobjs.navList.on('mouseover mouseout', 'li a', function(e) {
                        if (e.type == 'mouseover') {
                            $(this).addClass('over');
                        }
                        if (e.type == 'mouseout') {
                            $(this).removeClass('over');
                        }
                    });
                };
                nav.isOverBinded = function() {
                    return navHTMLobjs.navList.data('events').hasOwnProperty('mouseover') && navHTMLobjs.navList.data('events').hasOwnProperty('mouseout');
                };
                nav.turnOff = function() {
                    navHTMLobjs.navList.off('mouseover mouseout');
                };
                nav.isNavTurnedOff = function() {
                    return !navHTMLobjs.navList.data.hasOwnProperty('events');
                };
                nav.init = function() {
        console.log('i am called');
                    this.bindOver();
                };
                return nav;
            };