Задать вопрос
  • Как работать с node_modules на mac и windows одновременно?

    bingo347
    @bingo347 Куратор тега Node.js
    Crazy on performance...
    Без git (или другой vsc) нормально поработать с нескольких машин не выйдет

    А так, кидаем node_modules, dist и прочие генерируемые и env-зависимые файлы и папки в .gitignore и прекрасно можно работать с любого количества машин с любыми ОС.
    Я сам так работаю: Win10+WSL дома, osX на макбуке - походный вариант для работы из кафе/из такси, LMDE в офисе. И никаких проблем нет, если технология кросплатформенная, каковой нода и является.

    P.S. как можно работать без git? а откатится как если что? а фичи по веткам раскидать, чтоб при необходимости хотфикса прод не сломался?
    Ответ написан
  • Как загрузить файл на node.js сервер без сторонних библиотек?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    В данном случае файл отправляется в теле запроса как есть, без всяких оберток:
    file_load.onsubmit = function(){
      var file = this.elements.myfile.files[0];
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "upload", true);
      xhr.send(file);
      return false;
    }


    Следовательно на сервере нам достаточно перенаправить тело запроса целиком в файл:
    const server = require('http').createServer();
    const fs = require('fs');
    const nodeStatic = require('node-static');
    const file = new nodeStatic.Server('.', {
      cache: 0
    });
    
    server.listen(3000, () => console.log("сервер запущен"));
    server.on('request', (req, res) => {
      if (req.url == '/upload') {
        req.pipe(
          fs.createWriteStream('file2.jpg')
        ).on('finish', () => res.end('ok'));
        return;
      }
      file.serve(req, res);
    });
    Ответ написан
    1 комментарий
  • Как выполнять функцию через динамичные промежутки времени?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    function setRandomInterval(cb, minDelay, maxDelay, ...args) {
        let timeoutID;
        (function next() {
            const delay = Math.floor(Math.random() * (maxDelay - minDelay) + minDelay);
            timeoutID = setTimeout(() => {
                cb(...args);
                next();
            }, delay);
        })();
        return function cancel() {
            clearTimeout(timeoutID);
        };
    }
    
    // использование:
    setRandomInterval(func, 500, 2500); // просто запускаем с интервалом от 0.5с до 2.5с
    const cancelInteraval = setRandomInterval(() => {
        console.log('it work');
        if(Math.random() > 0.7) {
            cancelInteraval(); // таймаут можно отменить если вызвать возвращенную функцию
        }
    }, 200, 500);
    setRandomInterval((arg1, arg2, arg3) => {
        console.log(arg1, arg2, arg3);
    }, 1000, 3000, 'arg1', 'arg2', 'arg3'); // подобно setTimeout и setInterval можно передать аргументы в колбэк
    Ответ написан
    Комментировать
  • Как редактировать сайт на VPS с серверной операционной системой?

    bingo347
    @bingo347
    Crazy on performance...
    Хотя Сергей Горностаев уже предложил самый разумный ответ, просто замечу, что в последней версии VSCode есть удаленное редактирование через ssh
    А кроме того есть CLI редакторы вроде vim
    Ответ написан
  • Как правильно упростить запись в блоке for?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    for(let  i = Math.sign(number) || 1; Math.abs(i) < Math.abs(number); i += Math.sign(number) || 1) {
      // ...
    }
    Ответ написан
  • Как написать простой ajax запрос на nodejs?

    bingo347
    @bingo347 Куратор тега Node.js
    Crazy on performance...
    Низкоуровневое апи: https://nodejs.org/dist/latest-v12.x/docs/api/http...
    fetch (как в браузере): https://www.npmjs.com/package/node-fetch
    axios предложили уже выше, но на мой взгляд единственный его + в универсальности (с чем fetch как по мне лучше справляется), зато из минусов - тяжелый, тормазной...
    Ну и наконец request - очень хорошая абстракция над низкоуровневым апи ноды - https://www.npmjs.com/package/request - из минусов - нет промисов из коробки
    Ответ написан
    Комментировать
  • Как связать div с данными?

    bingo347
    @bingo347
    Crazy on performance...
    <div contenteditable ref="dataElem" />
    props: ['value'],
    mount() {
        this.$nextTick(() => {
            this.$refs.dataElem.innerHTML = this.value;
        });
    },
    Ответ написан
    Комментировать
  • Как найти уникальные значения именно с помощью метода .find?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Например так:
    [1,2,3,1,2,3,4,0,-1].filter(function(el) {
      return !this.find(el2 => el === el2) && (this.push(el), true);
    }, [])
    Ответ написан
    Комментировать
  • Blob возвращает пустое изображение, как решить?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Отрисовка на канвасе идет после загрузки изображения
    А запрос на извлечение блоба идет до загрузки изображения и следовательно до отрисовки его на канвасе
    parent.querySelectorAll('.gallery-uploads-imgs__item').forEach(element => {
              var img = new Image;
              img.src = element.dataset.src
              document.body.append(img)
    
    
    
              let canvas = document.createElement('canvas')
              let context = canvas.getContext('2d');
              canvas.width = img.clientWidth
              canvas.height = img.clientHeight
    
    
              img.onload = function() {
                context.drawImage(img, 0,0);
                img.remove();
                canvas.toBlob(function(blob) {
                  let uploadImageUrl = URL.createObjectURL(blob);
    
                  data.blobs.push( uploadImageUrl )
    
                }, 'image/png');
              }    
            })


    P.S. вангую следующий вопрос будет в стиле data.blobs пустой...
    Ответ написан
  • Как добавить циклом for в пустой массив элементы - числа от 4 до 400, а потом уже когда в массиве будут эти элементы вывести их на экран?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    И вообще какие еще варианты могут быть решения этой задачи? Кроме цикла for? Несмотря на то что в задании пишет именно с помощью него решить задачу. Просто для себя чтобы знать другие варианты.
    document.getElementById('root').appendChild(
      document.createTextNode(
        Array.from(new Array(401), (_, i) => i).slice(4).join(' ')
      )
    );
    Ответ написан
    Комментировать
  • Как сделать что-бы webpack делил порт с node.js?

    bingo347
    @bingo347 Куратор тега Node.js
    Crazy on performance...
    Сам webpack никаких портов не слушает, он просто собирает Ваше приложение из много файлов в мало файлов, сеть ему для этого не нужна.
    Сеть может слушать webpack-dev-server, который просто является оберткой над express + webpack-dev-middleware.

    Так что никто Вам не мешает самому запустить express и засунуть в него webpack-dev-middleware, получив тот же эффект + расширяемость express приложения

    А при желании избавится и от express, Вам достаточно будет сэмулировать next колбэк и можете передавать в мидлвар нативные request и response из http модуля
    Ответ написан
    Комментировать
  • Как передать параметры в функцию при её импорте?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    import logBuilder from "./logs/logger";
    const log = logBuilder(import.meta);

    вот только в es-модулях нет предобъявленной переменной module, которая создается окружением commonjs модулей, но наверняка билдеру нужны метаданные, которые можно получить из import.meta
    Ответ написан
    Комментировать
  • Как извлечь три ветви JSON?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    response.items[0].id
    у Вас items - массив, в котором уже лежит объект с полем id
    Ответ написан
    3 комментария
  • Как присвоить объект по значению, а не по ссылке?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Вам определенно нужен deepClone
    Можно взять готовый например из lodash, но я бы предложил Вам свою реализацию.
    Пока писал ее в ответ, понял, что в очередной раз мой ответ превращается в целую статью, поэтому разместил ее на хабре: https://habr.com/ru/post/466535/

    Ну или можете просто скопировать код и использовать:
    function deepClone(source) {
    	return ({
    		'object': cloneObject,
    		'function': cloneFunction
    	}[typeof source] || clonePrimitive)(source)();
    }
    
    function cloneObject(source) {
    	return (Array.isArray(source)
    		? () => source.map(deepClone)
    		: clonePrototype(source, cloneFields(source, simpleFunctor({})))
    	);
    }
    
    function cloneFunction(source) {
    	return cloneFields(source, simpleFunctor(function() {
    		return source.apply(this, arguments);
    	}));
    }
    
    function clonePrimitive(source) {
    	return () => source;
    }
    
    function simpleFunctor(value) {
    	return mapper => mapper ? simpleFunctor(mapper(value)) : value;
    }
    
    function makeCloneFieldReducer(source) {
    	return (destinationFunctor, field) => {
    		const descriptor = Object.getOwnPropertyDescriptor(source, field);
    		return destinationFunctor(destination => Object.defineProperty(destination, field, 'value' in descriptor ? {
    			...descriptor,
    			value: deepClone(descriptor.value)
    		} : descriptor));
    	};
    }
    
    function cloneFields(source, destinationFunctor) {
    	return (Object.getOwnPropertyNames(source)
    		.concat(Object.getOwnPropertySymbols(source))
    		.reduce(makeCloneFieldReducer(source), destinationFunctor)
    	);
    }
    
    function clonePrototype(source, destinationFunctor) {
    	return destinationFunctor(destination => Object.setPrototypeOf(destination, Object.getPrototypeOf(source)));
    }
    Ответ написан
    Комментировать
  • Можно ли отловить событие из vue компонента в нативном js?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    import Vue from 'vue';
    import Component from './Component.vue';
    
    const component = new Vue(Component).$mount('selector');
    component.$on('event-name', () => console.log('wow'));
    Ответ написан
    9 комментариев
  • Как изменить стили через javascript?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    var el = document.querySelector("a[href='/products/962112']"); // в селекторе хардкод... не будет ссылки с таким href - все сломается
    
    // тут был цикл, но я его убрал, ибо один элемент берем
    
    var products = document.getElementsByClassName('product'); // тут коллекция, ее надо перебирать циклом
    for(var i = 0; i < products.length; i++) {
      products[i].style.height = el.style.height;
    }


    UPD: по просьбе origami1024 добавляю вариант с CSSOM
    Во-первых, нам понадобится новый элемент style, чей CSSOM мы будем править, его стоит разместить ниже других стилевых подключений (не важно через style или link), я же просто добавлю в конец head
    Сам CSSOM элемента style доступен через его свойство sheet - извлеку его сразу в переменную:
    const {sheet} = document.head.appendChild(document.createElement('style'));

    Во-вторых, в CSSOM правила пронумерованы с 0. Притом можно заменять существующие правила по их индексу, а можно вставлять новые в конец (индекс при этом так же нужно указывать, а если указать неверно - выкинет эксэпшн). Нам же удобнее обращаться к правилам по селектору, поэтому я сделаю объект для сопоставления селектора с индексом правила и счетчик индексов:
    const rulesIndexesBySelector = {};
    let nextIndex = 0;

    Ну и наконец реализуем вспомогательную функцию для обновления CSSOM правила по его селектору:
    function updateRule(selector, declarations) {
      const rule = `${selector}{${declarations}}`; // полное правило - селектор + декларации в {}
      if(selector in rulesIndexesBySelector) {
        // индекс селектора уже известен, обновим правило
        const index = rulesIndexesBySelector[selector];
        sheet.deleteRule(index); // сначала удалим старое правило освободив индекс и отменив его свойства
        sheet.insertRule(rule, index); // и вставим на его место новое
      } else {
        // новый селектор
        const index = nextIndex++; // важен именно постинкримент, чтоб самый первый получил 0, второй 1 и т.д.
        rulesIndexesBySelector[selector] = index; // запомним на будущее
        sheet.insertRule(rule, index); // и вставим правило в конец
      }
    }

    Пример примитивный, но каждый думаю спокойно расширит его под себя.
    У меня например declarations собираются из vue объекта, который можно мутировать (реактивные стили оО) + добавляются вендорные префиксы, если браузер не знает каких-то свойств (не автопрефиксер конечно, но зато работает по месту)

    Использовать это все теперь можно крайне просто:
    updateRule('.product', 'height: 40px; width: 50px');
    Ответ написан
    5 комментариев
  • Как удалить внешний блок?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    const elem = document.querySelector('.one');
    const frag = document.createDocumentFragment();
    for(const child of elem.childNodes) {
      frag.appendChild(child);
    }
    elem.parentElement.replaceChild(frag, elem);
    Ответ написан
  • Как вызвать функцию через 5 секунд после клика?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Функция up должна корректно решать поставленную задачу
    Скорее всего проблема в обработчике события.
    Атрибуты вроде onclick работают только с глобальным контекстом, лучше их не использовать

    Правильнее выбрать input из DOM (например с помощью document.querySelector) и навешать обработчик через метод элемента addEventListener

    Так же важно помнить, что выбор элемента нужно делать после того, как он появится на странице, лучше всего для этих целей подходит событие DOMContentLoaded у document:
    document.addEventListener('DOMContentLoaded', function() {
      // здесь спокойно можем делать document.querySelector
    });
    Ответ написан
    Комментировать
  • Тратит ли функция cb = ( e ) => e ресурсы на вычисления?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    В общем случае да - как минимум на создания контекста вызова, но после оптимизации может и не тратить, identity функция (функция просто возвращающая свой аргумент, как Ваш cb) хорошо инлайнится, тут вопрос в том - инлайнится ли функция, в которую Вы ее передаете.

    Для понимания, нужно понимать, что v8 делает с кодом под капотом:
    Когда платформа (браузер, node.js) только загрузила исходный код в v8, то выполняет его с помощью интерпретатора Ignition, а заодно анализирует это выполнение. На этом этапе весь код выполняется как есть.
    Функции которые вызвались 2-3 раза отправляются в оптимизирующий JIT компилятор TurboFan, который скомпилирует из JS машинный код и сделает множество оптимизаций. В частности он может инлайнить некоторые функции (но не все).
    Например, если при анализе кода выяснится, что некая функция f0 постоянно вызывает f1 передавая ей Ваш cb, и при этом f1 чистая функция - то f1 скорее всего заинлайнится в f0, а вызов cb просто заменится на свой аргумент. Но опять же, все зависит от Вашего кода и на сколько он оптимизируемый.

    В любом случае identity функция очень легкая
    Ответ написан
    4 комментария
  • Как ограничить тип T примитивными типами f32 и f64?

    bingo347
    @bingo347
    Crazy on performance...
    Ограничить дженерик-тип можно только типажами (traits).
    Что Вы хотите сделать? Какие методы f32 и f64 Вам нужны?
    Возможно данные методы уже реализованы в типажах стандартной библиотеки - тогда нужно ограничивать их суммой.

    Другой вариант, сделать свой типаж, ограничить дженерик тип им, имплементировать этот типаж для f32 и f64
    Имплементация должна представлять обертки над нужными действиями

    UPD: если нужно ограничение дженерик, на использование метода exp у f32 и f64:
    Типаж-контракт на метод exp:
    trait Exp {
        fn exp(self) -> Self;
    }
    
    impl Exp for f32 {
        fn exp(self) -> Self {
            <f32>::exp(self)
        }
    }
    
    impl Exp for f64 {
        fn exp(self) -> Self {
            <f64>::exp(self)
        }
    }


    так же можно воспользоваться следующим крэйтом:
    https://crates.io/crates/num
    Ответ написан
    2 комментария