Ответы пользователя по тегу JavaScript
  • Как выполнить 2 promise параллельно с Promise.race()?

    rockon404
    @rockon404
    Frontend Developer
    Каким образом запустить первых два promise , а параллельно выполнить 3й с первыми двумя ?

    Другими словами, параллельно запустить три?

    Promise.all([
      promise4000(),
      promise2000(),
      promise3000(),
    ]).then(result => { 
      // do something
    });


    Promise.race() вернет вам значение первого завершившегося Promise.
    Ответ написан
    2 комментария
  • Произвольный порядок параметров функции в js?

    rockon404
    @rockon404
    Frontend Developer
    ES5:
    function foo(props) {
      var a = isNumber(props.a) ? props.a : 100;
      var b = isNumber(props.b) ? props.b : 200;
      var c = isNumber(props.c) ? props.c : 300;
      var d = isNumber(props.d) ? props.d : 400;
      
      return a + b + c + d;
    }
    
    function isNumber(n) {
      return !isNaN(parseFloat(n)) && isFinite(n);
    }


    ES6:
    const foo = ({ a = 100, b = 200, c = 300, d = 400 }) => a + b + c + d;


    foo({ a: 0, d: 500 }); // 1000
    Ответ написан
  • Как импортировать js библиотеку?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    А зачем в модульном коде манкипатчить window?
    Импортируйте библиотеку в тот файл(модуль) в котором используете.
    import libraryName from 'libraryName';
    
    libraryName.someMethod();

    или:
    import { someMethod } from 'libraryName';
    
    someMethod();


    Почитайте документацию к библиотеке, там все есть.
    Ответ написан
    Комментировать
  • Можно ли добавить несколько обработчиков событий в react?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Example extends Component {
      handleClick = e => {
        const { firstHandler, secondHandler } = this.props;
    
        firstHandler(e);
        secondHander(e);
      };
    
      render() {
        return <button onClick={this.handleClick}>Click me</button>;
      }
    }
    Ответ написан
    5 комментариев
  • Как удалять пустые значения в объекте перед отправкой на бэк?

    rockon404
    @rockon404
    Frontend Developer
    function filterEmptyProps(obj) {
      const result = {};
      Object.entries(obj).forEach(([ key, val ]) => {
        if (val || val === 0) {
          result[key] = val;
        }
      });
    
      return result;
    }

    Чистая функция, возвращает новый объект.

    Демо.
    Ответ написан
    Комментировать
  • Как организовать передача состояния из react в svg?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Лучше создавать спрайт и добавлять его в документ, а иконки забирать по id.
    Компонент на примере Styled Components:
    import React from 'react';
    import styled from 'styled-components';
    
    const SVG = styled.svg`
      display: inline-block;
      vertical-align: middle;
    `;
    
    const Icon = ({ name, ...props }) {
      if (!name) {
        throw new Error('Unknown icon name!');
      }
      return (
        <SVG {...props}>
          <use xlinkHref={`#icon-${name}`} />
        </SVG>
      );
    }
    
    export default Icon;


    Cтилизованая иконка c разными состояниями:
    import React from 'react';
    import styled from 'styled-components';
    import { Icon } from './components';
    
    const StyledIcon = styled(Icon)`
      fill: ${props => props.state.fill};
    `;
    
    const Example = ({ iconState }) => <StyledSVG name="profile" state={iconState} />;
    
    export default Example;


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

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    import React, { Component } from 'react';
    import { withRouter } from 'react-router-dom';
    
    class Example extends Component {
      handler = () => {
        this.props.history.push('/cources');
      };
      
      render() { /* ... */ }
    }
    
    export default withRouter(Example);


    Возможно, вам подойдет простой вариант с компонентом Link:
    import React, { Component } from 'react';
    import { Link } from 'react-router-dom';
    
    class Example extends Component {
      render() {
        return <Link to="/cources" />;
      }
    }
    
    export default Example;
    Ответ написан
    Комментировать
  • Полезно ли изучать React/Redux, если хочешь работать с VueJS?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Изучайте то, что больше нравится.
    Хорошо знать и практиковать оба фреймворка(да, да, да: вообще-то React библиотека бла, бла, бла) нет особого смысла.
    Хотите попробовать React - пробуйте.

    ИМХО хорошо изучите React, на Vue переходить не захотите.
    Ответ написан
    3 комментария
  • Запуск скрипта в определенное время?

    rockon404
    @rockon404
    Frontend Developer
    Насколько я понял addAge - это колбек модалки при закрытии, поэтому эту функцию лучше не удалять.

    Вот для показа по локальному времени клиента:
    var TIME_FROM = 0;
    var TIME_TO = 9;
    
    var date = new Date();
    var clientLocalHour = date.getHours();
    
    if (clientLocalHour >= TIME_FROM && clientLocalHour < TIME_TO) {
      $('.ageWindow').fadeIn(100);
    }
    
    function addAge() { 
      $('.ageWindow').fadeOut(500);
    }


    Вот для показа по локальному времени вашего сервиса(считается на стороне клиента, часовой пояс +3 Москва):
    var SERVICE_TIMEZONE = 3;
    var TIME_FROM = 0;
    var TIME_TO = 9;
    
    var date = new Date();
    var clientLocalHour = date.getHours();
    var timezoneOffset = date.getTimezoneOffset() / 60;
    var serviceComputedHour = clientLocalHour + timezoneOffset + SERVICE_TIMEZONE;
    
    if (serviceComputedHour >= TIME_FROM && serviceComputedHour < TIME_TO) {
      $('.ageWindow').fadeIn(100);
    }
    
    function addAge() { 
      $('.ageWindow').fadeOut(500);
    }

    SERVICE_TIMEZONE - часовой пояс, сейчас стоит +3 Москва, можно задать любой (целое число в диапазоне от -12 до 12)
    TIME_FROM - время начала показа
    TIME_TO - время окончания показа

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

    rockon404
    @rockon404
    Frontend Developer
    Можно использовать unescape из lodash.
    Демо.
    Ответ написан
    Комментировать
  • В чем разница записи замыкания js?

    rockon404
    @rockon404
    Frontend Developer
    Это самовызывающаяся функция. Разницы нет. А замыканиями в JavaScript технически являются абсолютно все функции.
    Ответ написан
    Комментировать
  • Как вы боретесь со слабой типизацией и зачем ее придумали?

    rockon404
    @rockon404
    Frontend Developer
    Для этого в проектах используют TypeScript или Flow:
    const foo = (arg: number) => { /* do something with number type */ };

    Сейчас без них большие проекты лучше даже не начинать.

    О преимуществах слабой типизации:
    1. Удобство использования смешанных выражений (например из целых, вещественных чисел и строк).
    2. Абстрагирование от типизации и сосредоточение на задаче.
    3. Краткость записи.
    Ответ написан
    Комментировать
  • Как правильно построить логику для поиска по массивам?

    rockon404
    @rockon404
    Frontend Developer
    var sorted_fruits_2016 = fruits_2016.sort(sortById);
    var sorted_fruits_2017 = fruits_2017.sort(sortById);
    var sorted_fruits_2018 = fruits_2018.sort(sortById);
    
    var result_2016_2017 = compare(sorted_fruits_2016, sorted_fruits_2017);
    var result_2017_2018 = compare(sorted_fruits_2017, sorted_fruits_2018);
    
    function compare(oldArr, newArr) {
      var deleted = [], added = [], notChanged = [];
      var innerIndex = 0;
    
      if (!newArr.length) {
        return {
          added: added,
          deleted: oldArr,
          notChanged: notChanged
        };
      }
    
      for (var i = 0; i < newArr.length; i++) {
        if (innerIndex >= oldArr.length - 1) {
          added.push(newArr[i]);
          continue;
        }
    
        for (var j = innerIndex; j < oldArr.length; j++) {
          var newElId = newArr[i][0];
          var oldElId = oldArr[j][0];
          
          if (newElId > oldElId) {
            deleted.push(oldArr[j]);
          } else if (newElId < oldElId) {
            added.push(newArr[i]);
            innerIndex = j;
            break;
          } else {
            notChanged.push(newArr[i]);
            innerIndex = j + 1;
            break;
          }
        }
      }
      
    
      return {
        deleted: deleted,
        added: added,
        notChanged: notChanged
      };
    }
    
    function sortById(a, b) {
      return a[0] - b[0];
    }

    Демо.

    Если сравнений надо делать не много, а например по требованию пользователя, то можно сделать функцию обертку для сортировки и сравнения:
    var result = compare(fruits_2016, fruits_2017);
    
    console.log('result', result);
    
    function compare(oldArr, newArr) {
      var sortedOldArr = oldArr.sort(sortById);
      var sortedNewArr = newArr.sort(sortById);
      
      return compareSorted(sortedOldArr, sortedNewArr);
    }
    
    function compareSorted(oldArr, newArr) {
      var deleted = [], added = [], notChanged = [];
      var innerIndex = 0;
      
      if (!newArr.length) {
        return {
          added: added,
          deleted: oldArr,
          notChanged: notChanged
        };
      }
    
      for (var i = 0; i < newArr.length; i++) {
        if (innerIndex >= oldArr.length - 1) {
          added.push(newArr[i]);
          continue;
        }
    
        for (var j = innerIndex; j < oldArr.length; j++) {
          var newElId = newArr[i][0];
          var oldElId = oldArr[j][0];
          
          if (newElId > oldElId) {
            deleted.push(oldArr[j]);
          } else if (newElId < oldElId) {
            added.push(newArr[i]);
            innerIndex = j;
            break;
          } else {
            notChanged.push(newArr[i]);
            innerIndex = j + 1;
            break;
          }
        }
      }
      
    
      return {
        deleted: deleted,
        added: added,
        notChanged: notChanged
      };
    }
    
    function sortById(a, b) {
      return a[0] - b[0];
    }


    Демо.
    Ответ написан
  • Реализация комментариев express.js?

    rockon404
    @rockon404
    Frontend Developer
    Все верно:
    1. пользователь пишет комментарий и нажимает отправить.
    2. инициируется запрос на сервер.
    3. сервер проводит валидацию полученных данных, если она пройдена пишет комментарий в БД и отправляет ответ с со статусом 200 и комментарием с присвоенным идентификатором или просто идентификатор. Если нет возвращает ошибку.
    4. интерфейс отрисовывает полученный комментарий в треде, либо сообщение об ошибке.
    Использование БД для этой задачи обязательно.
    Ответ написан
    2 комментария
  • Что почитать для «посредственного» js разработчика?

    rockon404
    @rockon404
    Frontend Developer
    Хорошо изучите язык по любому хорошему учебнику от корки до корки, читайте статьи, изучаете решения типовых задач на stackoverflow, изучайте чужой код(например репозитории на Github), пишите свой и много.
    Лучше всего прогресс пойдет после устройства на работу.

    Еще почитайте о том как самостоятельно и эффективно находить нужную информацию. Один из самых полезных навыков.
    Ответ написан
    4 комментария
  • Почему получаю ошибку, когда пытаюсь использовать object spread?

    rockon404
    @rockon404
    Frontend Developer
    npm i -S babel-preset-stage-0

    {
      "presets": [
        "env",
        "stage-0",
        "react",
        "flow"
      ]
    }


    transform-class-properties можете смело выпиливать, так как stage-0 содержит в том числе и его.
    Ответ написан
    1 комментарий
  • Как будет выглядеть аналогичный код на любом action creator?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Вопрос поставлен некорректно. Action creators - это функции возвращающие объекты действия(Actions) те, что у вас в actions.js
    Action это объект со свойством type(типом действия) и опционально полезной нагрузкой, который передается в dispatch.

    redux-actions и redux-act это бойлерплейт утилиты для генерации action creators и редьюсеров. Советую пока даже не смотреть в их сторону(а можно и вообще не смотреть), лучше хорошо изучите голый API Redux.
    Еще советую потратить время на знакомство с immutable.js

    И еще, ваш код в actions.js не будет работать, так как функции loading, success, error используются раньше, чем определены.
    Либо поменяйте местами, так чтобы send был объявлен под ними:
    const loading = () => ({ ... });
    const success = () => ({ ... });
    const error = (message) => ({ ... });
    
    export const send = ({ name, phone }) => { ... };

    либо используйте для них ключевое слово function:
    export const send = ({ name, phone }) => { ... };
    
    function loading() { 
      return { ... };
    };
    
    function success() { 
      return { ... };
    };
    
    function error(message) { 
      return { ... };
    };

    А тут можете почитать о разнице между Function Declaration и Function Expression.
    Ответ написан
    Комментировать
  • Автообновление по id Javascript?

    rockon404
    @rockon404
    Frontend Developer
    Вы время получаете один раз при инициализации и значения никогда не меняются. Перенесите получение времени в функцию Test:
    function Test(){
      var D = new Date(); // Получение текущего времени
      var D_M = D.getMinutes(); // Минуты
      /* остальной код функции */
    }
    Ответ написан
    1 комментарий
  • Почему ссылка замыкается на последний элемент экземпляра?

    rockon404
    @rockon404
    Frontend Developer
    Потому что у вас свойство elements в прототипе. Все экземпляры используют один и тот же объект elements. В итоге сколько экземпляров вы не создадите, во всех будет один и тот же объект this.opions.elements со свойством link переопределенным в конструкторе последнего экземпляра.
    Поосторожней с прототипами. В прототипы помимо функций выносят только статику, но никак не динамические значения, разве, что счетчики, но это очень узко применимый и редкий кейс.
    Ответ написан
    9 комментариев
  • Где ошибка в коде?

    rockon404
    @rockon404
    Frontend Developer
    var trouble = +prompt('What is wrong?');
    
    var CABEL = 1;
    var ROUTER = 2;
    var COMPUTER = 3;
    
    switch (trouble) {
      case CABEL:
        console.log('check your cabel');
        break;
      
      case ROUTER:
        console.log('check your router');
        break;
      
      case COMPUTER:
        console.log('reload your PC');
        break;
      
      default:
        console.log('uncorrect trouble');
    }
    Ответ написан
    Комментировать