2

我有这个示例模块，我想在不进行单独调用的情况下进行初始化，而是在消费者页面中有一个数组，这样每个页面都可以有一个带有所需模块名称的小数组。

我已经这样做了，但它没有调用模块：

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 为未定义

也让我知道这是否是解决此问题的正确方法，如果不是，也许是一个建议。

谢谢

4

3 回答 3

1

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

你得到的 undefined 可能来自于inner.init()什么都不返回的事实。

于 2012-07-17T10:58:29.000 回答
1

可能是我不明白这一点，但是如果您删除了覆盖匿名函数的括号，那么它将不会立即被调用，并且可以通过以下方式调用window[pageModules[m]]

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

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;
            };
于 2012-07-17T11:40:52.240 回答
1

看一下这个。这对我来说似乎工作得很好。 http://jsfiddle.net/sujay/ec8bU/

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

我建议您宁愿使用RequireJS 之类的东西

于 2012-07-17T12:07:25.023 回答