Лучшая практика для добавления дочернего текста в цикл for - PullRequest
Новая
       5

Лучшая практика для добавления дочернего текста в цикл for

0 голосов
/ 27 ноября 2018

Здесь я создаю элемент span для иконки, а затем добавляю класс, чтобы скрыть его (пока не появится).Я делаю то же самое для второго диапазона, который будет содержать всплывающую подсказку и добавляет CSS для стилизации.

Затем я перебираю shipCell, который является столбцом ячеек, и добавляю btnSpan и tipSpan.при добавлении иконки (буфера обмена) с помощью .inerHTML и добавлении текста «Copy ShipID» в tipSpan с помощью .innerText. 

var btnSpan = document.createElement("span");
    btnSpan.classList.add('quickLink');  // Add class to all quickLinks
var tipSpan = document.createElement("span");
    tipSpan.classList.add('tooltip');    // Add class to all tooltips

for(var i=0;i<shipCell.length;i++){
        btnSpan.innerHTML = '&#128203;';
        shipCell[i].appendChild(btnSpan.cloneNode(true));  //add button to each cell

        tipSpan.classList.add('copytip');  //add class for copy buttons specifically
        tipSpan.innerText = 'Copy ShipID';
        shipCell[i].appendChild(tipSpan.cloneNode(true));  //add tool tip to each cell");
    };

Все это работает как надо (особенно после изученияcloneNode(true), который позволяет добавлять его к каждой ячейке, а не только к первой.

Мой вопрос здесь заключается в том, будет ли разумнее создавать текстовые узлы для вещей, которые я использовал .innerHTML? Если да, тоКак? Потому что я попытался создать текстовый узел и добавить его в цикл, но это добавило бы новую копию КАЖДЫЙ раз, поэтому во всплывающей подсказке второй ячейки было указано «Копировать ShipIDCopy ShipID» (да, дважды)

1 Ответ

0 голосов
/ 27 ноября 2018

Ну, хотя ваш существующий код не является неправильным, большая часть кода в цикле for не нужна и может быть сокращена до: 

var btnSpan = document.createElement("span");
btnSpan.classList.add('quickLink');  // Add class to all quickLinks
btnSpan.innerHTML = '&#128203;';     // Moved this out from loop

var tipSpan = document.createElement("span");
tipSpan.classList.add('tooltip');    // Add class to all tooltips
tipSpan.innerText = 'Copy ShipID';   // Moved this out from loop

for (var i = 0; i < shipCell.length; i++){
    shipCell[i].appendChild(btnSpan.cloneNode(true));  //add button to each cell
    shipCell[i].appendChild(tipSpan.cloneNode(true));  //add tool tip to each cell");
};

Потому что с помощью .cloneNode(true),вы также клонируете все его дочерние узлы внутри.Это означает, что вам не нужно постоянно присваивать .innerHTML и .innerText, потому что с помощью true в .cloneNode() они также будут клонированы.

Вам нужно будет только переназначить их, если вы используете.cloneNode(), без аргумента true.Однако в этом случае ваш существующий код потребует незначительной настройки.

var btnSpan = document.createElement("span");
btnSpan.classList.add('quickLink');  // Add class to all quickLinks

var tipSpan = document.createElement("span");
tipSpan.classList.add('tooltip');    // Add class to all tooltips

var btnSpanClone,
    tipSpanClone;

for (var i = 0; i < shipCell.length; i++){
    btnSpanClone = btnSpan.cloneNode();  // New btnSpan element without childNodes
    tipSpanClone = tipSpan.cloneNode();  // New tipSpan element without childNodes

    btnSpanClone.innerHTML = '&#128203;';
    tipSpanClone.innerText = 'Copy ShipID';

    shipCell[i].appendChild(btnSpanClone);
    shipCell[i].appendChild(tipSpanClone);
};

Что касается вашего вопроса о том, разумнее ли использовать .createTextNode(), то в данном конкретном случае это не имеет значения, поскольку к вашим btnSpan и tipSpan больше нечего добавить.Если есть, то МОЖЕТ быть лучше использовать его для лучшей организации кода и читабельности.

Самое главное, чтобы ваш код был понятен любому.

Так что если вы думаете, используя.createTextNode() может сделать код более читабельным и понятным, а затем использовать его.Если нет, то не надо.

Если вы говорите о производительности кода здесь, вы можете сравнить обе реализации самостоятельно, используя jsPerf или некоторые другие инструменты тестирования JS.Скорее всего, разница в производительности будет очень мала и может быть проигнорирована.

...