使用模块化Javascript在元素中存储元素

Question

var menu = {

    //The elements we'll be using in the Menu
    elements: {},
    el: this.elements, //Doesn't work


    init: function() {


        el.$header = $('header');
        el.$myDiv = $('.arrow');

        el.$myDiv.on('click', function(e){
            e.stopPropagation();
            menu.open();
        });

    },


    open: function() {

        el.$header.addClass('whatever');
        ...

我正在尝试学习Javascript的一些最佳实践，而且我在元素引用方面遇到了麻烦。我有一个对象elements，它将填充表示DOM中元素的变量。调用menu.init时，这些变量会添加到此对象中（当窗口加载时，否则会失败）。

我不是每次都要输入{​​{1}}或menu.elements，而是将其存储为变量，例如this.elements。我当前的实现提供了错误：el。我怎样才能做到这一点？

Answer 1

你可能只有一个内部函数变量：

var menu = {

//The elements we'll be using in the Menu
elements: {},
init: function() {
  var el=this.elements;

    el.$header = $('header');
    el.$myDiv = $('.arrow');

    el.$myDiv.on('click', function(e){
        e.stopPropagation();
        menu.open();
    });

},

顺便说一下

el:this.elements

不会工作。对象属性在创建时无法相互访问。