Ответы пользователя по тегу JavaScript
  • У меня есть переменная в data g=1, я меняю ее значение, но все равно выводится число g равное 1, почему?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    this внутри function зависит от контекста вызова этой function.
    Когда срабатывает onAuthStateChanged - вызывается переданная ему функция-обработчик, которой устанавливается какой-то this(или не устанавливается, и тогда он по умолчанию window или, в строгом режиме, undefined). И этот this точно никак не связан с текущим this Vue, потому что тот никаким образом не передан при вызове, и, соответственно onAuthStateChanged о нём ничего не знает.

    Используй:
    a) (async function(user) { ... }).bind(this) чтобы жёстко привязать эту функцию к this.
    b) vm.g = 5;, т.к. таким образом конкретный this сохранён в переменную и не меняется в зависимости от контекста вызова.
    c) стрелочную функцию async (user) => { ... }, её механика работы по сути осуществляет неявный bind.
    d) функцию обработчик в методах Vue: Vue автоматически делает bind всех методов к this:
    onAuthStateChanged(this.onAuthStateChanged)
    methods: {
      onAuthStateChanged: async function (user) { ... }
    }
    Ответ написан
    Комментировать
  • Как сменить язык данного календаря?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Добавить локаль и поправить класс header:
    Разбираться как сделать понедельник первым днём не стал, потому что очевидно оно сделано через зад(сделали бы нормально, первый дей автоматически с локалью бы поменялся).
    Ответ написан
    1 комментарий
  • Как трансформировать js код для старой версии node.js?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    По идее preset-env должен автоматически подключить полифил для этого дела из core.js.
    Вот тут говорят, что таки да должен быть в современной версии.
    '@babel/preset-env', {
        useBuiltIns: 'usage',
        corejs: {version: 3, proposals: true},
    }
    Ответ написан
    Комментировать
  • Как в цикле по очереди отправлять http запросы?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Array.forEach - синхронный. Он не будет ждать промисов. Либо используй какие-то либы которые умеют асинхронный each и всё остальное, либо используй обычный цикл:
    for (const lId of locationIds) {
      const syncResp =  await fetch(`https://server/sync-one-c/26/41/${lId}`).then(resp => resp.json())
      console.log('lId -> ', lId, 'done', syncResp)
    })
    Ответ написан
    Комментировать
  • Как работает promise внутри resolve?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Суть в том, как работает then.
    "Успешно выполнившийся промис с результатом value", создаётся как и написано. Однако поскольку value - тоже промис, then ожидает его исполнения.
    Промис не может возвращать в then промис по определению. Не важно каким образом вы пытаетесь это сделать. Если в возврат попал промис - следующий then будет его ждать. Интуитивность.
    Ответ написан
    Комментировать
  • Как превратить специальные символы?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    const decode = (textarea => text => {
      textarea.innerHTML = text;
      return textarea.value;
    })(document.createElement('textarea'));
    
    decode("&eacute");
    Ответ написан
    Комментировать
  • Почему vue не отображает name?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Отображает:

    Читай ошибки в консоли и думай.
    Ответ написан
  • Vue.js / как создать и поддерживать клон dom элемента?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    В firefox есть такая нестандартная фича как -moz-element, которая идеально подходит под задачу:
    Увы, она никогда не станет стандартной, да и из ff её могут рано или поздно выпилить.

    В остальном, решения, собственно, два:
    1. Делать всю рабочую область на собственном canvas движке(можно попробовать что-то такое), и тогда просто получать копию холста на меньший canvas. Это более оптимально но требует переписывание всего и сложности основной работы.
    2. Держать два идентичных компонента делящих одно состояние(на пример через внешний Vue.observable\reactive или vuex), один из которых уменьшать с помощью transform: scale().

    html2canvas, предложенный выше, имеет очень ограниченную область применения и вряд ли тут сработает, но можете попробовать

    P.S. Есть ещё один вариант: на любое обновление(тут поймать обновление в зависимости от вашей архитектуры может быть либо очень просто, либо очень сложно) делать верхнему компоненту тупо this.$el.cloneNode(true) и класть полученную копию в нужное место с тем же transform: scale(), но это может весьма сильно тормозить в зависимости от количества элементов и частоты обновления.
    Ответ написан
    3 комментария
  • Как сделать такие же табы как в примере?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Как: через жопу.
    С помощью чего: с помощью React.
    Ответ написан
    Комментировать
  • Как замаппить json в массив объектов?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Просто:
    let routes = await axios(...)
    .then((response: AxiosResponse<Route[]>) => response.data)
    .catch(console.log);
    Нет смысла гонять из пустого в порожнее.

    Только учитывай - все проверки типов и моделей typescript делает на этапе компиляции. На этапе исполнения никакого typescript не существует, потому когда приходит ответ с сервера нет никаких гарантий что он соответствует модели, и typescript не сможет никак отловить если это не так. Если нужны какие-то проверки - их надо писать самому руками или с помощью соответствующих либ.
    Ответ написан
    1 комментарий
  • Какие плюсы с перехода на react c vue?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Перейдя на реакт вы будете страдать. Реакт - это тупо даунгрейд. Всё то же самое, но хуже и местами отсутствует. Есть ли в нём хоть какие-то преимущества перед vue? Не знаю таких.
    Что за проблемы у вас с библиотеками?
    Ответ написан
    2 комментария
  • Как лучше структурировать элементы массива?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Вместо кучи компонентов с if, используй один <component :is="conponent" v-bind="allprops"/>.
    Ответ написан
    5 комментариев
  • Есть ли подобная структура в js?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Нет. Тип значения которое уже было возвращено всегда конкретен. Либо это строка, либо это объект.
    Можно возвращать объект с методом toString который будет возвращать нужной строку при приведении к строке, но это не равносильно возвращению самой строки.
    const ROUTES = {
      blog: {
        art: 'page-art',
        toString() {
          return 'section-blog'
        }
      }
    }
    ROUTES.blog.art // page-art
    ROUTES.blog // object
    'text: ' + ROUTES.blog // text: section-blog

    Также можно попытаться накостылять магию с прототипом String, но это только в качестве развлечения, на проде за такое руки оторвут.)
    Ответ написан
    Комментировать
  • Как написать функцию создания объекта из строки?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    lodash
    chain(inData)
      .split(/[&=]/)
      .map(decodeURIComponent)
      .chunk(2)
      .transform((obj, [path, value]) => set(obj, path, value), {})
      .value()
    Ответ написан
    Комментировать
  • Как называть функции, которые возвращают булевое значение?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Ты тут самую сложную проблему во всём программировании поднял, мужик.)

    Чем тебе isTestKeyValid не подходит? Не бойся длинных имён, бойся бессмысленных.
    Ответ написан
    4 комментария
  • Vue, react. Стоит ли декомпозировать элементы формы если их много?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Ну какбэ если поля должны быть на одном экране то 1., если на нескольких шагах то 2.
    Если ты именно что выбираешь между опциями, то зачем ты делаешь работу дизайнера?)

    В целом - не имеет значения.

    P.S. Если получается громоздко - что-то у тебя не так с инпут-элементами. Если тебе приходится им прописывать одно и тоже - сделай обёртку юзающую контекст\provide, в коде не должно быть повторов.
    Ответ написан
    Комментировать
  • Как найти отсутствующие элементы между двумя массивами?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Ответ написан
    Комментировать
  • Изменение наследуемых свойств в классах?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Что именно он у тебя там "выделяет" то?
    Мало кто вообще юзает jshint, а не eslint, а те кто юзают не обязательно имеют тот же конфиг что у тебя.

    Безотносительно, по конкретной задаче это делается так:
    class Admin extends User{
      constructor(){
        super(true);
      }
    }
    Ответ написан
  • Как выровнять строки?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Если шрифт моноширинный, то, условно, так:
    const minGap = 3;
    const keys = ['name', 'price'];  
    const input = [
      {
        name: "абрикосы",
        price: 20
      },
      {
        name: "тыква",
        price: 50
      },
      {
        name: "уи",
        price: 1000
      }
    ];
    
    
    const maxLengths = keys.slice().fill(0);
    const normalizedInput = input.map(item => keys.reduce((acc, key, i) => {
      const current = String(item[key]);
      const currentLength = current.length;
    
      if(currentLength > maxLengths[i]) 
        maxLengths[i] = currentLength;
    
      acc[key] = current;   
      acc.length += currentLength;
    
      return acc;
    }, { length: 0 }));
    
    const maxLength = maxLengths.reduce(
      (sum, current) => sum + current, 
      minGap
    );
    
    const res = normalizedInput
      .map(({
        name, 
        price, 
        length
      }) => name + ' '.repeat(maxLength - length) + price)
      .join('\n');
    Ответ написан
    4 комментария
  • Как подписаться на уже существующий Event?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Если событие диспатчится стандартными методами на него можно подписаться стандартными методами(т.е. addEventListener).

    Порядок срабатывания слушателей - строго в порядки их добавления.

    Можно попытаться прослушать событие на этапе погружения, а не всплытия, передав третьим параметром true, что в большинстве случаев позволит перехватить событие раньше, т.к. обычно эту возможность не используют обычном коде.
    Ответ написан
    3 комментария