2

我想将所有 JavaScript DOM 元素查询放在一个对象中，并在我的脚本中访问它们。这是我正在使用的当前设计模式，如果可能的话，我想坚持这种格式：

(function ($) {

EXAMPLE = {

    basicExample : function () {

        config : {
            logo : $('#logo'),
            footer : $('footer'),
        },

        EXAMPLE.config.logo.hover(function () {
            $(this).addClass('example');
        }, function () {
            $(this).removeClass('example');
        });
}

EXAMPLE.basicExample();

})(jQuery);

访问 logo DOM 元素似乎不像这样工作：EXAMPLE.config.logo

4

6 回答 6

4

您确实放错了config部分 - 不是在您的EXAMPLE对象文字中，而是在您的basicExample函数中（它充当标记块语句，内部没有操作表达式语句，所以它没有抛出错误）。相反，它应该是

(function ($) {
    EXAMPLE = {
        config : {
            logo : $('#logo'),
            footer : $('footer'),
        },
        basicExample : function () {
            EXAMPLE.config.logo.hover(function () {
                $(this).addClass('example');
            }, function () {
                $(this).removeClass('example');
            });
        }
    };
    EXAMPLE.basicExample();
})(jQuery);

但是，您需要将初始化放入 DOM-ready 处理程序中，否则它可能找不到元素。所以要么使用

EXAMPLE = {
    init : function($) {
        EXAMPLE.config = {
            logo : $('#logo'),
            footer : $('footer'),
        };
        EXAMPLE.basicExample();
    },
    basicExample : function() {
        this.config.logo.hover(function () {
            jQuery(this).addClass('example');
        }, function () {
            jQuery(this).removeClass('example');
        });
    }
};
jQuery(EXAMPLE.init);

或者只是把所有东西都放在处理程序中，没有任何模块模式和额外的basicExample功能：

jQuery(function ($) {
    var config = {
        logo : $('#logo'),
        footer : $('footer'),
    };
    config.logo.hover(function () {
        $(this).addClass('example');
    }, function () {
        $(this).removeClass('example');
    });
});
于 2013-05-21T17:50:14.463 回答
1

您正在使用对象文字符号来定义一个对象，并在该对象内部定义一个构造函数，需要通过 new 使用它才能有用。我相信您想要的是创建一个名称空间，其中包含一个对象。

尝试删除该功能，您应该能够访问它，因此：

var EXAMPLE = {
   basicExample : {
     config : {
         logo : $('#logo')
     }
  }
}
于 2013-05-21T17:47:53.540 回答
1

我建议像这样声明一个全局对象：

EXAMPLE = {
    basicExample: function () {
        this.config = {
            logo: $('#logo'),
            footer: $('footer')
        };
        return this;
    },
    applyHover: function () {
        this.config.logo.hover(function () {
            $(this).addClass('example');
        }, function () {
            $(this).removeClass('example');
        });
    }
};

然后调用一个.basicExample().applyHover()准备好的文件。
小提琴示例

于 2013-05-21T17:57:34.627 回答
0

末尾有一个逗号config。

config : {
            logo : $('#logo'),
            footer : $('footer'),
        },

应该：

config : {
            logo : $('#logo'),
            footer : $('footer')
        },
于 2013-05-21T17:48:02.910 回答
-1

你可以这样做：

var EXAMPLE = {
   basicExample : {
     config : {
         logo : $('#logo')
     }
  }
}
EXAMPLE.basicExample.config.logo.hover(function () {
            $(this).addClass('example');
        }, function () {
            $(this).removeClass('example');
        });

提琴手

或者你可以按照Artyom的建议去做。

于 2013-05-21T18:00:45.660 回答
-2

EXAMPLE.basicExample是一个包装你的config参数的函数。这就是为什么它不能用于EXAMPLE.config. 如果您希望将函数EXAMPLE.basicEXAMPLE定义config为的元素，EXAMPLE请执行以下操作：

EXAMPLE = {

    basicExample : function () {

        EXAMPLE.config = {
            logo : $('#logo'),
            footer : $('footer'),
        },

        EXAMPLE.config.logo.hover(function () {
            $(this).addClass('example');
        }, function () {
            $(this).removeClass('example');
        });
    }
}
于 2013-05-21T17:49:51.723 回答