Задать вопрос

Antowa Kartowa

Ответы пользователя по тегу JavaScript

  • Как покрасить определённую часть строки?

    @AntowaKartowa
    Ну какого-то встроенного готового изящного решения наверное нет. Я вижу лишь вариант самописной (или использовать готовую библиотеку) функции (утилиты) под собственные нужды.

    Например вот функция оборачивающая исключительно в span. Один из недостатков функции в том, что она опирается на `matchAll` метод поддерживаемый вроде бы пока еще не всеми браузерами.

    Параметры:
    - строка в которой производится поиск и замена
    - искомая строка (может быть регулярное выражение, но обязательно с `g` флагом)
    - необязательное значение класса для span (чтоб не печатать нужно любое falthy значение - null, '', 0, false)
    - необязательное значение порядкового индекса найденного совпадения для оборачивания. по умолчанию - `0`. может иметь негативное значе `-1` для последнего значения сколько бы их не было, `-2` для предпоследнего и тд.
    const spanText = (str, pattern, className = '', index = 0) => {
  const matches = [...str.matchAll(pattern)];
  
  if (!matches.length || !matches.slice(index)[0]) return str;

  const { 0: match, index: startIndex } = matches.slice(index)[0];
  const endIndex = startIndex + match.length
  const spanOpenTag = !className ? '<span>' : `<span class="${className.toString()}">`;

  return str.slice(0, startIndex) + spanOpenTag + match + '<span>' + str.slice(endIndex);
} 

const re = new RegExp(word, 'g');
text.innerHTML = spanText(text.innerHTML, re);
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать коллизию в тетрисе?

    @AntowaKartowa
    Это не ваш курс на Udemy? Уж очень имена функций, переменных и вся структура похожи.
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно построить модульную структуру проекта?

    @AntowaKartowa
    Не оч понял что там с БЕМом.

    Кнопка Плей ничего не парсит. Есть папка компонент. В папке компонент есть папка Кнопка. В ней код компоненты и стилей для Кнопки. Кнопка может принимать разные конфигурационные параметры типа текста, возможно иконки, цвета, формы, размера... Короче все вариации кнопок которые вам нужно реализовать. И кнопка принимает как один из параметр функцию обработки клика которую вызывает при клике и которой передает объект события. Может что-то еще. Вам виднее.

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

    В компоненте вашей страницы вы импортируете все необходимые компоненты в том числе Кнопку, объявляет методы которые делают эту страниц живой. Один из методов обработчик клика кнопки. Передаете компоненте Кнопка необходимые параметры включая title="Play" и функцию обработки клика.

    Если есть какие-то сервисы которые много где используются или хелпер функции то их можно разместить например в папке common/services или common/helpers.

    Ой я писал как если бы это был проект на реакте, только сейчас заметил что вопрос по ноде. Но современный бэкэнд не компилирует хтмль а только отдает по определенным эндпоинтам соответствующие данные в виде json. А разметка полностью на стороне фронтэнда.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как вызвать функцию при неактивной кнопке?

    @AntowaKartowa
    Ну не делайте тогда кнопку неактивной, а лишь имитируйте ее неактивность каким-то дополнительным классом стилей. А в callAlert вызывайте e.preventDefault()
    Ответ написан
    Комментировать
    Комментировать

  • Авторизация через instagram на spa?

    @AntowaKartowa
    SPA это и есть клиент. Passport.js вы же на сервере используете? Через него (сервер) лучше всего авторизацию и производить и как результат вносить в таблицу сессий запись. В записи храняться сгенерированный вами токен, айди пользователя и дата создания/обновления записи. И в качестве ответа отдаете на SPA этот токен. На SPA токен сохраняется и добавляется ко всем запросам к серверу. Так при каждом запросе сервер проверяет есть ли в таблице сессий такой токен и если есть обновляет время записи и отдает данные согласно запросу. В монго можно задавать определенным записям время жизни например 2 часа которое будет отсчитываться от времени указанном в записи. Если регулярно приходят запосы, то время обновляется и сессия живет. Если например прошло 2 часа после последней активности, то запись автоматически удаляется и в следующий раз пользователю нужно будет снова авторизироваться. Надеюсь что-то из этого понятно и это есть ответ на ваш вопрос.
    Ответ написан
    2 комментария
    2 комментария

  • Как правильно на jQuery записать clear?

    @AntowaKartowa
    Чет я уже забыл когда clear в последний раз использовал. Зачем оно вообще вам? Может можно без него обойтись и проще и чище еще будет?
    Ответ написан
    Комментировать
    Комментировать

  • Как прописать символ в конструкторе?

    @AntowaKartowa
    В последнем комментарии дали реализацию соответствующую заданию. Символ присваивается в качестве значения статического свойства класса. BarcodeGenerator.prefix = Symbol();

    А в вашей перавоначальной реализации во-первых this[prefix] не создает ничего. Если свойство не должно содержать изначально никаких значений, то принято создавать (инициализировать) свойство со значением null.

    Потом вы создаете константу prefix внутри функции конструктора класса, а доступ получить к ней хотите в другой функции. Область видимости константы ограничена функцией. Нужно было так объявлять
    this.prefixKey = Symbol();
    this[this.prefixKey] = null;

    Но тогда generator[BarcodeGenerator.prefix] = 'AA'; ничего не дает. В первоначальном варианте понадобился бы еще один метод для смены префикса в экземпляре класса. А это противоречит заданию
    Ответ написан
    1 комментарий
    1 комментарий

  • Как организовать асинхронную загрузку экрана захвата и остальной страницы?

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

    Если бы это был логин попап, то контент на фоне я б сразу не рендерил. Есть куча умников умеющих в девтулс удалить попап и смотреть контент. Если контент подгружается джаваскриптом, то загружаете в фоне сохраняете в переменную, но не рендерите пока пользователь не кликнет на кнопку в попапе.

    Оно не должно мешать загрузке остальной страницы и ее скриптов.

    Не очень ясно. Ну если попап часть лендинг пейджи, то как разметка и стили для попапа могут блокировать загрузку лендинг пейджи. Ну могут совсем немного увеличить время за счет того что увеличится размер разметки и стилей.

    Другое дело джаваскрипт. Его загрузка и выполнение блокируют обработку и рендеринг страницы. Потому рекомендуется объявление джаваскрипта размещать или в самом низу страницы - начнет загрузку скрипта после загрузки страницы. Но кажется это не всегда гарантирует хороший результат.

    Лучше добавить в теги скрипт атрибуты async или defer. Первый не блокирует рендеринг страницы, но начинает свое исполнение сразу как только загружен. Это потенциально может привести к проблемам. Например попап еще не отрендерен, а скрипт уже начал выполнение и не нашел в разметке попапа, не смог повесить обработчики событий и все нерабочий попап получится. Из-за этого же этот атрибут не гарантирует, что скрипты будут выполнятся в том порядке в котором объявлены. Опять же одни скрипты могут зависить от других и это может привести к неработающему функционалу.

    Дефер же гарантирует, что исполнение скрипта начнется только после полной загрузки страницы и что скрипты будут исполнятся в порядке их объявления. Потому он самый предпочтительный.

    Вообще есть бесплатный курс по оптимизации загрузки страницы от гугла. https://www.udacity.com/course/website-performance...

    Кажется я в итоге не на ваш вопрос ответил.
    Ответ написан
    1 комментарий
    1 комментарий

  • Убрать меню по клику в не области?

    @AntowaKartowa
    Повесить на все окно или бади обработчик события и проверять чтоб таргет не был кнопкой дропдауна или самим дропдауном. Но в реальных условиях дропдаун состоит еще из ссылок и других блоков и все их проверять геморно. Кажется пока не придумали ничего лучше чем вместе с дропдауном помещать в дом прозрачный оверлей блок на все окно (position: fixed, width: 100vw, height: 100vh; top: 0, left: 0) и вешать обработчик события на него. Возможно таргет все же придеться проверять, но так его проще будет проверять. У дропдауна з-индекс должен быть выше чем у оверлея.
    Ответ написан
    3 комментария
    3 комментария

  • Закрытие меню при клике по якорю?

    @AntowaKartowa
    Чето как-то слишком дофига всего в js происходит и не очень ясно что и почему. Лень разбираться так что я коротко опишу способ как сделать тож самое без javascript

    Можно якоря обернуть в label с атрибутом for="#menu-toggle" На одном уровне с блоком меню который должен прятаться расположить input type=checkbox id="menu-toggle" задать ему позицию абсолют, опасити 0, з-индекс -1
    Точно таким же лейблом обернуть бургер который должен меню делать видимым.

    Ну а для блока меню по умолчанию определить стили чтоб он был скрыт,
    но при #menu-toggle:checked ~ .some-menu-block определить стили чтоб он был открыть.

    Вот тут https://jsfiddle.net/AntowaKartowa/b3ueU/ и тут https://jsfiddle.net/AntowaKartowa/BcMVP/ можно посмотреть как подобный подход работает
    Ответ написан
    Комментировать
    Комментировать

  • Почему при задавании атрибуты переходит сразу же по ссылке?

    @AntowaKartowa
    Потому что клик по ссылке по умолчанию обрабатывается браузером как инструкция для перехода по ссылке. Что вроде бы очевидно) Для отмены действий по умолчанию традиционно ипсользуется конструкция event.preventDefault(); где event объект события. Обработчик события ( в данном случае change ) получает его первым аргументом: function change(event) {...} И возможно стоит сделать фоллбек для старых версий эксплорера event = event || window.event который объект события не передает и значение его можно получить из глобального объекта.

    Очевидно событие по умолчанию отрабатывает в конце - после того как все пользовательские обработчики события закончили свое выполнение. Иначе как бы event.preventDefault() мог остановить событие после его выполнения. А значит на момент выполнения действия по умолчанию функция change уже установила аттрибут href. Вроде так
    Ответ написан
    2 комментария
    2 комментария

  • Завершен ли перевод книги "Learning JavaScript Design Patterns"?

    @AntowaKartowa
    Вроде должно быть очевидно, что Learning JavaScript Design Patterns (2015) и Patterns For Large-Scale JavaScript Application Architecture (2014) это две разные работы. В русском переводе в заголовке есть ссылка на источник.
    Ответ написан
    Комментировать
    Комментировать