Задать вопрос
Ответы пользователя по тегу JavaScript
  • Как часто используются дескрипторы, декораторы и bind, call, apply?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Обо всем по порядку

    Дескрипторы - так понимаю речь идет о дескрипторах свойств объекта. Вещь крайне полезная, позволяющая задать поведение свойству, сделав его не перечисляемым или, например, только для чтения, а так же можно задать функции getter/setter, которые будут вызываться при чтении/записи свойства. Используется довольно часто.

    Декораторы функций. Позволяют избежать дублирования кода. Допустим, подключаете Вы некую библиотеку, в которой есть некоторая функция, Вам необходимая. Пусть она делает некое действие А, но Вам регулярно нужна последовательность действий А и Б. Тогда Вы пишите над этой функцией обертку, выполняющий эту последовательность, и уже вместо библиотечной функции + действие Б используете везде свою обертку. А вот если у Вас таких оберток с действием Б довольно много, то уже нужен декоратор, который позволит создавать такие обертки для любой функции. Используется как правило в крупных проектах, так как снижает вероятность ошибок.

    bind - по сути является декоратором встроенным в язык. Позволяет привязать к функции контекст и начальные аргументы. Используется постоянно, особенно в случае передачи функции во внешний код.

    call и apply позволяют вызвать функцию с нужным контекстом, разница в том что apply принимает 2 аргумента - контекст и массиво-подобный объект содержащий аргументы, а call принимает произвольное число аргументов: 1й - контекст, последующие передаются как аргументы функции. Используется постоянно.

    Карринг. Хоть и используется не так часто, но бывает весьма полезным инструментом. По сути цепочки промисов построены на принципах карринга, только не функций, а объектов.

    Ну и напоследок, конструкция var self = this; позволяющая сохранить контекст в замыкании уже потихоньку уходит в прошлое, благодаря стрелочным функциям из es2015
    Ответ написан
    1 комментарий
  • Какой шаблонизатор javascript самый быстрый с настраиваемым синтаксисом?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Использую handlebars
    Привлекло в нем html-based синтаксис + возможность прекомпиляции шаблонов, то есть я компилирую шаблоны на этапе сборки, а в коде просто использую их как js-функции.
    Вот bash скрипт, который у меня собирает шаблоны в common-js модуль:
    WORKPATH=$PWD/src
    
    #minify
    echo 'minify'
    for f in $(ls $WORKPATH/template | grep .hbs)
        do html-minifier $WORKPATH/template/$f -o $WORKPATH/template/$f.min \
            --collapse-whitespace --remove-comments
    done
    for f in $(ls $WORKPATH/template.server | grep .hbs)
        do html-minifier $WORKPATH/template.server/$f -o $WORKPATH/template.server/$f.min \
            --collapse-whitespace --remove-comments
    done
    
    #tmpl
    echo 'tmpl'
    handlebars $WORKPATH/template -e hbs.min -f $WORKPATH/js.client/templates.js \
        -c handlebars/runtime -n module.exports
    handlebars $WORKPATH/template.server -e hbs.min -f $WORKPATH/js.server/templates.server.js \
        -c handlebars/runtime -n module.exports
    
    cp $WORKPATH/js.client/templates.js $WORKPATH/js.server/templates.client.js
    
    #clean
    echo 'clean'
    rm $WORKPATH/template/*.hbs.min
    rm $WORKPATH/template.server/*.hbs.min
    Ответ написан
    Комментировать
  • Как реализовать сортировку объектов?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    У Вас не массив, а объект, а у объектов произвольный доступ к элементам по их ключу.
    Ключи как таковые можно получить в виде массива либо функцией Object.keys, которая получает все нумеруемые ключи объекта включая ключи из цепочки прототипов (к не нумеруемым относятся свойства объявленые через Object.defineProperty за исключением явного указания enumerable: true, а также символы (Symbol) и методы ( { method() { ... } } ) из ES2015), либо функцией Object.getOwnPropertyNames, которая получает все собственные ключи объекта, кроме символов (прототип исключен, enumerable не учитывается)
    Случайное перемешивание массива делается элементарно: arr.sort(() => Math.random() - 0.5);

    Как итог, можно получить массив ключей Вашего объекта в случайном порядке:
    var keys = Object.keys(a).sort(() => Math.random() - 0.5);
    Ответ написан
  • Не работает простая функция на JS. Как правильно записать style.top/style.left?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Ну во-первых, зачем вот это все? 400 - 0 + 1 да еще + 0 на конце
    Теперь по сабжу, свойства top left right bottom работают только с позиционированием, то есть
    img.style.position = "absolute"; //or "relative" or "fixed"

    Сами свойства top и left желательно указывать строкой с единицами измеренияimg.style.top = random1 + 'px';
    ну и напоследок, работа с dom не оптимальная
    Ответ написан
    Комментировать
  • Можно ли упростить асинхронный код на Promise?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Вынесите someObject в замыкание и внутреннюю цепочку промисов перенесите во внешнюю
    someObject = null //не знаю можно ли писать в cs var поэтому так
    Promise.resolve()
    .then(@getObjectDescription.bind(@))
    .then(
      (so) ->
        someObject = so
    )
    .then(@getSomeSpecialFieldValue.bind(@))
    .then(
            (value) ->
              someObject.special_field = value
              return someObject
    )
    .then(
      (someObject) ->
        data = new FormData()
    
        data.append('field', someObject.field)
        data.append('special_field', someObject.special_field)
    
        options =
          method: 'post'
          body: data
    
        return options
    )
    .then(@execute.bind(@, 'rest.api.method'))
    Ответ написан
    1 комментарий
  • Как при сборке задать динамический путь к файлу?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Вынесите объявление Users на уровень выше в замыкании
    Ответ написан
  • Почему как js не всегда экранирует обратные слэши?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Потому что js как раз таки всегда экранирует обратные слеши, что обратно Вашему утверждению
    Десериализатор получает на вход строку "PI.\\\\dev-pi2012\\Demo.001;" и экранирует слеши
    Движок js получает на вход строку "PI.\\dev-pi2012\Demo.001;" и опять таки экранирует слеши
    Почувствуйте разницу
    Ответ написан
    Комментировать
  • Как составить запрос в Mongo?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    У find 1й параметр отвечает за условия, возвращаемые поля определяет 2й параметр, но при его наличии будут отсутствовать все остальные поля документа, можно конечно их перечислить, но это придется менять при изменении структуры документа, пример:
    var locale = i18n.getLocale();
     Article.find({}, {
        ['title.' + locale]: 1,
        ['content.' + locale]: 1
    })

    Второй вариант - это преобразовать результат от базы так как Вам надо, пример:
    var locale = i18n.getLocale();
    Article.find().sort('-   created').populate('user', 'displayName').exec(function (err, articles) {
      if (err) {
        return res.status(400).send({
          message: errorHandler.getErrorMessage(err)
        });
      } else {
         articles.forEach(article => {
           article.title = article.title[locale];
           article.content = article.content[locale];
         });
         res.json(articles);
      }
    });
    Ответ написан
    Комментировать
  • В чём ошибка условия if else в игре?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Бегло взглянув на код могу сказать, что эта строчкаgravityGamer(); //Вызываем функцию прыжканикогда не выполняется, так как в обоих ветках условия срабатывает return
    Ответ написан
    2 комментария
  • Как создать сервер на Node.js, [statefull, stateless, echo]?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Примерно так это делается:
    'use strict';
    const net = require('net');
    
    const server = net.createServer(socket => {
        var data = '';
        socket.on('data', d => {
            data += d;
            var p = data.indexOf('\n');
            if(~p) {
                let cmd = data.substr(0, p);
                data = data.slice(p + 1);
                onCommand(cmd.trim(), socket);
            }
        });
    });
    
    server.listen(() => {
        var address = server.address();
        console.log('opened server on', address);
    });
    
    function onCommand(cmd, socket) {
        switch(cmd) {
            case 'open':
                socket.write('opened\n');
                break;
            case 'add':
                socket.write('added\n');
                break;
            case 'process':
                socket.write('processed\n');
                break;
        }
    }


    тестил через telnet, работает
    Ответ написан
    1 комментарий
  • Преобразовать в Number() дистанцию?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    var s = '1 234 км';
    var n = +s.replace(/[^\d.]/g, '');
    console.log(n);
    Ответ написан
    4 комментария
  • На avito.ru при открывании консоли блочится страница. Как?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Вы поймали вирус в расширениях хрома, как правило он еще и настройки расширений блочит.
    Лечится сбросом настроек:
    Заходим на chrome://settings/
    Жмем "Показать дополнительные настройки"
    В самом низу жмем "Сброс настроек"
    Ответ написан
    Комментировать
  • Как отложить синтаксический анализ JavaScript?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Перенесите подключение js вниз страницы
    Ответ написан
  • Почему ES 6 ругает на ":" в конструкторе?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    это синтаксис TypeScript и в нативном js это не работает
    Ответ написан
    Комментировать
  • Cannot set property 'innerHTML' of null только в Android-браузере, почему?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Попробуйте подключить Polyfill.io перед всеми скриптами на странице, подключать надо именно с их сайта, эта либа правит api браузера так, чтоб оно соответствовало современным стандартам, а подключать с их сайта надо потому, что они выдают разные варианты либы в зависимости от браузера
    Ответ написан
  • Как получить из базы время в чужой таймзоне?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Во-первых, нельзя доверять времени клиента, никто не мешает мне подтасовать факты просто переведя часы на своем девайсе
    Во-вторых, передавать время в виде int timestamp не лучшая идея, используйте UTC строку
    В-третих, Вам поможет moment.js
    Ответ написан
  • Как получить составляющий процент из объекта по полю?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Решил немного оптимизировать + унифицировать решение предложенное @mourr
    function countFieldPersent(arr, field) {
        var data = arr.reduce((r, item) => {
            var value = String(item[field]);
            if(typeof r[value] === 'undefined') {
                r[value] = 0;
            }
            return ++r[value], r;
        }, {});
        return Object.getOwnPropertyNames(data).map(label => ({
            label,
            value : (data[label] * 100) / arr.length
        }));
    }
    
    var arr = [{ FirstName: 'Pavel',      LastName: 'Pavlol',  Phone: '1234567',  Gender:'male' },
    { FirstName: 'Ivan', 	     LastName: 'Ivanov', Phone: '1234567',  Gender:'female' }];
    var result = countFieldPersent(arr, 'Gender');
    Правда в моем варианте значения будут сравниваться как строки, так как я их перевожу в ключи объекта data
    Ответ написан
    Комментировать
  • Можно ли задать css стили элементу массива?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    В Вашем примере элементы массива - просто числа и никакого отношения к dom и соответственно к css они не имеют, задать css класс можно только для dom элемента через свойство classList
    node.classList.add('class') - добавляет
    node.classList.remove('class') - удаляет
    node.classList.contains('class') - проверка наличия
    Если из массива генерируется html то там вообще просто, дописывайте по условию атрибут class к нужному тегу

    Ну а проверить нечетность n можно таким условием: if(n % 2)
    Ответ написан
    3 комментария
  • Стилизация мини-аудио плеера. Как быть?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    тык
    вполне себе доступное описание апи тега audio
    Ответ написан
    Комментировать
  • Есть ли скрипт который даст смотреть HLS видео в стандартных плеерах браузеров?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Ответ написан
    Комментировать