• Как сократить код во vue.js?

    Sanasol
    @Sanasol
    нельзя просто так взять и загуглить ошибку
    <template>
    
        <button
                class="btn btn1"
                :class="{'active-btn': currentActive === 'limit'}"
                @click="currentActive='limit'">
            Limit
        </button>
        <button
                class="btn btn2"
                :class="{'active-btn': currentActive === 'market'}"
                @click="currentActive='market'">
            Market
        </button>
    
    </template>
    
    <script>
    export default {
        data() {
            return {
                currentActive: 'limit'
            }
        }
    }
    </script>
    Ответ написан
    Комментировать
  • Как связать два input между собой?

    0xD34F
    @0xD34F Куратор тега Vue.js
    data: () => ({
      currencies: [
        { title:  'рубль', rate:     1, val: 0 },
        { title: 'доллар', rate: 62.65, val: 0 },
        { title:   'евро', rate: 60.90, val: 0 },
      ],
    }),
    methods: {
      onInput({ rate, val }) {
        this.currencies.forEach(n => n.val = val * rate / n.rate);
      },
    },

    <div v-for="n in currencies">
      <input
        v-model.number="n.val"
        @input="onInput(n)"
        type="number"
        min="0"
      >
      {{ n.title }}
    </div>
    Ответ написан
    Комментировать
  • Как посчитать кол-во вызовов функции с определенным аргументом?

    Rsa97
    @Rsa97
    Для правильного вопроса надо знать половину ответа
    function counter(originalFunc) {
      const fun = function(...args) {
        args
          .filter((v, i, a) => a.indexOf(v) === i)
          .forEach((v) => fun.counts[v] = (fun.counts[v] ?? 0) + 1);
        return originalFunc(...args);
      }
      fun.counts = {};
      fun.totalRun = (arg) => fun.counts[arg] ?? 0;
      return fun;
    }
    Ответ написан
    5 комментариев
  • Как запустить Promis-ы последовательно?

    Seasle
    @Seasle Куратор тега JavaScript
    const createPromiseLoop = promises => {
      let index = 0;
      
      const attach = (...args) => {
        promises[index++](...args)
          .then((...args) => attach(...args));
        
        index %= promises.length;
      };
      
      return (...args) => {
        attach(...args);
      };
    };
    
    const sleep = (duration = 0) => new Promise(resolve => setTimeout(resolve, duration));
    
    const loop = createPromiseLoop([
      (number) => new Promise(async resolve => {
        await sleep(100);
        console.log(`Number plus one. Received: ${number}`);
        resolve(number + 1);
      }),
      (number) => new Promise(async resolve => {
        await sleep(100);
        console.log(`Number multiply two. Received: ${number}`);
        resolve(number * 2);
      }),
    ]);
    
    loop(1);
    /*
    'Number plus one. Received: 1'
    'Number multiply two. Received: 2'
    'Number plus one. Received: 4'
    'Number multiply two. Received: 5'
    'Number plus one. Received: 10'
    'Number multiply two. Received: 11'
    'Number plus one. Received: 22'
    'Number multiply two. Received: 23'
    'Number plus one. Received: 46'
    'Number multiply two. Received: 47'
    'Number plus one. Received: 94'
    'Number multiply two. Received: 95'
    'Number plus one. Received: 190'
    'Number multiply two. Received: 191'
    'Number plus one. Received: 382'
    'Number multiply two. Received: 383'
    'Number plus one. Received: 766'
    'Number multiply two. Received: 767'
    'Number plus one. Received: 1534'
    'Number multiply two. Received: 1535'
    'Number plus one. Received: 3070'
    'Number multiply two. Received: 3071'
    'Number plus one. Received: 6142'
    'Number multiply two. Received: 6143'
    'Number plus one. Received: 12286'
    'Number multiply two. Received: 12287'
    'Number plus one. Received: 24574'
    */

    И код никогда не остановится.
    Ответ написан
    4 комментария
  • Объясните как добраться до значения в ребенка конструктора?

    edward_freedom
    @edward_freedom
    get data() {
     	return this._data;
     }
    }
    
    document.body.innerHTML += new ChildClass('result!').data;
    Ответ написан
    Комментировать
  • Как на самом деле работают типы данных в js?

    @Free_ze
    Пишу комментарии в комментарии, а не в ответы
    Схема в доке v8 говорит что у int всего 2 типа, int32 и unit32, а int8, int16, float32 etc. есть только у массивов.

    Логично, что int не может быть float (=

    В статье про оптимизацию говорилось верно, что Number до некоторого размера может храниться более оптимально. Кусочек кода, который дёргает парсер, когда встречает литерал:

    Handle<Object> Factory::NewNumber(double value, AllocationType allocation) {
      // Materialize as a SMI if possible.
      int32_t int_value;
      if (DoubleToSmiInteger(value, &int_value)) {
        return handle(Smi::FromInt(int_value), isolate());
      }
      return NewHeapNumber(value, allocation);
    }



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

    Неправда потому, что значение иммутабельно в данном случае и будет выделение третьего куска памяти под результат. И одно лишь наличие точки не делает число не целым (что вполне объяснимо, ибо JS-юзер разницы не видит by design).

    По коду сложения чисел видно, что для описаных вами случаев оба объекта приводятся к HeapNumber (aka "большой Number", но не путать c BigInt) и складываются, а ссылка начинает указывать на новый объект (даже в случае укороченной записи, ибо a += b <=> a = a + b).

    Задействованная ветка:
    TF_BUILTIN(Add, AddStubAssembler) { // Операция сложения
      ....
      BIND(&if_left_smi);               // Левый операнд - "маленький" int
      {
        .....
        BIND(&if_right_heapobject);     // Правый операнд - HeapNumber
        {
          ....
          var_left_double.Bind(SmiToFloat64(left));
          var_right_double.Bind(LoadHeapNumberValue(right));
          Goto(&do_double_add);
          .....
        }  // if_right_heapobject
      }    // if_left_smi
    
      ....
    
      BIND(&do_double_add);
      {
        Node* value = Float64Add(var_left_double.value(), var_right_double.value());
        Return(AllocateHeapNumberWithValue(value));
      }
    }
    Ответ написан
    Комментировать
  • Как на самом деле работают типы данных в js?

    Robur
    @Robur
    Знаю больше чем это необходимо
    Это больше академический интерес, хочу разобраться как оно работает.

    Это вы сейчас в очень глубокую нору заглядываете.

    Движки стараются оптимизировать по максимуму, поэтому там очень много всего накручено помимо наличия int32.
    Я не удивлюсь если в вашем конкретно примере они сделают просто a=1.5 в обоих случаях и код будет идентичный до байта.
    а потом эту a подставят куда надо и оптимизируют там еще что-то, например b=c+a превратится в b=c+1.5

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

    Например для каждой переменной во время работы записывается какой тип в нее приходит, если этот участок кода вызывается достаточно часто - он помечается "горячим" и затем смотрится, если у вас в "a" всегда один и тот же тип, то генерируется быстрый код для этого типа, и ставятся проверки, если вдруг придет что-то другое, то этот код выкидывается и происходит возврат к более общему.

    И много чего другого, лишь бы быстрее работало.
    Даже если вы прямо сейчас разберетесь во всем, то завтра запилят новую оптимизацию где-то в глубине движка и что-то будет работать уже по другому.
    Ответ написан
    8 комментариев
  • Если true выводит false а если false выводит true замыкание, что не так?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Давайте разберем все по строчкам, что Вы тут понаписали:
    function toggleMe() {
      // я кажется начинаю понимать ОТ кого придумали typescript...
      var a = 0; // если логика подразумевает логический тип, зачем init-значение число?
      return function() {
        if(a = true) { // это условие всегда будет истинно, независимо от a, в a сохраним значение true
          a = false;
        } else if (a = false) { // в принципе тоже что и выше, но еще этот код не достижим
          a = true;
        }
        return a;
      }
    }
    var a = toggleMe(); // в a извлекли функцию с замыканием
    var b = a(); // в b будет false
    console.log(b);
    console.log(b); // а второй лог что-то меняет? нет

    Теперь давайте посмотрим, что произойдет, когда данный код попадет в современный движок JS:
    1.
    function toggleMe() {
      var a = 0;
      return function() {
        if(a = true) {
          a = false;
        } else a = false /* удаляем недостижимый код if (a = false) {
          a = true;
        } */
        return a;
      }
    }

    2.
    function toggleMe() {
      var a = 0;
      return function() {
        a = true
        a = false;
    /* этот if разворачивается однозначно
        if(a = true) {
          a = false;
        } else a = false */
        return a;
      }
    }

    3.
    function toggleMe() {
      var a = 0;
      return function() {
        return false;
    /* незачем это вычислять каждый раз, все и так однозначно
        a = true
        a = false;
        return a; */
      }
    }

    4.
    // если вызвать этот код несколько раз:
    var a = toggleMe();
    var b = a();
    console.log(b);
    console.log(b);
    
    // то оптимизатор в конце концов сократит его до
    console.log(false);
    console.log(false);
    // а функцию выкинет совсем


    P.S. возможно имелось в виду это:
    function toggleMe() {
      var a = false;
      return function() {
        return a = !a;
      };
    }
    
    var b = toggleMe();
    console.log(b());
    console.log(b());
    Ответ написан
    3 комментария
  • Как проверить наличие вложенного ключа в объекте и если он существует вернуть значение?

    yarkov
    @yarkov Куратор тега JavaScript
    Помог ответ? Отметь решением.
    let obj =  {
    	"viewport" : {
         "key" : {
            "lat" : 47,
            "lng" : 39
         },
         "southwest" : {
            "lat" : 47,
            "lng" : 39
         },
         "one" : {
            "keygen" : 47,
            "lng" : 39
         }
      }
    }
    
    function deepSearch (object, key, predicate) {
      if (object.hasOwnProperty(key)) {
        return object
      }
    
      for (let i = 0; i < Object.keys(object).length; i++) {
        if (typeof object[Object.keys(object)[i]] === 'object') {
          let o = deepSearch(object[Object.keys(object)[i]], key)
          if (o != null) return o
        }
      }
    
      return null
    }
    
    const result = deepSearch(obj, 'keygen');
    
    console.log(result); // {keygen: 47, lng: 39}
    Ответ написан
    2 комментария
  • Как используя class занести свойство в прототип функции-констурктора?

    Fragster
    @Fragster
    помогло? отметь решением!
    Статический метод и замыкание?
    Ответ написан
    Комментировать
  • Как выполнить данный переход от блока к блоку?

    Ragtime_Kitty
    @Ragtime_Kitty
    Зависит от верстки.
    Если размеры блоков и расстояние между ними фиксированы, то просто картинкой/svg/чем угодно.

    Если блоки не статичны и легких путей не ищешь, то тогда канвасом:


    Как считать координаты тоже зависит от верстки.
    Кривую линию как на картинке у меня не получилось сделать :(
    Ответ написан
    Комментировать
  • Как анимировать искривление элемента по кривой с движением?

    RAX7
    @RAX7

    На css такое делать весело, но не практично. Лучше поищи какой-нибудь 3d движок на js как советует SmthTo
    Например на threejs можно хоть чайники с текстурами крутить https://threejs.org/examples/#webgl_materials_nodes
    Ответ написан
    5 комментариев
  • Webpack. В чем разница между бандлом, чанком и модулем?

    alexfedoseev
    @alexfedoseev
    React & Rails Dev
    Есть два бандла:

    • app.js — для морды
    • admin.js — для админки


    В каждом бандле есть вендорные модули (react, ember, jquery etc.). И модули приложения (то, что написано тобой).

    Каждый бандл можно разбить как минимум на два чанка: собственно приложение и вендорные либы (чтобы пользователь при апдейте приложения не грузил заново вендорные библиотеки, которые не менялись). А если приложение очень большое, то бандл разбивается на ещё больше чанков: например чанк для интерфейса личных сообщений, чанк для ленты новостей и т.д. Такие чанки грузятся по запросу (когда пользователь переходит на соответствующий раздел / интерфейс).
    Ответ написан
    2 комментария
  • Как сделать такой луч через весь макет?

    LenovoId
    @LenovoId Куратор тега SVG
    svg, css,js
    Просто нарисовать в векторе или в растре и поставить на фон , так можно наверное
    Ответ написан
    6 комментариев
  • Проблема с расположением элементов по сетке?

    @magarif
    Программист
    *{
      box-sizing: border-box;
    }
    .grid{
      display: flex;
      flex-wrap: wrap;
      margin: 0 -20px;
    }
    .block{
      width: 100%;
      max-width: calc(25% - 40px);
      flex: calc(25% - 40px);
      margin: 0 20px;
      margin-top: 20px;
      border: 1px solid #ccc;
      padding: 10px 20px;
      display: flex;
      flex-direction: column;
      &__desc{
        display: flex;
        flex: 1 1 100%;
        flex-direction: column;
      }
      &__title{
        display: block;
        margin-bottom: 10px;
      }
      &__text{
        margin: auto 0 0;
      }
    }
    Ответ написан
    Комментировать
  • Как правильно обрабатывать html в webpack?

    potapchino
    @potapchino
    import glob from 'glob'
    import path from 'path'
    
    {
      plugins: [
        ...glob.sync('src/html/*.html')
          .map(html => new HtmlWebpackPlugin({
            filename: path.basename(html),
            template: html
          }))
      ]
    }
    Ответ написан
    4 комментария
  • Как правильно лениво подгружать данные во Vue?

    @Sundagy
    BEADS
    существуют компоненты "виртуальных списков" для организации огромных списков и рендером только тех, что видны в данный момент. для поиска отдельной записи лучше дергать запрос к АПИ.

    https://github.com/tangbc/vue-virtual-scroll-list/...
    Ответ написан
    1 комментарий
  • Сохранять позицию скролла страницы при переходах vue-router?

    @Guccigang
    Можно попробовать сохранять в local storage или в глобальном стейте скролл при клике на пост https://developer.mozilla.org/en-US/docs/Web/API/W... а при переходе на 'home' доставать значение и скролить к нужному месту.
    Ответ написан
    1 комментарий
  • Картинки и vue.js?

    @ber_enot
    Веб-разработчик, Vue.js / Node.js
    <img :src="item.photo" />

    Require не нужен. Работайте с адресом картинки как с обычной строкой.
    Ответ написан
    3 комментария
  • Горизонтальный скролл при использовании grid?

    monochromer
    @monochromer
    DIVeloper
    При процентном задании размеры рассчитываются без учета gap, поэтому лучше использовать fr-единицы
    grid-template-columns: repeat(4, 1fr);
    Ответ написан
    Комментировать