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

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Потому что eslint заставляет, lol.)
    Ответ написан
    Комментировать
  • Какой ответ хочет получить скрипт?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Он хочет получить ответ со статусом 200 - т.е. любой самый обычный ответ по умолчанию.
    Возможно никакого запроса у вас вообще не происходит, потому что в самом конце нет sr.send( /*some-data*/ )?
    Ответ написан
  • Как на vue реализовать зажатие по элементу?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    По mousedown - setTimeout, по mouseup и mouseleave - clearTimeout.
    Какие проблемы?
    Ответ написан
  • Как менять класс slot внутри компонента?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Можно нагородить кастомный компонент с render-функцией, который будет пересоздавать компоненты лежащие в слоте с нужным классом. Но это весьма некрасиво и опасно.
    Примерно так
    Написано на коленке как PoC и не проверено, наверняка на чём-нить сломается.)
    Vue.component('style-slot', {
      functional: true,
      render(h, {scopedSlots, data}) {
        if (!scopedSlots.default) return;
        const map = ['class','staticClass','style','staticStyle'];
        const elements = scopedSlots.default();
        return elements.map(vNode => {
          if (!vNode.tag) return vNode;
    
          let vData;
          if (vNode.data) {
            vData = Object.assign({}, vNode.data);
            map.forEach((key, i) => {
              const dataKey = map[i - i % 2];
              if(key in data) {
                if(dataKey in vNode.data) {
                  vData[dataKey] = Array.isArray(vData[dataKey])
                    ? vData[dataKey].concat(data[key]) 
                  : [vData[dataKey], data[key]];
                }
                else
                  vData[dataKey] = data[key];
              }
            });
          } else {
            vData = map.reduce((obj, key, i) => {
              if(key in data)
                obj[key] = data[key];
              return obj
            }, {});
          }
          return h(vNode.tag, vData, vNode.children || vNode.text)
        })
      }
    })

    <template>
      <div>
        <style-slot class="sl-sl" style="border:2px">
          <slot/>
        </style-slot>
      </div>
    </template>


    Проще и правильней просто шарить нужный класс как свойство scoped слота и применять вручную:
    <template>
      <div>
        <slot className="slot-class"/>
      </div>
    </template>
    <template>
      <component-a v-slot="{className}">
        <p :class="['p-class', className]">text</p>
      </component-a>
    </template>
    Ответ написан
    Комментировать
  • Хочу создать свою function confirm, это правельно?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Обращаться то будут к твоей, но если ты не запихнёшь внутрь настоящий confirm(или там alert\prompt), то останавливать исполнение, как оригинал, она не будет. И повторить такое поведения не меняя способа вызова - принципиально невозможно. А значит если где-то что-то зависит от ожидания ответа - всё сломается.
    Ответ написан
    Комментировать
  • Динамический импорт подключает все файлы из папки?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Т.к. webpack при сборке никак не может знать, что у вас окажется в this.name, а проект должен работать в любых условиях, то для работы import(`mdi-vue/${this.name}`) собирается вообще всё, что лежит в папке mdi-vue/.

    Вы не может создать компонент "который будет подключать иконки за вас", потому чтобы иконка была подключена, она должна иметься в наличии. Чтобы она имелась в наличии на этапе исполнения, она должна быть собрана на этапе компиляции. Учитывая что заранее (из кода) неизвестно какая именно иконка вам понадобится на этапе исполнения, собраны на этапе компиляции вынуждены быть все иконки что есть.

    Если у вас используется ограниченный набор иконок, то вам придётся в любом случае прописать импорт каждой вручную. Это можно оптимизировать написав собственный генератор, который на этапе сборки(или перед ним) пройдётся по файлам и соберёт использованные иконки и выплюнет их в файл с соответствующими импортами. Но проще импортировать что надо, там где надо.
    Ответ написан
    Комментировать
  • Как вывести на страницу объект из localStorage, не зная key?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    C localStorage можно работать как с обычным объектом.
    for(let [key, value] of Object.entries(localStorage)) {
      console.log(key, value)
    }
    Ответ написан
    Комментировать
  • Форматирование строк?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    text.indexOf('$' + word)
    Регулярки нужны только если нужна регистронезависимость или если надо найти все слова, а не конкртетное. Тогда можно не заморачиваться и использовать: /\$(\S+)/g.
    Ответ написан
    Комментировать
  • Как сделать оптимизацию, преобразование (вычисления) массива?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Используем телепатию.
    const data = [0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9];
    const data2 = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2];
    
    
    function narrow(data, length, precision) {
      const start = data[0];
      const end = data[data.length-1];
      const result = new Array(length);
      let step = (end - start) / (length - 1);
    
      if(precision) {
        if(step < precision) 
          throw new RangeError(`Шаг не может быть кратен ${precision} при длине результирующего массива ${length}`);
        step = (step / precision | 0) * precision; 
      }
    
      result[0] = start;
    
      while(--length)
        result[length] = step * length;
    
      return result;
    }
    
    
    
    console.log(
      narrow(data, 5, 0.5)
    )
    console.log(
      narrow(data2, 5)
    )
    console.log(
      narrow(data, 5)
    )
    Ответ написан
    Комментировать
  • Как сгенерировать и заполнить html форму "налету"?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Современное решение: современные фреймворки Vue, React, Angular и др.
    Вы просто пишете шаблон, все биндинги осуществляет фреймворк.

    Решение предыдущего поколения: шаблонизаторы типа Handlebars, Pug и др.
    Ответ написан
    Комментировать
  • Почему скрипт выводит такой результат?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
  • Как отрефакторить большой объект с данными?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Не слишком понял захрена оно именно в одном файле, но можете разложить es модулями логически по папочкам и собирать в один экспорт какой нить такой штукой:
    Ответ написан
    Комментировать
  • Можете пожалуйста обьяснить currying?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Ну, во-первых, тут у вас написана ложь.
    console.log не вызывает неявного приведения к строке, а потому в консоли мы увидим не 8, а то что там и есть на самом деле, т.е. function inner() {}
    toString же неявно вызывается именно в случае использования объекта как строки.
    Например: console.log(sum(1)(2)(2)(3) + 'px') // 8px.
    В целом же я бы не рекомендовал так делать.
    Ответ написан
    Комментировать
  • Как при изменении зума пересчитывать размеры блока, чтобы он вмещался во viewport устройства?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Мб вам нужна просто meta viewport, а не извращаться?
    Ответ написан
    Комментировать
  • Как округлить число?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    function mod5(number) {
      var digit = number % 10;
      
      if(digit === 5 || digit === 0)
        return number;
      if(digit > 5)
        return number + 10 - digit;
      return number + 5 - digit;
    }
    Ответ написан
    Комментировать
  • Почему возникает ошибка "Failed to resolve filters" Vue.js?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    А нечего отступы вручную расставлять.
    Вот ваш код в нормальном виде:
    var app = new Vue({
      el: '#vue-app-one',
      data: {
        sitename: 'The Shop',
        string: 'Hello',
        product: {
          id: 1001,
          title: 'Phone',
          description: 'The best one <em>phone</em> ever',
          price: 1000000,
          image: 'This is an image',
        },
        filters: {
          formatPrice: function(price){
            if (!parseInt(price)) {return "";}
            if (price > 9999){
              var priceString = (price /100).toFixed(2);
              var priceArray = priceString.split("").reverse();
              var index = 3;
              while (priceArray.length > index +3){
                priceArray.splice(index+3, 0, ',');
                index +=4;
              }
              return '$' + priceArray.reverse().join('');
            } else{
              return '$' + (price/100).toFixed(2);
            }
          }
        }
      },
    });
    Ничего не замечаете?

    Разгадка
    Фильтры не должны лежать в data, они не данные.
    Ответ написан
    1 комментарий
  • Можно ли получить head удаленной страницы?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Грузите вы в любом случае всё - это в первую очередь поток байт, во вторую простой текст, и только после парсинга движком браузера появляются какие-то там head и прочие body.
    В принципе, вы можете прервать загрузку, если посчитали что загрузили достаточно.
    XMLHttpRequest вызывает событие readystatechange\onprogress несколько раз с промежуточными результатами, а также имеет метод abort для остановки. Однако с современными скоростями интернета весь контент скорее всего будет загружен быстрее чем браузер сможет остановить зарос.

    Примерно так
    function parseHead(text) {
      if(!parseHead.parser) 
        parseHead.parser = new DOMParser();
    
      return parseHead.parser.parseFromString(
        text.match(/<head>[\s\S]*?<\/head>/i)[0], 
        "text/html"
      ).head;
    }
    
    function getHead(url) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.onreadystatechange = function(event) {
          if (xhr.readyState === 3) { // если частично загружено
            if(/<\/head>/i.test(xhr.responseText)) { // если в загруженном есть закрывающий тег </head> 
              resolve(parseHead(xhr.responseText));  // парсим текст и возвращаем head
              xhr.onreadystatechange = null; // убираем дальнейшую обработку изменения состояния
              xhr.abort(); // останавливаем дальнейшую загрузку
            }
          } else if (xhr.readyState === 4){ // если запрос завршён
            if(xhr.status === 200) // если завершён успешно
              resolve(parseHead(xhr.responseText));   // парсим текст и возвращаем head
            else 
              reject(xhr); 
          }
        };
        xhr.send();
      }) 
    
    }
    
    getHead('/').then(console.log, console.error)
    Ответ написан
    Комментировать
  • Почему mousemove срабатывает при mousedown?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Смотреть на свою гиперчуствительную мышь, которая сдвигается когда вы кликаете.
    Сам по себе этот код не выводит 111 при клике.
    Ответ написан
  • Как с помощью JSFiddle сделать проверку асинхронного запроса?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    JSFiddle и CodePen так не умеют, умеет Plunker.
    Ответ написан
    Комментировать