Ответы пользователя по тегу JavaScript
  • Как правильно изменить скрипт?

    @twoone
    document.addEventListener('DOMContentLoaded', function() {
      let numbers = [
        '+38 (095) 123 45 67',
        '+38 (096) 123 45 67',
        '+38 (097) 123 45 67',
        '+38 (098) 123 45 67',
        '+38 (099) 123 45 67',
      ];
      
      function getNumber(numbers){
        numbers.push(numbers.shift());
        
        return numbers[0];
      }
      
      function setNumber(number){
        let link = document.getElementById('phone');
        link.innerText = number;
        link.setAttribute('href', 'tel:' + number);
      }
      
      function update(){
        setNumber(getNumber(numbers));
      }
      
      update();
      
      setInterval(update, 2000);
    });
    Ответ написан
    Комментировать
  • PIXI js как оптимизировать фильтры (motion blur filter)?

    @twoone
    В реальных играх фильтры не используют, все делается на png. В качестве варианта решения вашей проблемы можно попробовать сделать предварительные рендер фильтров. То есть нарисовать шейп, применить к нему фильтр, а затем отрисовать шейп с фильтром в спрайт. Таким образом создаете множество спрайтов и уже их в мувиклипе объединяете и при необходимости рендерите его как анимацию.

    Но прежде нужно посмотреть доки, вдруг там галачка есть кеширования фильтров. Просто я фильтры никогда не использовал и поэтому не знаю.
    Ответ написан
    6 комментариев
  • Написал функцию рекурсивного сравнения значений 2 массивов, а она при любых значениях выдаёт undefined. Где ошибка?

    @twoone
    reduce не подходит так как в отличии от every будет выполнятся для всего массива даже если в встретит несоответствие в самом начале. Для проверки на принадлежность к массиву есть Array.isArray и ещё сразу проверять идентичность длины и её наличие.

    const f = (a, b) => Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.length > 0 ? 
          a.every((item, index) => f(item, b[index])) :
          a === b;
    
    console.log(f([0, 1, [3]], [0, 1, [3]]))
    Ответ написан
    Комментировать
  • Как отдать на клиент страницу с данными из бд [2020 React SSR with Hook]?

    @twoone
    ssr должен отдавать законченную разметку содержащую всю необходимую информацию. Иначе в нем попросту нет смысла. Запросы к БД это асинхронные операции, а рендер реакта нет. Вызов рендера сравним с вызовом обычной функции, которая вернет результат по выполнению. Она конечно запустит асинхронные обращения к БД, но дожидатся их окончания не будет. Поэтому хуки, которые не являются сервисами, а предназначены для иметации тела класса, не способны разрешить вашу проблему. Хуки созданы для разделения логики работы непосредственно с шаблоном между компонентами. Вы должны строить приложение таким образом чтобы рендер был выполнен со всеми необходимыми данными. Простыми словами работа с данными должа быть вынесена на сервисный слой, который по завершению инициализации используется реактом для получения необходимых данных.
    Ответ написан
    Комментировать
  • Как выбросить ошибку из промиса?

    @twoone
    function increaseSalary() {
      return new Promise((resolve, reject) => {
        let minSalaryEmployee = Promise.resolve().then((employeeData) => {
          return { };
        });
        minSalaryEmployee
          .then((data) => {
            let newSalary = Promise.reject();
            newSalary
              .then((newData) => {
                resolve(`Ok`);
              })
              .catch((e) => {
                reject(`Error`)
              });
          })
          .catch(reject);
      });
    }
    
    increaseSalary()
      .then(console.log)
      .catch(console.error);
    Ответ написан
    2 комментария
  • Не найдены значения из json, как исправить?

    @twoone
    fetch, в отличии от рендера react, это асинхронная операция, поэтому к моменту первого рендера items имеют значение undefined, а следовательно и метода .map также не существует. Проще всего сделать items опциональным -
    function Activity({ items = []}) {}
    Ответ написан
    Комментировать
  • Метод это функция или свойство?

    @twoone
    В классике метод (method) это функция ассоциированная с экземпляром класса (instance) (его объектом) или в случае статического метода непосредственно с самим классом. Свойствами (properties) называют геттеры (getters/get) или сетторы (setters/set). Так же геттер обозначают как акссесор, а сеттор как мутатор. Но зачастую можно встретить упоминание что геттер и сеттор, это аксессоры. Если метод содержит логику, то данные ассоциируются с полями (field). Методы, поля и свойства обозначают как члены (members) объекта\класса.

    Реализация классов в JavaScript отличается от классической поскольку построена на прототипах, что вносит некую долю путаницы. Путанница связанна с тем, что проблемы возникающие от потери контекста (this) вынуждают разработчиков изучать javascript намного глубже, чем это требуется в других классических языках. Из-за того что на уровне движка v8 все является членами объекта, то большинство склоняется что все в объекте это поля. И до момента объявления непосредственно методов {method(){}} это было справедливо. После необходимо разделять эти понятия даже если это всего лиш синтаксический сахар, поскольку даже в классических языках методы на самом низком уровне не могут быть чем-то отличными от полей. И всеже для ясности из называют методами.

    Исходя из всего этого методы точно не могут обозначатся свойствами.
    Ответ написан
    2 комментария
  • Деплой full stack проекта на node js и react?

    @twoone
    Существует два лагеря первый из которых проповедует разделение репозиториев на клиент и сервер, а вторая за объединенный моно-репозиторий. И обе категории правы, поскольку у удних проект состоит из клиента и сервера, а у других один сервер может быть как на множество клиентов, так и на оборот.

    В вашем случае, скорее всего нужно склонятся к монорепозиторию (может потребоватся использование lerna) которые будут состоять из директорий client\server и тому подобное. С дев разработкой можно поступить несколькими путями. Либо запускать реальный сервер (могут возникнуть проблемы с приватными ключами у сторонних разработчиков), либо использовать моки (трбуется постоянная синхронизация которая может быть решена расшариванием моков необходимых для тестирования сервера).

    И для прод сборки и развертывания обязательно используйти ci\cd (github actions например) с помощью которых настроете сборку проекта так как только пожелаете.
    Ответ написан
    Комментировать
  • Разница при обучении javascript backend?

    @twoone
    Поскольку в основе и серверного и клиентского javascript лежит движок v8 синтаксис и основные языковые конструкции идентичны. Разница начинается в реализации api которые у браузера и десктопа значительно отличаются. Кроме того сильно разнятся архитектурные подходы, стек прилегающих технологий (БД, кеширование, nginx, логирование, docker, безопасность, управление нагрузкой, оптимизации которыми на клиенте принебрегают, зачастую администрирование) и повседневные задачи (работа с потоками, понимание сокетов, работа с байтами). Но нельзя сказать что мир фронтенда проще поскольку чуть в сторону от базовых фраймворков, сразу начинается геометрия, svg\сcanvas, анимация, понимание дизайна\арта, не совсем просто dom api.

    Поэтому если вы сомневаетесь с чего начать, то лично я бы посоветовал выбирать между работой с логами в консоли и создания красивого интерфейса. Некоторые вянут в консоли, другие утомляются от красивых анимашек. К чему у вас больше лежит душа? В чем уже есть опыт?
    Ответ написан
    2 комментария
  • Как понять внутреннее устройство Promises в Javascript?

    @twoone
    Давным давно, когда в javascript еще не было Promise, я изучал исходники доступных на тот момент нескольких альтернатив и могу сказать что тому кто только недавно познокомился с концепцией асинхронности бет не так просто разобраться во множестве конструкций необходимых для чистоты кода. Ссылки на лучшие реализации на текущей момент вам уже дали, но если захочется чего-то очень простого с комментами, то можете будет полезен упрощенный до максимума вариант написанный на скорую руку.

    Ответ написан
    Комментировать
  • Как сделать чтобы при скроле менялся цвет меню?

    @twoone
    Можно отслеживать активные секции с помощью IntersectionObserver. Но нужно помнить, что он работает ожидаемым образом только в том случае, если размеры первой и последней секции превосходят половину вьюпорта, что для реальных проектов практически дефакто. Иначе придется эксперементировать с конфигурацией IntersectionObserver.

    Ответ написан
    2 комментария
  • Как реализовать цикл в этой ситуации?

    @twoone
    Можно реализовать бесконечный ротатор на основе генераторов.

    Ответ написан
    1 комментарий
  • Как сделать смену стилей CSS в зависимости от времени суток с помощью JS?

    @twoone
    Если сайт является spa то будет необходимо реализовать постоянную проверку времени и изменение темы путем вызова метода changeTheme.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link id="time-theme" rel="stylesheet" href="">
        <script src="./time-theme.js"></script>
    </head>
    <body>
        
    </body>
    </html>

    let timeRanges = new Set([
        {range: {from: `24`, to: `4`}, name:`night`, href:`./dark-theme.css`},
        {range: {from: `4`, to: `12`}, name: `morning`, href:`./light-theme.css`},
        {range: {from: `12`, to: `17`}, name: `day`, href:`./light-theme.css`},
        {range: {from: `17`, to: `24`}, name: `evening`, href:`./dark-theme.css`},
    ]);
    
    const changeTheme = timeRanges => {
        let currentHour = new Date().getHours();
    
        for(let {range, href, name} of timeRanges){
            if(currentHour >= range.from && currentHour <= range.to){
                Object.assign(document.querySelector(`link#time-theme`), { href });
        
                break;
            }
            
        }
    }
    
    changeTheme(timeRanges);
    Ответ написан
    1 комментарий
  • Как реализовать команду на js?

    @twoone
    Если я правильно вас понял..
    Ответ написан
    Комментировать
  • Как всё-таки ПРАВИЛЬНО вставлять картинки в canvas?

    @twoone
    Изображение представляется файлом хранящимся на сервере и заключающего в себе информацию о пикселях в виде двухмерного массива чисел. Самый простой способ получить эти данные в программе загрузить их с помощью объекта Image, а затем передать его в метод drawImage для отрисовки на канвасе. Если вы не дождетесь полной загрузки данных то рисовать будет попросту нечего. Поэтому Ваша цель заключается в полной загрузке всех изображений и отрисовки их в нужном порядке. Этого проще всего добится с помощью Promise.

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