Ответы пользователя по тегу JavaScript
  • Как добавить элемент в массив по условию JS?

    Элегантный способ - это не всегда хорошо. Если массив не занимает мегабайты данных, то самым простым способом будет создание нового выходного массива нулевой длины, а потом, просто перебирая элементы оригинального массива, вставляете их в новый массив, а в нужные моменты просто вставляйте сперва эту вставку , а потом сразу элемент оригинального массива.
    И не нужны вам эти "шикарные" reduce в данной ситуации. Обычный цикл for. Потому что reduce совершенно бесполезен конкретно в данном случае, а читаемость ухудшит.

    const arr = [
        {src: 'some-path-1', video: 'some-path-1'},
        {src: 'some-path-2', video: 'some-path-2'},
        {src: 'some-path', video: null},
    ];
    
    const result = [];
    for (let i = 0; i < arr.length; i++) {
      if (arr[i]?.video) {
        result.push({ src_video: arr[i].video });
      }
      result.push(arr[i]);
    }
    
    console.log(result);
    Ответ написан
    9 комментариев
  • Как решить зависимость класса от другого класса?

    У вас циклическая зависимость. Это первейший признак того, что вы что-то неправильно спроектировали. Выносите функционал, используемый обоими классами, в третий класс. Тогда вы избавитесь от циклической зависимости.
    Ответ написан
    Комментировать
  • Как заблокировать работу с окном браузера при перезагрузке страницы?

    Всем "опасным" кнопкам по умолчанию устанавливаем атрибут disabled. Тогда их нельзя будет нажать.

    <button class="dangerous"  disabled>Сохранить</button>


    И сделать обработчик события загрузки страницы, который уберет этот самый атрибут с опасных кнопок по окончании полной загрузки страницы

    document.addEventListener(‘load’, function() { 
    	const dangers = document.querySelectorAll(".dangerous");
            dangers.forEach((item) => {
                  item.removeAttribute('disabled'):
            });
    }


    Если же вас беспокоят именно элементы, остающиеся на экране при старте перезагрузки, то самым простым решением было бы вообще удалить весь html страницы до перезагрузки, а потом спокойно её запустить. Либо вы можете точно так же в момент, когда вам надо запустить перезагрузку, установить всем опасным кнопкам атрибут disabled, а потом стартовать перезагрузку страницы.

    Но!!! Данный подход только лишь сделает жизнь пользователей более приятной. Не забывайте, что фронтенд-фрогнтендом, но бэкенд должен всё же уметь работать с такими запросами, которые не будут содержать в себе все нужные данные.
    Первое правило бэкенда - "Никогда не верь фронтенду и его данным, проверяй и валидируй всё"
    Ответ написан
    Комментировать
  • Как создавать, принимать и обрабатывать socket?

    1. Вебсокеты - это сложновато.
    2. Вебсокеты на PHP - вдвойне сложно. Проблема в том, что PHP задуман как скриптовый язык, т.е. скрипт выполняется заканчивает свою работу. А вебсокет - это постоянное соединение, т.е нам надо, чтобы программа постоянно крутилась в фоне. Вебсокеты можно реализовать на PHP, но, как персонально мне кажется, проще будет выучить Go )) , или же, как в ответе уважаемого Артём , сделать сервер на ноде.
    3. Если ваш чат не такой супер-функциональный, как чат в мессенджерах, то вместо вебсокетов можно обойтись SSE (Server Sent Events). SSE так же требует постоянного соединения, но всё работает через HTTP, и это ну прямо намного проще. Единственный недостаток - это то, что SSE работает только в одну сторону: от сервера в браузер. Т.е. запросы из браузера можно получать обычным POST запросом, а отдавать обратно информацию уже через SSE.

    С SSE есть два пути:
    1. Написать сервер самому, используя какую-то простую библиотеку вроде этой https://github.com/hhxsv5/php-sse
    2. Но я бы сделал ещё проще. Есть такой великолепный проект под названием Mercure https://mercure.rocks
    Это отдельный сервис на Go, задача которого как раз поддерживать SSE соединение и отправлять сообщения в браузеры. Сервис сидит в фоне, а браузеры подписываются на события через EventSource буквально в три строчки, как описано тут https://mercure.rocks/docs/getting-started
    Прелесть этого в том, что для того, чтобы отправить сообщение всем браузерам из кода на PHP, вам надо просто сделать обычный POST запрос на специальный адрес этого сервиса Mercure с телом самого сообщения и его id. Т.е. вам не надо делать никаких долгоживущих процессов на PHP, всё будет работать как раньше.

    Т.е. подытожим:
    - Браузеры пользователей подписываются на события в Mercure
    - Пользователь 1 отправляет текстовое сообщение обычным POST запросом на обычный PHP сайт.
    - PHP сайт получает этот POST запрос, определяет, что его надо отправить Пользователю 2, и отправляет соответствующее сообщение обычным POST запросом в сервис Mercure
    - Mercure отправляет сообщение Пользователю 2 через SSE, на которые он подписан.
    - Сообщение появляется у него на страничке
    Ответ написан
    5 комментариев
  • Как предотвратить бесконечную загрузку страницы при отправке post запроса?

    Использовать SSE (Server Sent Events). Это на порядок проще, чем вебсокеты, но мощь практически такая же.
    Вот неплохая статья на английском.
    https://blog.stackademic.com/real-time-communicati...

    Кстати, библиотека HTMX позволяет это обрабатывать и без написания Javascript
    https://htmx.org/extensions/server-sent-events/
    Ответ написан
    Комментировать
  • Есть ли сейчас необходимость в HTML5Shiv и Modernizr?

    Вы должны отталкиваться от того, кем являются ваши пользователи.

    Если ваш продукт рассчитан на банки или корпорации, то надо заморочиться с обратной совместимостью. Там люди сидят иногда на очень старых версиях всего.

    Если же это обычные люди, сидящие в интернете, то, скорей всего они используют Chrome или Microsoft Edge. Эти браузеры постоянно обновляются в фоне, и перед внедрением новых фич вам просто нужно периодически заходить на https://caniuse.com/ и ориентироваться на последние 2 версии этих браузеров. Safari может стать проблемой, если ваши пользователи часто покупают Маки. Safari - это, к большому сожалению, новый IE6, который тормозит индустрию...

    Самый лучший способ - это собрать информацию. Если у вас уже есть какой-то сайт для вашей аудитории, то там и собирайте статистику. Исходя из этой статистики принимайте решение. Охватывать все 100% не стоит, лишняя трата времени, денег, нервов. Оно не окупается. Каким процентом пользователей вы можете пренебречь - это всегда индивидуальное решение, но убедить руководство, что такое решение надо принять, всегда надо, потому что вы потом закопаете проект в этой обратной совместимости и потенциальных багах и уязвимостях, идущих с ней в пакете...
    Ответ написан
    6 комментариев
  • Есть ли смысл учить jquery?

    1. Выучить JS
    2. Поверхностно ознакомиться с jQuery
    3. Написать собственную микро-jQuery в учебных целях - реально поможет со всем разобраться.
    4. Использовать jQuery, если надо быстро клепать лендинги. Использовать чистый JS в более сложных проектах.

    Без знания JS не стоит браться за jQuery, потому что не захочется учить сам JS, а это вызовет огромные проблемы, когда нужно будет сделать что-то посложней. Сам когда-то давно начал с jQuery, и потом пришлось в авральном режиме изучать JS, много заказов потерял
    Ответ написан
    3 комментария
  • Кнопка - переключатель на jQuery?

    Вот идея кастомного чекбокса на CSS без всякого JS.
    https://codepen.io/vitiok78/pen/pmbyzE
    Ответ написан
    Комментировать