如何将JavaScript DOM元素放在object中并访问它们？

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

访问徽标DOM元素似乎不是这样工作的：EXAMPLE.config.logo

Answer 1

您确实把config部分放错了地方--不是放在EXAMPLE对象文字中，而是放在了basicExample函数中(在这个函数中，它相当于一个内部没有op表达式语句的labelled块语句，所以它没有抛出错误)。相反，它应该是

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

Answer 2

您正在使用对象文字表示法来定义一个对象，并且在该对象中定义一个构造函数，该函数需要通过new使用才能有用。我相信您想要的是创建一个包含单个对象的命名空间。

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

var EXAMPLE = {
   basicExample : {
     config : {
         logo : $('#logo')
     }
  }
}

Answer 3

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

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

然后在document ready上调用.basicExample().applyHover()。