Ответы пользователя по тегу JavaScript
  • Как реализовать через импорт без fs?

    Судя по всему это клиентский код.
    При этом вы пытаетесь на клиенте использовать модуль файловой системы, что конечно же невозможно.

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

    Ваша задача - инпортировать *.ejs модуль так, чтобы он не исполнился, а просто лег строчкой в память.
    Если вы используете вебпак, то для этого подойдет raw-loader https://v4.webpack.js.org/loaders/raw-loader/ или более современная альтернатива, которая так де указана в этой документации.
    Ответ написан
  • Что эффективнее использовать css || js?

    Вопрос достаточно абстрактный, но в большинстве случаев правильным ответом будет ""js - эффективнее.

    Что же такое эффективность:
    - дальнейшая поддержка
    - расширяемость
    - заменяемость

    Как можно заметить тут ничего нет про скорость, поскольку она не будет сильно отличаться от решения к решению.

    Дальнейшая поддержка - структурировать js код проще чем каскадные таблицы. Здесь вам и ООП с состояния и многое другое.

    Расширяемость - у решения на CSS будут ограничения по вложенности, по работе на тач устройствах, по доступности (a11y).

    Заменяемость - вообще вам не стоит делать меню с нуля, а стоит выбрать одну из популярных библиотек компонентов. Все что вас в ней не устроит - доделать стилями. Как было написано в предыдущих пунктах у меню, как и у любых UI элементов, много скрытых требований, которые уже учтены в популярных библиотеках. И не стоит придумывать их заново.

    Для начала рассмотрите MaterialUI. Потом познакомьтесь с альтернативами. И если уж ничего не подойдет - пишите собственное меню на js.
    Ответ написан
  • Как получить fixed расположение елемента относительно окна?

    element.getBoundingClientRect()

    Кажется это то, что вы ищите, но будьте осторожны - этот метод очень тяжелый. Не стоит вызывать его в частотных событиях типа скролла.
    Ответ написан
  • Можно ли использовать уловия внутри switch/case в Javascript?

    var n = 10;
    switch (true) {
      case n < 10: console.log(1); break;
      case n === 10: console.log(2); break;
      case n > 10: console.log(3); break;
    }
    Ответ написан
    Комментировать
  • Что быстрее: websocket или "обычное" соединение?

    Думаю единственной проблемой будет работа с другими сообщениями протокола, пока вы передаете файл. Давно не работал с вебсокетами, но что-то мне подсказывает, что передача файла заблокирует другие сообщения по каналу. Если это для вас критично, у вас есть два способа решения проблемы:
    1. Передавать файл частями.
    2. Передавать файл по другому каналу. Таким каналом может быть отдельный сокет или, внимание, xhr

    Если мое предположение о заблокированном канале ошибочно, то других подводных камней я придумать не могу.

    Помните что в http протоколе за вас уже позаботились о формате передачи файлов (вспоминаем про multipart/form-data, как об одном из решений), в сокетах вы будете создавать велосипед.
    Ответ написан
    Комментировать
  • Какой вариант будет работать быстрее для браузера?

    Рекомендую выбирать решение опираясь не на скорость, которая, к слову, будет примерно одинаковой, а на структуру проекта.
    Если проект большой или обещает таким быть, оцените сколько вы готовы вложить в железо. Если в этом месте будуте экономить, то не стоит возлагать функцию щаблонизации на сервер - отдавайте json.
    Как я понимаю в вашем случае речь идет о динамических данных, которые рендерятся при каждом запросе. Если же этот json статичен или допустим обновляется раз в час, то вполне можно рендерить эту страницу на сервере раз в час.
    Тут нужно только решить готовы ли вы жить с серверными инструментами шаблонизации в проекте или вам комфортнее шаблонизировать на клиенте. Другими словами многое зависит от выбранного вами фреймворка, если он вообще есть.
    Ответ написан
    Комментировать
  • Оптимизация конкретного кода JS(gulp)?

    Что вам не подходит в следующем коде (вариант можно доработать, если понять куда двигаться):
    var gulp = require('gulp');
    var haml = require('gulp-haml');
    var prettify = require('gulp-prettify');
    
    
    gulp.task('layouts', function() {
      gulp.src('./haml/layouts/*.haml')
        .pipe(haml())
        .pipe(prettify({indent_size: 2}))
        .pipe(gulp.dest('./_layouts/'));
    });
    
    gulp.task('includes', function() {
      gulp.src('./haml/includes/*.haml')
        .pipe(haml())
        .pipe(prettify({indent_size: 2}))
        .pipe(gulp.dest('./_includes/'));
    });
    
    gulp.task('posts', function() {
      gulp.src('./haml/posts/*.haml')
        .pipe(haml())
        .pipe(prettify({indent_size: 2}))
        .pipe(gulp.dest('./_posts/'));
    });
    
    gulp.task('default', ['includes', 'layouts', 'posts']);
    Ответ написан
    Комментировать
  • Сannot run in wd %s %s (wd=%s) -Что за ошибка?

    Почитайте про --unsafe-perm флаг для npm. Если в двух словах, то "Нельзя так просто взять и выполнить нпмовские подкоманды от рута"
    Ответ написан
    Комментировать
  • Как отслеживать прогресс Promise?

    Прогресс не просто так убрали из Promise, в большинстве случаев это антипаттерн.
    Нужно понимать что Promise A+ спроектированы так, чтобы инкапсулировать внутри себя всю связанную с операцией логику.
    Именно поэтому я не советую вам придумывать код, который требует методов Promise.progress, Promise.cancel или свойств Promise.isFullfilled, Promise.isRejected.

    Т.е. вы все еще можете пользоваться этими свойствами, но только не в контексте A+.
    Берите Q или любую легковесную замену, и реализуйте все что хотите через defer.
    Примером того, что вы получите в итоге может являться ответ @onqu

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

    Отменяйте промис только внутри него. Сообщайте об изменении состояния только с помощью then. Если вам нужно отслеживать прогресс загрузки чего либо, делайте это через события или каллбеки:

    function doSomethingAsync(timeout, cb) {
      var ee = new EventEmitter();
      var state = {
        progress: 0
      };
    
      (function loop() {
        if (state.progress === 22) return cb(null, state);
        if (state.progress === 'canceled') return cb(new Error('Action canceled'));
        if (state.progress * 1000 > timeout) return cb(new Error('Action timed out'));
    
        ee.emit('progress', state);
        setTimeout(loop, 1000);
      })();
    
      return ee;
    }
    
    
    function a20SecAction(actions = {}) {
      var maxActionTime = 20000;
    
      return new Promise((resolve, reject) => {
        var actionWithProgress = doSomethingAsync(maxActionTime, (err, result) =>
          (err ? reject : resolve)(err || result)
        );
    
        actionWithProgress.on('progress', actions.progress);
      });
    }
    
    a20SecAction({
      progress: (state) => console.log('state:', state.progress)
    }).then(
      (res) => console.log('state: ready'),
      (err) => console.log('state:', err)
    );


    Итак, если у вас есть действие, которое в любом случае должно завершиться, но вам нужно отслеживать прогресс (например загрузки файла), то не пытайтесь решить это на уровне промиса (A+) он вам не подойдет.
    В моем примере три этапа:
    1) Некоторая простейшая асинхронная функция оформленная в nodejs стиле, т.е. она принимает набор параметров и каллбек вида function (err, result) {}
    Это ваш минимальный строительный блок
    2) Функция обертка - более высокий уровень, на котором мы начинаем работать с промисом. Как параметры функция принимает обработчики дополнительных событий нашей операции. В данном случае у операции одно дополнительное событие progress, и два основных - fullfilled, rejected.
    3) Задаем обработчики для всех событий, основные обрабатываем в then, дополнительные через заданные параметры.
    В данном случае я оставил возможность влиять на процесс выполнения извне, внутри обработчика progress. Но лишь для демонстрации того, что это в принципе возможно. На практике лучше не допускать ситуации, когда изменение состояния асинхронной операции происходит извне:
    a20SecAction({
      progress: (state) => {
        console.log('state:', state.progress);
        if (state.progress === 7) state.progress = 'canceled';
      }
    }).then(
      (res) => console.log('state: ready'),
      (err) => console.log('state:', err)
    );


    Ну и в заключении, если у вас уже есть внешняя библиотека, которая предоставляет вам обычный промис для действия, которое может длиться 20 сек, а вам нужно иметь возможность наблюдать за прогрессом - меняйте библиотеку.
    Ответ написан
    2 комментария
  • Как реализовать вариадическую чистую функцию без классов типов?

    Вы уверены что хотели получить именно такой массив?

    По поводу той же суммы дам вам интересную идею на поиграться:
    function sum(a) {
      var sum = a;
      
      function _sum(b) {
        if (b === undefined) return sum;
        
        sum += b;
        return _sum;
      }
      
      _sum.toString = function() {
        return sum;
      };
      
      return _sum;
    }
    
    sum(1)(2)(3) + sum(2)(2) + sum(sum(1)(2)(3))(4)(5); // 25


    Некоторые отличия в этой реализации:
    1. Чуть реже создаются новые функции (у вас новая функция появляется при каждом вызове).
    2. Не обязателен последний вызов, чтобы получить значение. Т.е. так же есть возможность получить промежуточное значение и продолжить вычисления. Вообще если вы уверены что в операциях будут участвовать только числа, было бы правильнее определить valueOf, но toString универсальнее.
    3. Ваша реализация не учитывает sum(1)(2)(0)(3)()
    Ответ написан
    2 комментария
  • Два цикла в Canvas с определенной задержкой?

    Андрей Перелыгин , думаю змейкой это вот так:
    jsfiddle.net/en7yco18/5
    Ответ написан
    Комментировать
  • Есть ли в jQuery "пауза" в коде?

    Если вам реально нужна синхронная пауза в коде, чего я не рекомендую, то она может выглядеть так:

    function pause(delay) {
      var startTime = Date.now();
    
      while (Date.now() - startTime < delay);
    }
    
    alert(1);
    pause(5000);
    alert(2);


    Если все же вы планируете выполнять в коде некоторые действия, но через определенный промежуток времени вам нужно вызвать alert(2), то это уже отложенное выполнение функции. Операция эта асинхронная, простейший пример реализации setTimeout

    alert(1);
    setTimeout(alert, 5000, 2);
    alert(3);
    Ответ написан
    Комментировать
  • Какие есть текстовые редакторы написанные на javascript с подсветкой синтаксиса?

    Вам стоит обратиться к гуглу с запросом js wysiwyg. Ключевое слово здесь конечно же wysiwyg
    Ответ написан
    Комментировать
  • Где и как правильнее объявлять переменные?

    Не вариант 1 это точно.

    2 или 3 зависит от того на сколько точно вы сформулировали вопрос:
    Если вас интересуют именно переменные, которые будут использоваться только внутри модуля, то вам нужен вариант 3 - это общепринятая на данный момент практика объявления приватных полей и методов класса в js.

    Если же вы все-таки хотите иметь прямой доступ к этим переменным из других модулей, то вам подойдет вариант 2 - это объявление публичных методов и полей класса.

    Ваш код можно переписать следующим образом:

    new function() {
      var privateStaticVariable = 'privateStaticValue';
    
      function Module(num) {
        Object.defineProperty(this,  '_privateOption',  {
           value: 'privateValue' + num,
           enumerable: false,
           configurable: true,
           writable: true
        });
    
        this.publicOption = 'publicValue';
      };
    
      Module.prototype.init = function() {
         console.log(privateStaticVariable);
         console.log(this._privateOption);
         console.log(this.publicOption);
      };
    
      Module.prototype.events= function() {
      };
    
      var module1 = new Module(1);
      var module2 = new Module(2);
    
      module1.init();
      module2.init();
    
      return module1;
    };


    Использование new function это моветон, но раз уж вам так хочется...
    Ответ написан
  • Плохо ли изменять (дополнять) прототипы встроенных объектов JavaScript?

    Ситуация более реалистичная:
    Вы пишете библиотеку А и решили реализовать String.ptototype.toURL
    Кто-то другой пишет библиотеку B и тоже реализует эту функцию.
    Вы подключаете библиотеку B в свой проект и пытаетесь понять, почему написанная вами функция работает не так как задумано.
    Ответ написан
    Комментировать
  • Как узнать о завершении выполнения кода модуля в Node.JS?

    Если уж вы серьезно собираетесь писать PHP подобный сервер, то мой вам совет почитайте про vm модуль, он бы вам пригодился.

    Но честно говоря вы создали себе проблему на пустом месте, потому что сменили язык программирования, но не сменили идеологию мышления.
    Ответ написан
    2 комментария
  • Как сделать базовый объект контейнером верхнего уровня?

    Ваша цель достижима двумя способами:

    Первый позволит Вам писать, так как вы заказывали:
    var a = {};
    console.log(a.document);

    но имейте в виду он опасен. Дело в том, что вы не можете просто так определить window, как прототип для Object - вы получите циклическое наследование - window является объектом типа Object, Object является объектом типа Window. JS просто не позволит Вам такое сделать, поэтому для начала затрем window память о том, что он(а/о) объект
    window.__proto__.__proto__.__proto__ = null;
    ну и теперь правильно присвоим прототип объекту, будем перезаписывать его null прототип:
    Object.prototype.__proto__.__proto__ = window;
    Общий рецепт:
    window.__proto__.__proto__.__proto__ = null;
    Object.prototype.__proto__.__proto__ = window;
    
    var a = {};
    console.log(a.document);

    НО! Я бы не рекомендовал вам творить подобное, это очень опасно.

    Второй вариант короче, безопаснее, но может вам не подойти:

    var a = {__proto__:  window};
    console.log(a.document);


    Остается только понять зачем вам вообще такое понадобилось, возможно есть куда более надежные способы решения проблемы.
    Ответ написан
  • Где ошибка в gruntfile.js?

    Вы забыли запятые:
    }, // <-- Запятая
      //Сжатие
      uglify: {
        build: {
          src: 'production/js/script.js',
          dest: 'production/js/script.min.js'
        }
      }
    Ответ написан
    2 комментария