Что использовать: методы jQuery или нативные методы JavaScript?

#javascript #jquery

Возьмём для примера следующий сниппет:



$('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


И что из этих двух вариантов является лучшей практикой?
    

Ответы

Ответ 1

Синтетические тесты такие синтетические.

Если посмотреть, что именно происходит в методе 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.


Ответ 2

Метод .text() в jQuery позволяет получать текст не только из одиночного нода, но,
например, из массива нод, отобранных по селектору. В ряде случае jQuery организует
поддержку старых браузеров, в которых аналогичный ванильный метод еще не поддерживался.

Вот, например, исходники метода .text():

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


Поддержка массива нод, корректная обработка нод с нодами-детьми вместо текста.


  Исходники методов jQuery можно просматривать здесь.


Также есть ресурс youmightnotneedjquery.com, показывающий, каким ванильным методом
можно заменить требуемый метод jQuery. Согласно ему, .text() можно заменить на .textContent,
но поддержка будет только IE9+. Возможно, метод jQuery в этом плане обеспечивает поддержку
и более старых браузеров.