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

    Xuxicheta
    @Xuxicheta
    инженер
    https://habr.com/ru/post/309812/
    Суть в том, что не все конечные десятичные дроби можно записать как конечные двоичные дроби. Поэтому появляются нелогичные на первый взгляд хвосты.
    Надо всегда помнить что при операциях с флоатами надо определять какую-то точность.
    0,1+0,2 == 0,3 будет верным, если принять точность до пяти разрядов например.
    Ответ написан
    Комментировать
  • Действительно ли reduce, filter, map и прочие работают медленнее обычного for?

    Xuxicheta
    @Xuxicheta
    инженер
    Сегодня быстрее, завтра не быстрее, послезавтра быстрее.
    Перфоманс таких вещей зависит от реализации js и будет разным на разных движках и версиях.
    Без веских причин не стоит экономить на спичках жертвуя читабельностью.
    Будь методы перебора массивов не нужны, их не сделали бы, правда ведь?
    Ответ написан
    6 комментариев
  • Как блокировать @HostListener прослушку?

    Xuxicheta
    @Xuxicheta
    инженер
    Не совсем понял момент насчет setTimeout.
    В коде мат-диалога есть такое
    // The logic that disposes of the overlay depends on the exit animation completing, however
          // it isn't guaranteed if the parent view is destroyed while it's running. Add a fallback
          // timeout which will clean everything up if the animation hasn't fired within the specified
          // amount of time plus 100ms. We don't need to run this outside the NgZone, because for the
          // vast majority of cases the timeout will have been cleared before it has the chance to fire.
    this._closeFallbackTimeout = setTimeout(() => {
            this._overlayRef.dispose();
          }, event.totalTime + 100);

    overlayRef.dispose() производит отвязывание от событий клавиатуры.
    Как я понял вы по той же причине хотите таймаут, т.к. видимо OnDestroy срабатывает раньше отписок, хотя по коду должен бы после.
    Материал довольно сложно устроен и я не стал бы на это полагаться :)

    Не проще ли сделать глобальный серсвис с событями клавиатуры, диалоговые окна запускать с disableClose: true, при открытие окна блокировать события сервиса для всех, кроме диалога, а сам диалог закрывать руками при получении события эскейпа и сразу снимать блокирование?
    Ответ написан
  • Перенос контента навигации из одного контейнера в другой?

    Xuxicheta
    @Xuxicheta Куратор тега Angular
    инженер
    https://ng-run.com/edit/mGpNNV5K4mQirnqoMJty

    Предлагаю самостоятельно оптимизировать, перевести на потоки, сделать OnPush, разбить на компоненты и сервисы и сделать все еще более абстрактно и реюзабельно.
    Ответ написан
    2 комментария
  • Как сделать простое настольное приложение на JavaScript?

    Xuxicheta
    @Xuxicheta
    инженер

    Желательно конечно чтобы его можно было с минимальными усилиями потом перенести в веб.


    Делаешь обычный сайт на чем угодно, оформляешь к нему манифест PWA и можно устанавливать как обычное приложение на десктоп. Оно закеширует скрипты в сервис-воркере и не надо будет каждый раз скачивать.
    Electron не нужен.

    Вот например официальный сайт Angular удовлетворяет требованиям PWA и может быть инсталлирован
    5def8b9db9bbc873815458.png
    Ответ написан
    Комментировать
  • Как перехватывать все ошибки в приложении, если некоторые функции уже обернуты в try ... catch?

    Xuxicheta
    @Xuxicheta
    инженер
    Правильный ответ - не нужно все ошибки обрабатывать в одном месте.
    А вообще если нужна промежуточная обработка ошибок, делают проброс ошибки дальше
    function mayBeError() {
      try {
        throw new Error('iiii')
      } catch (e) {
        console.error('error in mayBeError');
        throw e;
      }
    }

    Функции должны выкидывать свои ошибки вовне, это нормально.

    Централизованного способа нет и было бы странно если бы он был, иногда исключений просто куча. Их могут в логике использовать.

    Можно только неперехваченные ошибки ловить, через
    для браузера событие error
    window.onerror = function (message, file, line, col, error) {
       console.warn("Error occurred: " + error.message);
       return false;
    };

    и для ноды событие uncaughtException
    https://nodejs.org/api/process.html#process_event_...
    Ответ написан
    Комментировать
  • Как выполнить скрытие и показ одновременно?

    Xuxicheta
    @Xuxicheta
    инженер
    Оно и происходит одновременно, но у вас max-height: 1000px; transition: max-height 1s;
    Когда вы делает клик, максимальная высота одного начинает увеличиваться с 0 до 1000, а у друго уменьшаться с 1000 до 0. В течении секунды аж.
    У которого от 0 до 1000 max-height быстро вырастет на достаточную величину чтобы показать элемент, а когда с тысячи едет, элемент пропадает из виду почти в самом конце анимации.

    Решение - уменьшить время анимации и уменьшить высоту.
    Ответ написан
  • Ре-рендер элемента HTML на JS?

    Xuxicheta
    @Xuxicheta
    инженер
    "перерисовать" это что? Перерисовывать можно по разному, точечно вносить изменения например.
    Содержимое элемента можно сменить полностью задав innerHTML.
    Можно создавать ноды, удалять существующие и на их место вставлять созданные.
    Можно, как это делают некоторые движки, создавать параллельную структуру, а потом пробегаться и искать изменения относительно реальной, и если они найдены менять реальную.
    Ответ написан
    2 комментария
  • Работа с прототипами, как можно сделать лучше?

    Xuxicheta
    @Xuxicheta
    инженер
    Сделать лучше очень просто - не надо так делать. Расширять стандартные объекты плохо, потом сами забудете где какие изменения.
    Используйте обычное
    const revStr = str => str.split("").reverse().join("");

    При вызове занимает практически столько же места и всегда можно отследить откуда она взялась и никаких потенциальных конфликтов.
    Да и что касается геттеров, лучше ими не злоупотреблять.
    Ответ написан
  • Задание с learn.javascript. Поясните код?

    Xuxicheta
    @Xuxicheta
    инженер
    + Чтобы число получить и работало строгое равенство number === 0
    Унарный плюс
    https://learn.javascript.ru/operators#preobrazovan...
    А обратных слешей у тебя в вопросе вообще нет, но вообще они используются для экранирования или указания спецсимволов
    Ответ написан
    Комментировать
  • Какой проект сделать чтоб показать силу в JavaScript?

    Xuxicheta
    @Xuxicheta
    инженер
    Написать свой компонентный фреймворк
    Ответ написан
    Комментировать
  • Как отключить звук на всей странице в React?

    Xuxicheta
    @Xuxicheta
    инженер
    new Audio() создает HTMLAudioElement.
    Вместо того чтобы создавать его каждый раз, его можно создать один раз или даже вставить в разметку, а из события дергать только play
    Чтобы заткнуть проигрыватель, ему нужно выставить свойство muted в true. Вы же тут даже ссылки на него не оставляете, поэтому свойство ставить некуда.

    А уж как это сделать глобально вам решать, можно через стор типа redux.

    И кстати непонятно что вам мешало сделать просто
    onMouseOver={() => settings.isSound && new Audio('/sound/menuhover.wav').play()}
    Ответ написан
    1 комментарий
  • Верно ли я понял?

    Xuxicheta
    @Xuxicheta
    инженер
    нет
    return contacts[i][prop] || "No such contact"
    означает
    if (contacts[i][prop]) {
      return contacts[i][prop];
    } else {
      return "No such contact";
    }

    или
    return contacts[i][prop]
      ? contacts[i][prop]
      : "No such contact"


    Читайте как работает OR, если в выражении первая часть перед || истинна (Truthy) - возвращается она, если ложна (Falsy) - возвращается вторая часть выражения, после ||.

    x === (false || x)
    Ответ написан
    Комментировать
  • Линейное выполнение функций через callback в Node.js?

    Xuxicheta
    @Xuxicheta
    инженер
    Вот так примерно выглядит ваш ответ на коллбэках. Примитивный вариант, без обработок ошибок. Фактически это своя миниреализация Promise.all

    // имитация реквеста
    function getDetailedHistory(itemId, allHomeEvent, done) {
      setTimeout(300, () => done('im getDetailedHistory'));
    }
    
    // имитация реквеста
    function getDetailedHistoryReverse(itemId, allHomeEvent, done) {
      setTimeout(400, () => done('im getDetailedHistoryReverse'));
    }
    
    
    function getHistory(allHomeEvent, callback) {
      // вместо запуска сначала соберем все запросы в массив функций.
      const requests = [];
      for (const event of allHomeEvent) {
        let itemId = event.id
    
        if (event.home.name === "Women") {
          // записываем в массив функцию, замыкающую наш реквест
          requests.push(done => getDetailedHistory(itemId, allHomeEvent, done));
        }
    
        if (event.away.name === "Women") {
        	requests.push(done => getDetailedHistoryReverse(itemId, allHomeEvent, done));
        }
      }
    
      // запомнить число реквестов, чтобы понять когда все закончились, они же асинхронны.
      let counter = requests.length;
     
       // при окончании каждого реквеста, уменьшаем счетчик и смотрим уже конец или еще нет
       const requestDone = () => {
      	counter -= 1;
        if (counter <= 0) {
           // реквесты кончились, пора дергнуть главный коллбэк
        	callback();
        }
      }
      
      // а теперь пора выполнить весь массив
       requests.forEach(request => request(requestDone));
    }
    
    getHistory(allHomeEvent, () => console.log('all done!'));


    Подумайте как вынести выполнялку всех запросов в отдельную функцию, для переиспользования в дальнейшем.
    Чтобы было так
    const requests = getHistory(allHomeEvent);
    doneAll(requests, () => console.log('all done!'));
    Ответ написан
  • Как сделать, чтобы select отображал options в зависимости от выбранной option соседнего select'а?

    Xuxicheta
    @Xuxicheta Куратор тега Angular
    инженер
    <select #optSelect (change)="kindSelect.kinds = filterConfig[optSelect.value]">
      <option *ngFor="let opt of filterConfig | keyvalue">{{opt.key}}</option>
    </select>
    
    <select #kindSelect>
      <option *ngFor="let kind of (kindSelect.kinds || filterConfig.fruit)">{{kind}}</option>
    </select>


    public filterConfig = {
      fruit: ['apple', 'orange', 'pineapple', 'grape'],
      vegetable: ['carrot', 'potato', 'dill', 'cucumber']
    }

    Промежуточная переменная kindSelect.kinds была введена из-за того, что если просто взять optSelect.value на начальной отрисовке шаблона value еще нет, optSelect.value появляется при первой детекции изменений, и в дев моде на втором проходе детекции обнаруживаются несоответствия значений с шаблоном, что вызовет ExpressionChangedAfterItHasBeenCheckedError.

    Совет: не увлекаться таким шаманством, а сделать нормальную реактивную форму и подписку на нее.
    Ответ написан
    Комментировать
  • Поясните по сокетам?

    Xuxicheta
    @Xuxicheta
    инженер
    При этом на клиенте то команда получения сообщения от сервера всего 1 это socket.onmessage в итоге у меня ответ от сервера пихается в одну переменную и список подключений и сообщения, а как все это разделить?


    роутинг по типу сообщения же. Типа такого
    socket.onmessage = message => {
      const obj = JSON.parse(message);
      switch (obj.type) {
        case MessateTypes.Online: return onOnline(message.payload);
        case MessateTypes.Messages: return onMessages(message.payload);
        default: throw new Error('unrecognized message');
      }
    }


    Неплохо вообще заюзать стандарт. Например JSON-RPC
    https://habr.com/ru/post/441854/
    Ответ написан
    Комментировать
  • Angular. Как вызвать функцию из шаблона при загрузке страницы?

    Xuxicheta
    @Xuxicheta Куратор тега Angular
    инженер
    вам похоже нужно вот это https://angular.io/guide/lifecycle-hooks
    Ответ написан
    Комментировать
  • Как загрузить фаил в апи?

    Xuxicheta
    @Xuxicheta Куратор тега Angular
    инженер
    event.target.files имеет тип FileList и у него конечно нет forEach, это не массив. Массив можно сделать через Array.from
    Вы зачем-то пытаетесь список файлов в форму засунуть. В чем конечная цель этого действа?
    Ангуляр формы не умеют из коробки работать с файлами и в большинстве случаев этого не нужно.
    Ответ написан
  • Как связать компоненты между страницами?

    Xuxicheta
    @Xuxicheta Куратор тега Angular
    инженер
    Вот вам пример простейшего стора для обмена данными
    https://ng-run.com/edit/RmyDdpUtMUe0V5cmb6X7
    Ответ написан
    Комментировать