Ответы пользователя по тегу JavaScript
  • Хорош ли такой шаблон работы с AJAX?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Это уже архаизм, к тому дикий велосипед. Зачем 100500 раз опять пытаться писать сырую обертку над XMLHttpRequest? Берите fetch или какую то стороннюю библиотеку, если там надо что то, чего у fetch нету (типа прогресса upload) и вперед.
    Ответ написан
    Комментировать
  • Как протестировать функцию, которая генерирует функцию?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Как называют функции которые возвращает функцию

    Как раз если функция принимает или возвращает другую функцию, асинхронную или нет, это и есть функция высшего порядка. Возвращаемые функции названия не имеют, просто функции.
    Должна вернуть асинхронную функцию

    Технически можно проверить является ли функция асинхронной, проверив имя ее конструктора, но делать так не надо, ибо разработчик может заменить в будущем реализацию функции на использование промисов без объявления асинхронной функции, и тест будет падать. Соответственно проверять нужно не тип функции, а то, что ее результат это Promise или Thenable.
    return Promise.reject(`${model.name} with ${field} = ${value} does not exists`);

    Тут легаси код - внутри async обычно используют
    throw Error(`${model.name} with ${field} = ${value} does not exists`);
    Ответ написан
  • Отмена выполнения цепочки обещаний (promises). Можно проще?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Использовать внешнюю библиотеку, с которой можно закрывать цепочки обещаний в любом месте.
    Простой пример
    Усложненный мониторингом прогресса
    import CPromise from "c-promise2";
    
    // прерываемый fetch с таймаутом
    function fetchWithTimeout(url, options) {
        const {timeout, ...fetchOptions}= options;
        return new CPromise((resolve, reject, {signal}) => {
            fetch(url, {...fetchOptions, signal}).then(resolve, reject)
        }, timeout)
    }
            
    const chain = fetchWithTimeout("https://run.mocky.io/v3/753aa609-65ae-4109-8f83-9cfe365290f0?mocky-delay=10s", {timeout: 5000})
    .then(response => response.json())
    .then(response => console.log('Done:', response ));
        
    // chain.cancel(); - прервать цепочку промисов и отменить запрос в любое время
    // вернет false, если прервать не удалось (в случае, если цепочка была уже выполнена)
    Ответ написан
    Комментировать
  • Как обойти блокировку при парсинге (puppeteer)?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Сначала скрыть сигнатуры безголового (https://www.npmjs.com/package/puppeteer-extra-plug... если вдруг не поможет, сравнить заголовки с браузером, посмотреть скрипты.
    Ответ написан
  • Как закрыть браузер puppeteer?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    puppeteer.launch(
        {
            args: [
                '--proxy-server=ip:port', // Or whatever the address is
            ]
        }
    )
        .then(function (browser) {
            return browser.newPage().then(function (page) {
                page.authenticate({
                    username: 'log',
                    password: 'pass',
                });
                return page.goto(desktopUrl).then(function () {
                    return page.content();
                });
            })
                .then(function (html) {
                    const productList = [];
                    $('div.product-card', html).each(function () {
                        let link = $("a.card-link", $(this)).attr("href");
                        let pic = $("img.image-component", $(this)).attr("src");
                        productList.push({ProductLink: link, picture: pic});
                    });
                    console.log(productList);
                    //----------Где-то тут нужно закрыть браузер
                    return browser.close().then(function () {
                        callback(null, productList); // :( лучше с промисами и продолжать, а не переходить на коллбеки
                    });
                })
        })
        .catch(function (err) {
            return callback(err, null);
        });
    Ответ написан
    1 комментарий
  • Как сгруппировать массив по ключу?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    let obj={};
    
      [{name: 'one', q: 5}, {name: 'one', q: 3}, {name: 'two', q: 1},{name: 'two', q: 6},{name: 'three', q: 10}].forEach(entry=>{
         if(obj[entry.name]){
            obj[entry.name].q+= entry.q;
         }else{
            obj[entry.name]= entry;
         }
      });
    
      console.log(Object.values(obj));
      //Or ES5 way
      console.log(Object.keys(obj).map(name=>obj[name]));
    Ответ написан
    Комментировать
  • В чем ошибка использования arguments функции?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Хоть и мелочь, но для кроссплатформенности не рекомендуется передача arguments в другие функции (типа Array.prototype.slice.call(arguments) ), ибо в V8 это убивает оптимизацию функции, и это, как я знаю, все еще актуально.
    Кроме того, нет никакой причины использовать slice перед вызовом reduce- все методы массива умеют переваривать массивоподобные объекты:
    let sum= Array.prototype.reduce.call(arguments, (acc, value)=>acc+value, 0))

    Но для оптимизации кода под V8 нужно руками формировать массив с arguments через обход циклом for, либо написать helper, вроде
    function toArray() {
        let len = arguments.length;
        if (len === 0)return [];
        return len > 1 ? Array.apply(null, arguments) : [arguments[0]];
    }

    И вызывать его исключительно через .apply
    let sum= toArray.apply(null, arguments).reduce( (acc, value)=>acc+value, 0))
    Ответ написан
    Комментировать
  • Почему говорят что jquery не нужен?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Потому что основная цель JQ была обход серьезной несовместимости разных браузеров и предоставление унифицированного api, теперь это уже не актуально в 99%, а актуальных плюшек в ней не осталось. Единственное оправдание ее использования в наши дни- обильное использование уже написанного кода, который требует ее.
    Ну а насчет $.ajax это я читаю исправно каждые пару месяцев как аргумент, хоть коллекционируй, так вот для программиста одна-две "лишних" строчки погоду не делают, за то гибкость, быстрота и функциональность и не тащишь всякий шлак в проект. Кроме того, есть куча микробиблиотек для этого весом до 1кб, хотя в большинстве случаев fetch хватает
    Ответ написан
    Комментировать
  • Чем заменить Array.from в JS?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    исторически для преобразования любого массивоподобного объекта, т.е коллекций юзается Array.prototype.slice.call(likeArrayObject), хотя могут использоваться и другие методы массива, возвращающие новый массив. Исключение- объект arguments, с которым так делать нельзя из-за V8 perfomace bug, по этому с ним там другой подход.
    Ответ написан
    Комментировать
  • Как получить this как для класса, так и для области видимости, вызывающей функцию?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Или так руками, или Fn.bind(this) или стрелочные функции
    Чтобы дотянутся с анонимной функции к внешнему this (не теряя ее собственный контекст) нужно таки его сохранить в переменную снаружи этой функции, другого пути нет, это не костыль.
    Ответ написан
    6 комментариев
  • Canvas: синхронное движение по окружности, возможно?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Тригонометрию не изучали что ли, что может быть проще?
    Sin + Cos + обязательно отрисовку сцены в requestAnimationFrame, а в setInterval инкрементировать угол.
    Ответ написан
  • Переделывать JS или нет?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    сначала подумал, что крутая вещь, сейчас понял - хрень для аутистов.

    :)) может более вероятный расклад, что нынче такой программист пошел, что уже и погуглить нечто вроде "browserify circular dependencies" не может? Многие сборщики умеют разруливать круговые ссылки (которых по возможности нужно всячески избегать), как там дело сейчас в browserify гугл ответит, если что куча других сборщиков типа rollup.js где с этим все в порядке.
    Ответ написан
  • Как вернуть значение из функции, где есть промисы?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    function getKmzFileAsText() {
    
        return new Promise(function(resolve, reject){
            var text = '';
            var xhr = new XMLHttpRequest(),
                fileReader = new FileReader();
    
            xhr.open("GET", "kmz/1.kmz", true);
            xhr.responseType = "blob";
    
            xhr.addEventListener("load", function () {
                if (xhr.status === 200) {
                    // Load blob as Data URL
                    fileReader.readAsDataURL(xhr.response);
                    JSZip.loadAsync(xhr.response)
                        .then(function (content) {
                            // if you return a promise in a "then", you will chain the two promises
                            resolve(content.files["doc.kml"].async('text'));
                        }).then(resolve, reject);
                }else{
                    reject(Error(xhr.status))
                }
            }, false);
    
            xhr.ontimeout= xhr.onerror= reject;
    
            xhr.send();
        });
    }
    
    getKmzFileAsText().then(function(result){
        console.log(result);
    });
    Ответ написан
    Комментировать
  • Появятся ли вакансии, требующие знания экосистемы vue.js в 2017?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Ну как бы они и сейчас есть, только vue этот там упомянут просто в смысле "любой фреймворк такого рода"...
    А как выделенная технология, кто знает, в фронтенде нынче как в мире моды, сегодня одно в тренде, завтра какой то бородатый хипстер что то скажет и в тренде будет уже иное. Но лично я надеюсь что этот мутант не займет заметной доли рынка... благо хоть React в топе без всяких там директив :)
    Ответ написан
    Комментировать
  • Как: JAVASCRIPT DOM: Добавленный елемент динамически не отрисовывается во время выполнении скрипта (IE)?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Святая корова.... какая боль... это, как минимум, негуманно...
    Это Вам не пхп, и блокирующий синхронный быдлокод тут не прокатит...

    script вставить в head/body и вместо вызова sleep

    setTimeout(function(){
      	modal.parentNode.removeChild(modal);
      },5000);


    https://jsfiddle.net/DigitalBrain/9myzhuvp/
    Ответ написан
  • Как совместить события мыши и touch экранов?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Ответ написан
    Комментировать
  • Освободится ли память объекта?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Освободится, а точнее будет помечен к освобождению, после отработки таймера, который до его срабатывания будет еще держать объект в памяти. К счастью, нынче считаются не тупо ссылки на сущности, как в старых ослах, а их доступность "по дереву" связей.
    Т.е объект будет существовать до тех пор, пока к нему можно "достучатся" любым образом с внешнего пользовательского кода, включая системные callback'и, которые могут в замыкании держать ссылки на этот объект. Как только последняя связь разрывается, он помечается на удаление.
    Ответ написан
    Комментировать
  • Как реализовать быстрый поиск в массиве объектов по значению свойства?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Это какая то шутка?) Имхо 1М записей держать на клиенте и по ним еще искать это тупо, причем очень и властелин должен за такое наказывать.
    Если не устраивают индексирование в массиве, webworker'ы не дают прироста, то больше тут ничего особо не сделаешь- клиентские девайсы не резиновые . Это задача сервера, а не клиента.
    берете вебсокеты, вместо ajax, если хотите сэкономить мс, разумеется node, redis/mongo+кастомный клиентский кэш и вперед. в 100-200мс думаю вложитесь, это можно считать мгновенно. Что мешает этому?
    Ответ написан
    2 комментария
  • Как вы делаете проверку типа аргументов функции?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Увы, для runtime аргументы проверяю самописным кодом с давних времен 2011-2012 года, тогда решения готового не нашел. Забавно, сейчас кстати занят глубоким рефакторингом этой части, с целью оформления в ES6 модуль и на гит хаб.
    Для проверки аргументов, в начале тела проверяемой функции вызываю функцию проверки типов и количества обязательных аргументов, которая может бросить исключение по шаблону с указанием имени внешней функции, которое вытягивается со стека. Все типы - битовая маска, ну и по этому очень хорошо сжимается минификатором.
    В коде это выглядит примерно так:
    function on(event, handler, silent= false) {// some func
            /* @ifdef DEBUG */
            checkArgs(arguments, [TYPE_STRING | TYPE_ARRAY, TYPE_FUNCTION, TYPE_BOOLEAN], 2);
            /* @endif */                 
            //Function implementation
        }

    Обычно вызовы обрамляю директивой, дабы при желании для production версии Gulp+preproccess можно было собрать версию без runtime проверки аргументов.
    on() //TypeError: Function [on] is expecting at least 2 arguments, but 0 were given
    on(1,2,3) //TypeError: Function [on] is expecting STRING, ARRAY as 1th argument, but NUMBER, INTEGER given
    Так что никто не мешает тоже написать подобное, ну либо ждать меня :)
    Ответ написан
    2 комментария
  • Как преобразовать строку в объект в JS?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    var books=[
       {
         title : "My Book",
         pubYear : 1986,
         price : "50 UAH"
       },
       {
         title : "My Book 2",
         pubYear : 2012,
         price : "170 UAH"
       },
         {
         title : "My Book 3",
         pubYear : 2012,
         price : "170 UAH"
       }
    ];
    
    for(var i=0; i<3; i++) {
      var y = books[i];	
      console.log(y.title);	
    }
    Ответ написан
    Комментировать