Ответы пользователя по тегу JavaScript
  • Regex, Как сделать поиск всех совпадений слов?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Вот навскидку накидал франкенштейна(больше под свои задачи):
    function escapeRegExp(string) {
      return String(string).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    }
    // для оптимизации неплохо бы завернуть в memoize-one
    const toSpacedRegExp = (needle, ignoreCase = true) => new RegExp(
      needle
      .trim()
      .split(/\s+/)
      .map(chunk => '(' + escapeRegExp(chunk) + ')')
      .join('(\\S*(?:\\s+\\S*)+?)'), 
      ignoreCase ? 'i' : ''
    );
    // для оптимизации неплохо бы завернуть в memoize-one
    const toSomeRegExp = (needle, ignoreCase = true) => new RegExp(
      needle
      .trim()
      .split(/\s+/)
      .map(chunk => '(' + escapeRegExp(chunk) + ')')
      .join('([\\S\\s]*)'), 
      ignoreCase ? 'i' : ''
    );
    
    // Возвращает либо false, либо массив разделённых совпадний
    // smartFind('start found rest', 'found') // ['start ', 'found', ' rest']
    // smartFind('start found rest', 'start') // ['', 'start', ' found rest']
    // удобно для подсвечивания найденного тупо через i % 2
    function smartFind(haystack, needle) {
      if (!haystack) return false;
      if (!needle) return ['', haystack, ''];
    
      // ищем сначала разделённые пробелами: ва ся => ВАся СЯпкин
      let result = haystack.split(toSpacedRegExp(needle));
      if (result.length > 1) return result;
    
      // ищем хоть какое-то совпадение: ва ся => ВАСЯ пупкин
      result = haystack.split(toSomeRegExp(needle));
      return result.length > 1 && result;
    }

    По ключевым словам "fuzzy search" можно найти куда оптимальнее и красивее вещи, но тут уж сам.:)
    Ответ написан
    Комментировать
  • Проверки доступности стороннего домена со стороны клиента?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Ну стандартный вариант: загрузить то, что можно грузить не напрямую(img\script\video) и проверить onload\onerror.
    Условно так:
    Ответ написан
    Комментировать
  • Как конвертировать GoogleMaps координаты в 2GIS координаты и наоборот?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Преобразует любые на входе в универсальные:
    class CompatibleBounds {
      northEast = [0, 0];
      southWest = [0, 0];
    
      constructor(bounds) {
        Object.assign(this, bounds);
      }
    
      static new(bounds) {
        return new this(bounds);
      }
    
      get south(){ return this.southWest[1] }
      get west(){ return this.southWest[0] }
      get north(){ return this.northEast[1] }
      get east(){ return this.northEast[0] }
      set south(value){ this.southWest[1] = value }
      set west(value){ this.southWest[0] = value }
      set north(value){ this.northEast[1] = value }
      set east(value){ this.northEast[0] = value }
    }
    
    const compatibleBounds = CompatibleBounds.new({
      "south": 43.106491921792255,
      "west": 76.71745650634767,
      "north": 43.4065384633472,
      "east": 77.13974349365236
    });
    // или
    const compatibleBounds = CompatibleBounds.new({
      "northEast": [
        76.92894332280319,
        43.25695003829279
      ],
      "southWest": [
        76.92825667730312,
        43.256449960663694
      ]
    });
    
    // на выходе универсальный динамический объект:
    compatibleBounds.southWest = [1, 2];
    console.log(compatibleBounds.south); // 2
    
    compatibleBounds.south = 3
    console.log(compatibleBounds.southWest); // [1, 3]

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

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Как уже сказали в комментах: создаёт регулярку с помощью которой можно найти отдельно-стоящее переданное слово(в начале строки, в конце или между пробелами).
    Что не сказали:
    1. Переданное слово не экранируется на спецсимволы регулярных выражений, потому внезапно может сломаться.
    2. Не учитывает знаки препинания(возможно не нужно, если задача специфичкская).
    Ответ написан
  • Не могу понять, что не так с innerHTML?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Судя по ошибкам "JSX expressions must have one parent element," и "Uncaught SyntaxError: Unexpected token '<'" у вас где-то кусок html кода вне строки.
    Т.е. прям <какоц-то тег> ... вместо '<какоц-то тег> ...'.
    Код из вопроса должен работать без проблем.
    Ответ написан
    Комментировать
  • Как получить токен из заголовков ответа в js?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    1. no-cors на клиенте это не "отключение cors", иначе не было никакого смысла в cors, это метка "мне похрен на ответ, я просто отправляю". Соответственно с такой меткой ты не можешь читать ответ никак.
    2. Если при обычном запросе возникакет ошибка cors - значет сервер не посылает allow-* заголовков и cors не разрешён.
    3. Заголовок Set-Cookie ставит, очевидно, cookie. Напрямую его читать в любом случае нельзя.
    3.1. Но можно читать поставленную cookie
    3.1.1. Но читать её можно только на том домене доя которого она поставлена.
    3.1.2. Читать её можно только если она не (как в данном случае) HTTP-only.
    5. Возможно вам и не нужно ничего ни откуда доставать: HTTP-only куки передаются браузером в запросе самостоятельно, из скрипта к ним доступа нет. Однако он и не нужен. Отправляйте все запросы с credentials: "include" и значение автоматически будет присутствовать в заголовке Cookie..
    Ответ написан
    Комментировать
  • Решил сделать часы со стрелкой и поворот стрелки запилил с помощью transform: rotate (deg). Это нормально?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Оно не должно накручиваться на самом то деле - положение стрелки должно чётко зависеть от текущего времени и больше ничего. Полагаться на таймауты и интервалы - нельзя, браузер не гарантирует их чёткое временное выполнение.

    Чтоб стрелка двигалась плавно - использовать надо requestAnimationFrame.
    Ответ написан
    Комментировать
  • Почему не работает таймер когда наступает новый час?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Открываешь консоль и видишь там красный текст "hours is undefined" или типа того. Понимаешь, что у тебя в коде задано не hours, а h, исправляешь и не отвлекаешь людей тупыми вопросами.

    P.S. Для таймера правильно использовать Date, время исполнения setInterval может быть изменено со стороны браузера или из-за нагрузки.
    Ответ написан
  • Как правильно задать относительный путь до файла?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Зависит от того какую систему сборки используете.
    Например для webpack можно использовать ContextReplacementPlugin\NormalModuleReplacementPlugin, чтоб пофиксить пути импорта как вам надо, в т.ч. относительные.
    Однако, если обойтись без относительности, то плагин не нужен: можно просто прописать alias вида
    '@locale': path.resolve(__dirname, `src/${LOCALE}/js/register.js`)
    Ответ написан
    Комментировать
  • Почему условие в setInterval не всегда срабатывает?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Очевидно потому, что значение '00:01' проскакивает между вызовами setInterval.

    Почему?
    Во-первых: потому что 1000 в параметрах ничего не гарантирует, перерыв может быть больше - в двух случаях:
    1. если выполнение вызываемой функции происходит дольше интервала(не наш случай);
    2. если вкладка не активна, все современные браузеры сильно замедляют таймеры(самая вероятная причина).
    Во-вторых: числа меняются какой-то другой функцией и совершенно неизвестно как там работает таймер.
    Ответ написан
  • Как вызвать функцию при посещение страницы?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Оба варианта должны работать - первый при полной загрузке, второй при загрузке DOM(и наличии jquery на странице).
    Есть ещё более прямой и очевидный вариант, запуск "прям тут где скрипт": <script>функция();</script>, но раз не помогли предыдущие, то и этот не поможет.

    Вопрос: что значит "не помогло", конкретно?

    Пока могу только нагадать: возможно у тебя в этой функции открывается новое окно, тогда ответ простой - никак, окна можно открывать только по действию пользователя.
    Ответ написан
    Комментировать
  • Как через код использовать ctrl+wheel?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Никак. Со своим зумом пользователь работает сам и не тебе его менять.
    Если нужно изменить какие-то размеры - меняй эти размеры.

    Если для каких-то особых целей надо имитировать поведение при других расширениях, этого можно добиться масштабируя фрейм через transform scale и его размеры, как это делает codepen.
    Ответ написан
    Комментировать
  • Как посчитать количество объектов с определённым значением ключа?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Не прибегая к циклам - ручкой на листочке, лол.
    Любой вариант, какой бы вы не выбрали сводится к циклам под капотом.
    arr.filter(obj => !obj.status).length;
    arr.reduce((length, {status}) => status ? length : length + 1, 0);
    ...и т.п.
    Ответ написан
    1 комментарий
  • Почему не работает скрипт при использовании type="module"?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    М.б. так.
    <script type="module">
        import Parallax from "./js/parallax.js"
        // или так  import { Parallax } from "./js/parallax.js"
    
        let scene = document.getElementById('scene');
        let parallaxInstance = new Parallax(scene);     
    </script>

    Область видимости модулей изолирована, надо импортировать то, что они экспортируют.

    Также в самом модуле можно явно задать глобальные переменные (window.Parallax = Parallax;) но лучше так не делать.

    Ну и про сборщик сказано не верно, как настроите - так и будет работать.
    Ответ написан
  • Как сделать скроллинг фона, при этом делая позиционирование по центру?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Скорее всего нужно что-то другое, никто не любит сколл.
    А решение очевидно: указать явно min-width и min-height в пикселях.
    Ответ написан
  • Как сделать JS desktop приложение как сайт Vue js?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Это называется PWA(progressive web app).
    Как сделать - гугли отдельно, нормальный ответ не влезет в рамки вопросника.
    Ответ написан
    Комментировать
  • Почему не работает поиск по массиву из объектов?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Во-первых: вопрос не относится к vue, он о чистом js.
    Во-вторых: код рабочий, просто у вас, судя по всему, отсутствуют такие item, где одновременно были бы равны item.product.article, item.size и item.warehouse.id, т.к. только в таком случае ветка уйдёт в нужную вам сторону. Если логика предполагалась какой-то другой - уточняйте.
    Во-третьих: используйте, по возможности, для отдельно стоящих объектов reactive вместо ref, код чище и приятней будет.
    Ответ написан
    Комментировать
  • Деплой Vue.js на GitHub выдает ошибку?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Неплохо бы, чтоб в следующих своих вопросах ты прикладывал собственно КОД и тест ошибки.
    Я смог выковырять причину из собранного бандла, но тебе просто повезло, куда чаще мне(и 99% людей) так делать лень.

    Теперь, собственно, проблема:
    у тебя в коде есть несколько мест где используется подобная обработка событий:
    @side-emit="(side, id) => { 
        this.players[id].side = side; 
        ...
    }"

    Причина ошибки в том, что ты тут явно используешь this, а внутри шаблона он не нужен, т.к. либо раскрывается неявно автоматически, либо, в случае со <script setup>, не используется вовсе. Следует запомнить: никакого this в шаблонах.
    Вот так будет работать:
    @side-emit="(side, id) => { 
        players[id].side = side; 
        ...
    }"

    Почему работает в режиме разработки? Потому что во время разработки используется упрощённый режим сборки, который совершенно случайно делает доступным правильный this в данном конкретном случае. Просто так совпало.

    Ну и касательно кода: в данном случае использовано аж два антипаттерна, которые лучше вообще не употреблять:
    1. События компонента должны эмитить ровно одно значение. Да, vue позволяет эмитить и принимать сколько угодно значений, однако чаще чем следовало бы это приводит к плохому коду. Желательно придерживаться правила: одно событие - один payload, как в обычных событиях js.
    2. Не следует декларировать функции внутри шаблона. Шаблон сам по себе должен содержать минимальное количество кода. Да, vue позволяет использовать любой js в шаблоне, однако чаще чем следовало бы это приводит к плохому коду. В шаблонах следует использовать маленькие кусочки кода, условно: @side-emit="someValue = $event ? 1 : 2", а что-то сложнее просто выносить в метод компонента\composition функцию: @side-emit="onSlideEmit".
    Ответ написан
    1 комментарий
  • Как правильно использовать динамический импорт?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Приложение собирается сборщиком. Все импорты обрабатываются на стадии сборки, и на стадии сборки же включаются в бандл(основной js файл).
    Если вы указываете переменную в пути - это значит только то, что в бандл будут включены ВСЕ файлы находящиеся по такому пути.
    Никакие новые файлы(отсутствующие при сборке) уже собранное приложение грузить через import не будет.

    Нужна загрузка новых файлов по url? Придётся делать всё руками по-старинке.

    Нужна загрузка таки уже имеющихся? Уточняйте путь до минимального:
    import(`../Screen/About/${currentScreen.name}.jsx`);
    И помните, что в бандле будет ВСЁ по маске `../Screen/About/*.jsx`.
    Хоть какое-то уточнение стартового пути необходимо, потому что иначе сборщик бы собрал в бандл вообще все файлы на вашем компьютере, что, думаю, не желаемое поведение.

    Возможно что-то поменялось для сборки через vite(т.к. он пользуется модулями), но тут не подскажу.
    Ответ написан
    Комментировать
  • Не размещается скрипт в определенном разделе. Как поправить?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Очевидно, что он цепляется по id к tracking-widget-script. Поищите в документации, что можно поменять или обратитесь к ним в поддержку.
    Ответ написан
    1 комментарий