Задать вопрос
Ответы пользователя по тегу JavaScript
  • Как реализовать автоматическое соединение Websocket при падении сервера?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    1. setInterval вообще не нужен
    2. this.socket = new WebSocket - на этой строке в строгом режиме будет ошибка (this === undefined), а в нестрогом (почему его нет?) создаст socket в глобальном объекте (что плохо)
    3. После создания соединения, события нужно снова навесить

    У меня лично вот так вот все организовано:
    const url = `${location.protocol === 'http:' ? 'ws:' : 'wss:'}//${location.host}/`;
    
    var socket;
    var connected = false;
    
    typeof WebSocket !== 'undefined' && function connect() {
        socket = new WebSocket(url);
        socket.onmessage = onMessage;
        socket.onopen = () => connected = true;
        socket.onerror = err => {
            console.error(err);
            socket.onclose = null;
            connected = false;
            socket.close();
            connect();
        };
        socket.onclose = event => {
            console.info(`WebSocket closed with code ${event.code}! ${event.reason}`);
            connected = false;
            if(event.wasClean) return;
            connect();
        };
    }();
    
    function onMessage(event) {
        //...
    }
    Ответ написан
    1 комментарий
  • Как поправить задачу вывода цифр в названия?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    var nameThatNumber = function() {
      var names = {
                      10: 'ten',
        1: 'one',     11: 'eleven',
        2: 'two',     12: 'twelve',     20: 'twenty',
        3: 'three',   13: 'thirteen',   30: 'thirty',
        4: 'four',    14: 'fourteen',   40: 'fourty',
        5: 'five',    15: 'fifteen',    50: 'fifty',
        6: 'six',     16: 'sixteen',    60: 'sixty',
        7: 'seven',   17: 'seventeen',  70: 'seventy',
        8: 'eight',   18: 'eighteen',   80: 'eighty',
        9: 'nine',    19: 'nineteen',   90: 'ninety',
        100: 'hundred',
        k1: 'thousand',
        k2: 'million',
        k3: 'billion'
      };
    
      function stringify(num) {
        if(num < 1000) {
          return triade(num);
        }
        var triades = [];
        var n = num;
        while(n) {
          triades.push(n % 1000);
          n = Math.floor(n / 1000);
        }
        return triades.map(function(n, i) {
          var t = triade(n);
          if(t === '') {
            return '';
          }
          var nm = ' ' + (names['k' + i] || '');
          return t + nm;
        }).reverse().join(' ').replace(/\s+/g, ' ').trim();
      }
    
      function triade(num) {
        var n = num;
        if(n === 0) {
          return '';
        }
        if(n <= 20) {
          return names[n];
        }
        var result = '';
        if(n >= 100) {
          result = names[Math.floor(n / 100)] + ' ' + names[100];
        }
        n %= 100;
        if(n === 0) {
          return result;
        }
        if(result !== '') {
          result += ' and ';
        }
        if(n <= 20) {
          return result + names[n];
        }
        result += names[Math.floor(n / 10) * 10];
        n %= 10;
        if(n !== 0) {
          result += ' ' + names[n];
        }
        return result;
      }
    
      return function nameThatNumber(num) {
        var n = Math.abs(parseInt(num));
        if(isNaN(n)) {
          return 'Not a number!';
        }
        if(n === 0) {
          return 'zero';
        }
        return (num < 0 ? 'minus ' : '') + stringify(n);
      };
    }();
    Ответ написан
    1 комментарий
  • Почему при обновлении страницы или переходе выходит из Fullscreen?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Скриптом запрашивается фуллскрин на конкретный элемент страницы, когда страница перезагружается данный элемент удаляется, поэтому слетает фуллскрин
    Запоминайте состояние в sessionStorage и активируйте фуллскрин при загрузке страницы
    Ответ написан
  • Crop resize до загрузки download?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Грузим картинку в память, используя FileApi, и отрисовываем ее на canvas
    Как либо изменяем
    Выгружаем как ArrayBuffer и отправляем на сервер по ajax
    Ответ написан
    2 комментария
  • В чем отличие между наследованием в объектах и прототипах?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Прототип будет общий у всех объектов наследников, притом для самих объектов данные поля не будут собственными
    А в случае создания методов внутри конструктора каждый раз будут создаваться новые функции, что медленнее и жрет больше памяти
    Ответ написан
    2 комментария
  • React ES6 state?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    componentWillMount() {
        this.setInterval(() => this.decrimentTimer(), 1000);
      }
    Ответ написан
    Комментировать
  • Javascript objects?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Почему так?
    this ссылается на контекст, в котором функция была вызвана
    test.otherSome(); //контекст - test
    test.otherSome.call(null); //контекст - null
    new test.otherSome(); //контекст - новый объект унаследованный от test.otherSome.prototype
    (0, test.otherSome)(); //контекст - undefined (в strict mode) или глобальный объект (не в strict mode)
    ({ otherSome: test.otherSome }).otherSome(); //контекст - объект который в скобочках

    ЗЫ. А как реализовать такую штуку...? Та которая не работает...

    Смотрите примеры выше, все кроме первого выкинут ошибку, что либо нельзя читать getText из null/undefined (2, 3 примеры), либо, что getText - не функция (3, 5 примеры)
    Ответ написан
    Комментировать
  • Как реализовать ротацию на JS?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    if(Math.random() > 0.1) {
      func90();
    } else {
      func10();
    }
    Ответ написан
    Комментировать
  • Change на динамический select?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    На момент навешивания события динамического элемента еще нет на странице
    Ответ написан
  • Emscripten - где производительность?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Попробовал написать рекурсивный фибоначи на чистом asm.js:
    (function(std, env, heap) {
        'use asm';
        function fib(n) {
            n = n|0;
            if((n|0) < (2|0)) {
                return 1|0;
            }
            return (fib((n|0) - (1|0)) + fib((n|0) - (2|0)))|0;
        }
        return fib;
    }(
        {},
        null,
        new ArrayBuffer(0)
    ));

    Действительно медленнее чем на js
    Причина очевидна: asm.js не оптимизируется никак, это готовые инструкции для виртуальной машины (например v8)
    Обычный js перед компиляцией прогоняется через оптимизатор, который успешно преобразует хвостовые рекурсии в цикл

    Делаем вывод, emscripten пока не умеет оптимизировать хвостовые рекурсии
    И кстати какую опцию оптимизации вы отдавали в em++ ?

    P.S. насчет производительности, у меня хэширующий алгоритм (crc64 с солью) после полного переписывания с js на asm.js дал прирост производительности в 21.7 раз (node 6.3.1 v8 5.0.71.57)
    Ответ написан
    2 комментария
  • Какой паттерн выбрать?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    function myLoop(foo, bar) {
      for(var i = 0; i < foo; i++) {
        //...
      }
    }
    
    if(foo && bar) {
      myLoop(foo, bar);
    } else if (foo || bar) {
      myLoop(foo || 10, bar || 15);
    } else {
      myLoop(100, 200);
    }
    Ответ написан
  • Можно ли asm.js модулю подменить heap-buffer без перезапуска модуля?

    bingo347
    @bingo347 Автор вопроса, куратор тега JavaScript
    Crazy on performance...
    Разобрался сам (ну и комменты от napa3um помогли), выложу тут, может пригодится кому

    Сам ArrayBuffer пока в него ничего не записать память не ест
    Но вот если в обычном js создать на его основе типизированный массив, то память съедается на размер буфера
    Пример:
    const heap = new ArrayBuffer(1 << 30); //создали буфер 1gb но память он пока не занимает
    const heapUI16 = new Uint16Array(heap); // создали типизированный массив связанный с буфером
     // здесь будет сожрана память на весь буфер (1gb + доп данные от v8)
     // + будет большой такой лок процесса пока буфер забьется нулями, что плохо

    Внутри asm.js типизированные массивы ведут себя совсем по другому, они просто связываются с буфером, но не заполняют его ничем и соответственно память не расходуется пока мы что-то куда-то не запишем.

    Собственно решение:
    Использовать в обычном js DataView для манипуляции heap извне, он так же не чем не заполняет буфер и память не ест
    Пример:
    const heap = new ArrayBuffer(1 << 30); //создали буфер 1gb
    const heapView = new DataView(heap); //интерфейс для управления heap снаружи
    
    //asm.js модуль
    const asmModule = (function(std, env, heap) { 'use asm';
    var HUI8 = new std.Uint8Array(heap); //это памяти пока не съест
    
    //...
    }({Uint8Array}, null, heap));
    
    //функция для помещения строки на heap
    function alocateString(pointer, str) {
      heapView.setUint32(pointer, str.length);
      for(let i = 0, p = pointer + 4; i < str.length; i++, (p += 2)) {
        heapView.setUint16(p, str.charCodeAt(i));
      }
    }
    
    //поместим не в начало буфера, а куда нить на позицию в 1мб длинную строку, 8кб:
    alocateString(1024*1024, 'test'.repeat(1024));
    Вуаля, после добавления в буфер 8kb расходуемая процессом память выросла так же на 8kb (ну с копейками)
    Ответ написан
    Комментировать
  • Как отправить команду без перезагрузки страницы?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Читаем про ajaxи про cors
    Если удаленный сервер не отдает cors заголовков и повлиять на это никак нельзя, то читаем про jsonp и imagep
    Ответ написан
    Комментировать
  • Как идентифицировать речь?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    brain.js попробуйте, если нужно именно js
    нейронку он строит самую примитивную, зато прост в обращении
    Ну и да, будьте готовы, что работать оно все будет медленно

    P.S. на asm.js нейроны "думают" в разы быстрее (v8 5.0.71, node 6.3.1)
    Ответ написан
    Комментировать
  • Как проверить что в начале и в конце строки есть число?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Дополню пример Андрей Буров
    /^((-|\+)\.?|\.)?\d|\d$/.test("1test");
    помимо -5 вначале строки так же будет проверятся +5 ; .5 ; -.5 +.5
    Ответ написан
    Комментировать
  • Вопрос из области JavaScript?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Оператор typeof a возвращает строку с типом знаения содержащимся в переменной a на момент вызова
    Возможные значения:
    'string' - любая строка
    'boolean' - true / false
    'number' - любое число, включая NaN, Infinity и -Infinity
    'object' - любой объект кроме функций (не примитив), а так же значение null, массивы, regexp - так же считаются объектами
    'function' - функция (если быть точным - объект который можно вызвать, так как Proxy (es2015) все таки объекты, но вызываемый прокси вернет тип 'function')
    'undefined' - единственное значение - undefined (не определено), его имеют переменные и поля объектов по умолчанию (если оно не задано), а так же его возвращает оператор void при любом аргументе
    'symbol' - символ (es2015) - уникальный идентификатор возвращаемый функцией Symbol(), может использоваться для ключей объекта

    Так же для проверки на число, но исключая значения NaN, Infinity и -Infinity можно использовать такую конструкцию
    !isNaN(a) && isFinite(a)
    (сработает так же на строки, которые парсятся в числа, но можно проверить еще и тип через typeof)
    Ответ написан
    Комментировать
  • Почему перерисовка страницы происходит после alert()?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Операции с dom довольно тяжелые, поэтому когда Вы вызываете изменения в dom браузер их просто складывает и затем применяет все одним разом (своеобразная оптимизация) перед event-loop, то есть, когда текущий поток исполнения завершится
    alert - блокирующая операция, поэтому пока она работает (Вы видите окно) поток исполнения завершиться не может
    Ответ написан
    Комментировать
  • Как заставить объект плавно догонять мышь?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    По событию mousemove складываете координаты мыши в очередь
    По requestAnimationFrame выдергиваете из очереди несколько элементов, при том чем больше очередь - тем больше дергаем (надо подбирать), по полученному набору координат корректируете вектор скорости и отрисовываете движение
    Ответ написан
    Комментировать
  • Как подключить модуль с помощью require()?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Для того чтоб модули работали на клиенте код нужно собирать с помощью webpack или аналогов
    Ответ написан
    2 комментария
  • Как парсить объект с датой или временем внутри?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    localStorage.setItem("tasks", JSON.stringify(tasks, function(key, value) {
      if(value instanceof Date) {
        return '$ISODate(' + value.toISOString() + ')';
      }
      return value;
    }));

    var newTasks = JSON.parse(localStorage.getItem("tasks"), function(key, value) {
      if(typeof value !== 'string') {
        return value;
      }
      var m = value.match(/\$ISODate\((.*)\)/);
      if(!m) {
        return value;
      }
      return new Date(m[1]);
    });
    Ответ написан