Возьмём для примера следующий сниппет:
$('li').each(function(idx, domEl) {
console.log('----------------------------------------');
console.log('idx | ' + idx );
console.log('domEl === this | ' + (domEl === this) ); // true
console.log('domEl | ' + domEl ); // [object HTMLLIElement]
console.log('$(domEl).text() | ' + $(domEl).text() );
console.log('domEl.textContent | ' + domEl.textContent);
if (idx === 5) {
return false; // to exit the loop
}
});
- First
- Second
- Third
- Fourth
- Fifth
- Sixth
- Seventh
- Eighth
- Ninth
- Tenth
Фиддл
В данном случае, есть ли какие-то выгоды от использования этого:
$(domEl).text()
в сравнении с этим:
domEl.textContent
И что из этих двух вариантов является лучшей практикой?
Ответ
Синтетические тесты такие синтетические.
Если посмотреть, что именно происходит в методе text
getText = Sizzle.getText = function( elem ) {
var node,
ret = "",
i = 0,
nodeType = elem.nodeType;
if ( !nodeType ) {
// If no nodeType, this is expected to be an array
while ( (node = elem[i++]) ) {
// Do not traverse comment nodes
ret += getText( node );
}
} else if ( nodeType === 1 || nodeType === 9 || nodeType === 11 ) {
// Use textContent for elements
// innerText usage removed for consistency of new lines (jQuery #11153)
if ( typeof elem.textContent === "string" ) {
return elem.textContent;
} else {
// Traverse its children
for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
ret += getText( elem );
}
}
} else if ( nodeType === 3 || nodeType === 4 ) {
return elem.nodeValue;
}
// Do not include comment or processing instruction nodes
return ret;
};
можно заметить, что для примера из вопроса будет вызван - тот же самый textContent
Также можно отметить, что текст функции унифицирован, чтобы ее можно было вызывать с разными типами аргументов, начиная от массива(коллекции) и заканчивая различными типами узлов: элементы, текстовые узлы и т.д.
Таким образом, если в момент написания скрипта есть точная уверенность из какого типа элементов нужно будет брать текст - можно воспользоваться необходимым свойством напрямую, для кода из вопроса - использовать textContent на непосредственно html элементе. Это позволит избежать расходов на вызов конструктора jQuery и соответствующие проверки внутри самой функции.
Если же неизвестно для чего будет применяться метод - то лучше воспользоваться методом jQuery.
Комментариев нет:
Отправить комментарий