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函数内部（它作为labelled块语句，而没有 - op表达式语句里面，所以它没有引起错误）。相反，它应该是

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

然后在准备好的文档上调用.basicExample().applyHover() 的 FIDDLE EXAMPLE

Answer 4

config。

末尾有逗号

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

应该是：

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

Answer 5

你可以这样做：

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

JsFiddle

或者您可以执行Artyom建议的内容。

Answer 6

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

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

6 个答案: