从数组执行页面模块

时间:2012-07-12 09:57:49

标签: javascript jquery 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();
    }
}

目前将fn作为未定义

返回

另请告诉我这是否是正确的方法,如果不是这样的建议。

由于

3 个答案:

答案 0 :(得分:1)

在if段工作正常之前,将代码与复制粘贴一起使用并添加console.log(fn);,将函数显示为fn的内容。

你得到的未定义可能来自inner.init()没有返回任何内容的事实。

答案 1 :(得分:1)

可能是我不明白,如果你删除包含匿名功能的括号,则不会立即使用,并且可以通过{访问来调用 {1}}

在你的情况下当函数立即调用nav.init - > nav.bindOver,它没有任何return语句,因此结果未定义

window[pageModules[m]]

答案 2 :(得分:1)

检查一下。它对我来说似乎很好。 http://jsfiddle.net/sujay/ec8bU/

您要注意的唯一区别是我在var定义之前删除了navModule关键字。

我建议您选择类似RequireJS

的内容