javascript - 如何将 JavaScript DOM 元素放入对象中并访问它们？

Question

我想将所有 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

Answer 1

您确实放错了 config 部分 - 不是在您的 EXAMPLE 对象文字中，而是在您的 basicExample 函数中(它充当 labelled block 语句内有无操作表达式语句，因此不会引发错误)。相反，它应该是

(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 就绪处理程序中，否则它可能找不到元素。所以要么使用

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');
    });
});