буквальные объект и JQuery селекторы DRY

Question

У меня есть случай, когда я хочу сделать это:

var els = { 
    div: $('div'), 
    p: els.div.find('p'), 
    span: els.p.find('span') 
}; 

Но это происходит:

console.log(els.div); // Works 
console.log(els.p); // undefined 

Так что я сейчас делаю это:

var els = (function(){ 
    var div = $('div'), 
     p = div.find('p'), 
     span = p.find('span'); 
    return { 
     div: div, 
     p: p, 
     span: span  
    } 
}()); 

console.log(els.p); // Works now 

Есть ли способ сделать это DRYer? Похоже на кучу кода, чтобы просто сделать это.

Answer 1

Вы можете построить его шаг за шагом:

vars els = { div: $('div') }; 
els.p = els.div.find('p'); 
els.span = els.p.find('span'); 

Или так:

vars els = { }; 
els.div = $('div'); 
els.p = els.div.find('p'); 
els.span = els.p.find('span'); 

, если он кажется более согласующейся с вами.

Answer 2

Вы должны иметь возможность просто сделать что-то подобное, не так ли?

var els = { 
    div: $('div'), 
    p: this.div.find('p'), 
    span: this.p.find('span') 
}; 

Я использовал this ключевое слово вместо els внутри объекта.

Answer 3

Чтобы сделать этот шаг дальше, вы можете использовать Factory Pattern для обработки создания объекта для вас.

function getChildElements(container, childTags) { 
    var elements = {}; 

    // Default tags to find if none were specified. 
    childTags = childTags || [ "p", "span" ]; 

    // Loop through the childTags and find them in the container 
    childTags.forEach(function (tag) { 
     elements[tag] = container.find(tag); 
    }); 

    return elements; 
} 

Клиенты могут использовать этот фабричный метод для извлечения дочерних элементов из родителя так:

var els = getChildElements($("div"));