Правильный вывод блоков html через js

257

10 декабря 2016, 10:38

Обычно я добавляю а страницу код, полученный через js таким способом. Но может есть какой-то более удобный метод?

for (var i = 0; i < n; i++) {
    if ($data.data.MOW[i]) {
        $html.append(
        '<p>Пользователь: <span class="user">' + user.nickname + '</p>')
    }
}

Answer 1

Зависит от того, что для вас "удобно".

Оптимизация

Манипуляции с DOM всегда занимают много времени, поэтому нужно минимизировать кол-во обращений к DOM, учитывая, что вы делаете это в цикле.

var html = [];
for (var i = 0; i < n; i++) {
  if ($data.data.MOW[i]) {
    html.push('<p>Пользователь: <span class="user">' + user.nickname + '</p>');
  }
}
$html.append(html.join('\n'));

Шаблонные строки (ES6)

В новой спецификации ECMAScript 6 появились 'шаблонные строки'.

for (var i = 0; i < n; i++) {
  if ($data.data.MOW[i]) {
    $html.append(
    `<p>Пользователь: <span class="user">${user.nickname}</p>`)
  }
}

Конечно же можно объединить оба способа выше.

Шаблонизатор

Все (ну или почти) шаблонизаторы имеют возможность работы с циклами для отрисовки элементов. Из шаблонизаторов я бы посоветовал doT.js (статья doT.js + jQuery). Но не одним doT.js едины, есть еще много разных шаблонизаторов, из которых вы можете выбрать на свой вкус тут.