Можно ли ещё сократить код?

Ссылка скопирована
JavaScript
1 ответ

Вроде код дублируется значит в теории его можно ещё сократить или вынести в функцию?

titleElement.appendChild(   create({     el: "span",     className: "currentTime",     text: "00:00",   }) ); titleElement.appendChild(   create({     el: "span",     className: "duration",     text: "00:00",   }) );

titleElement.appendChild( create({ el: "span", className: "currentTime", text: "00:00", }) ); titleElement.appendChild( create({ el: "span", className: "duration", text: "00:00", }) );

snippet

Дополнительно:

Использовать цикл

const els = [     ["author", "Author - "],     ["name", "Name"],     ["currentTime", "00:00"],     ["duration", "00:00"], ];  els.forEach(el => {     titleElement.appendChild(         create({             el: "span",             className: el[0],             text: el[1],         })     ); })

const els = [ ["author", "Author - "], ["name", "Name"], ["currentTime", "00:00"], ["duration", "00:00"], ]; els.forEach(el => { titleElement.appendChild( create({ el: "span", className: el[0], text: el[1], }) ); })

2

const els = [     { el: "span", className: "author",      text: "Author - " },     { el: "span", className: "name",        text: "Name" },     { el: "span", className: "currentTime", text: "00:00" },     { el: "span", className: "duration",    text: "00:00" }, ];  els.forEach( el => titleElement.appendChild( create(el) ) );

const els = [ { el: "span", className: "author", text: "Author - " }, { el: "span", className: "name", text: "Name" }, { el: "span", className: "currentTime", text: "00:00" }, { el: "span", className: "duration", text: "00:00" }, ]; els.forEach( el => titleElement.appendChild( create(el) ) );

Update

А вообще это разнородные элементы. Зачем их по отдельности генерировать. Пусть будет один единственный элемент (компонент) - title. Gecnm у него будет шаблон, и пусть вы будете в этот шаблон передавать данные

function renderTitle (d) {  return `   <div class="title">     <span class="currentTime">${d.time}</span>     <span class="author">${d.author}</span> –     <span class="name">${d.name}</span>     <span class="duration">${d.duration}</span>   </div>   `; } xxx.insertAdjacentHTML('beforeend', renderTitle({   author:   'Author - ',   name:     'Name',   time:     '00:00',   duration: '00:00', }));

function renderTitle (d) { return ` <div class="title"> <span class="currentTime">${d.time}</span> <span class="author">${d.author}</span> – <span class="name">${d.name}</span> <span class="duration">${d.duration}</span> </div> `; } xxx.insertAdjacentHTML('beforeend', renderTitle({ author: 'Author - ', name: 'Name', time: '00:00', duration: '00:00', }));

  • Вау спс
  • Норм так код сократил благодаря вам и рекурсия пригодилась))) Да так проще единственный элемент (компонент) Хочется почувствовать разницу между custom web component, Виртуальный DOM в формате array (Многомерного массива), jsx и как можно синхронизировать виртуальный dom с реальным

    Как то экспериментировал snippet

    Web Components Crash Course

    snippet

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Никита Орлов Ответ

Да, конечно, можно ещё сократить код, чтобы сделать его более компактным и эффективным. Вот несколько способов:

1. Использование тернарного оператора вместо условных конструкций if-else. Например:

$var = ($condition) ? 'value1' : 'value2';

$var = ($condition) ? 'value1' : 'value2';

2. Использование короткого синтаксиса для условных выражений. Например:

$var = $condition ?: 'default';

$var = $condition ?: 'default';

3. Использование функций высшего порядка, таких как array_map, array_filter, array_reduce и т. д., для более компактной обработки массивов. Например:

$filtered = array_filter($array, function($item) {
    return ($item % 2 == 0);
});

$filtered = array_filter($array, function($item) { return ($item % 2 == 0); });

4. Использование оператора null coalescing для проверки наличия значений. Например:

$name = $_GET['name'] ?? 'Guest';

$name = $_GET['name'] ?? 'Guest';

5. Использование короткого синтаксиса для циклов. Например:

foreach($array as $key => $value):
    // код
endforeach;

foreach($array as $key => $value): // код endforeach;

Эти способы помогут уменьшить объем кода, сделать его более читаемым и эффективным. Не забывайте, что важно найти баланс между краткостью и читаемостью кода, чтобы облегчить его понимание другим разработчикам.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Figma Баг с переносом слов в Figma? 1 ответ