3

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

$('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
  }
});
<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
  <li>Fifth</li>
  <li>Sixth</li>
  <li>Seventh</li>
  <li>Eighth</li>
  <li>Ninth</li>
  <li>Tenth</li>
</ol>

Фиддл


В данном случае, есть ли какие-то выгоды от использования этого:

$(domEl).text()

в сравнении с этим:

domEl.textContent

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

4
  • если используешь jquery в проекте, смысл не пользоваться им всецело? все равно библиотека уже подгружена, а иначе смысл ее подгружать, если сможешь использовать только нативные средства? 11 сен 2016 в 8:00
  • @Jean-Claude, да, согласен с этим, здесь скорее вопрос стоит в том, что стоит ли миксовать нативные методы с методами jQuery или выбрать один стиль и использовать только его ... Думаю, отмеченный мною ответ, отвечает на мой вопрос. 11 сен 2016 в 9:34
  • 1
    Я считаю, что в 2016 году jQuery не нужен вообще
    – andreymal
    11 сен 2016 в 10:24
  • 1
    @andreymal, почему же?
    – Grundy
    11 сен 2016 в 19:38

2 ответа 2

6

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

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

3

Метод .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 в этом плане обеспечивает поддержку и более старых браузеров.

2
  • 2
    Возможно, метод jQuery в этом плане обеспечивает поддержку и более старых браузеров. - зависит от версии jQuery
    – Grundy
    11 сен 2016 в 8:39
  • Спасибо за ответ и отдельное за ресурсы! 11 сен 2016 в 15:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.