Ответы пользователя по тегу JavaScript
  • Как создать простое приложение на react-native?

    У вас слишком общий вопрос.
    Посмотрите https://rnplay.org/ . Документацию. Вы знакомы с реактом? Если нет - то сначала освойтесь с ним.

    Переходы по страницам осуществляются так же, как и на react'e для web - react router, например
    Ответ написан
    5 комментариев
  • Как правильно работать/подключать sass/css в React.js?

    Попробуйте style-loader:
    import styles from 'styles.less';
    ...
    componentDidMount() {
      styles.use();
    }
    
    componentWillUnmount() {
      styles.unuse();
    }


    Тогда стили будут добавляться на страницу, когда компонент будет установлен. Но мне как-то не особо такой подход нравится и я просто делаю файл styles.less куда импортирую все нужные мне стили компонентов. И у меня на роут 'GET /styles.css' стоит обработчик, который отдает скомпиленный styles.less

    Аналогичное решение будет и для sass\postCss ...
    Ответ написан
  • Есть ли способ не привязывать каждую функцию в которой нужен this в ES6 React?

    В babel с пометкой stage-0 есть такая штука - https://github.com/jeffmo/es-class-static-properti...

    Она позволяет делать так:

    class MyClass {
      foo = () => {
        console.log('foo a = ', this.a);
      }
    
      bar = () => {
        this.a = 10;
        setTimeout(this.foo, 10); // Мы не биндим foo на this
      }
    }
    
    const o = new MyClass();
    const bar = o.bar; // и тут тоже не биндим
    
    bar(); // выводит "foo a = 10"
    Ответ написан
    Комментировать
  • Как передать/получить атрибут data в следующей ситуации?

    Потому что this в момент выполнения кода вряд-ли указывает на div.pop.

    var $pop = $('div.dop');
    $pop.myRat({'tekr': $pop.data('rat') });
    Ответ написан
    Комментировать
  • Можно ли написать вирус на JavaScript?

    Начнем с того, что вирус - это довольно сложная вещь и состоит он обычно из нескольких модулей. Один из них - это эксплойт. Его основная задача - эксплуатировать уже известную уязвимость с целью получения возможности выполнения произвольного кода (как пример).

    Если мы мельком полистаем список уязвимостей, то увидим, что во многих из них фигурирует JS. Вот график взятый с того же сайта:
    RXmc_1mXxXA.jpg
    На нем прекрасно видно динамику уязвимостей приводящих к удаленному выполнению кода (красная линия). Отсюда логичный вывод - js можно использовать как эксплоит.

    Некоторые предыдущие ораторы неверно отмечали - браузер, как и любое другое полноценное приложение, имеет доступ к файловой системе (тот самый обычный доступ, когда можно писать, читать, создавать не системные файлы) посредством API операционной системы (например: WinAPI для windows). Внутри это все выглядит как системный вызов - программа передает управление на уровень ядра, предварительно сказав, что нужно открыть\создать\записать такой-то файл. Значит, нам нужен ассемблерный (да-да, не удивляйтесь) код, на который наш эксплоит передаст управление.

    Ок. Теперь перейдем к самому эксплоиту. Есть такая техника - heap spraying: мы берем нашу полезную (вредную) нагрузку и заполняем ей всю память:
    var buf = new Array();
    // заполним 200МБ памяти
    for(var i = 0;  i != 200; ++i) {
      buf[i] = nop + shellcode;
    }


    И, вполне возможно, что мы перезапишем определенные области (не буду вдаваться в подробности) и сможем выполнить наш shellcode. И да, как сказал riot26 - браузер после такого, скорее всего, крэшнется ... но нам это уже не важно - код будет внедрен и выполнен. Конечно, это банальщина и есть еще 100500 различных вариантов, о которых вам никто не расскажет, но идея ясна.

    PS пользуясь случаем - передаю привет людям в погонах!
    Ответ написан
    2 комментария
  • Как добавить данные в массив через foreach в react?

    1. push мутирует массив. Читаем это и никогда не мутируем state. На ES6 добавить элемент в массив можно так:

    this.setState({ massiv: [ ...this.state.massiv, "новый элемент"  ] })


    2. Данные компоненты должны получать только через props. Конечно, некоторые из компонентов у вас будут как controller-view (подключены к store и будут получать данные через события\конекст\еще как-нибудь), но таких контроллеров должно быть мало, реально мало - в основном на верхних уровнях дерева.

    3. По поводу ajaxa - выносите такую логику в бизнес-слой. В ваши action creators, например. Тогда у вас не возникнет таких проблем: делаете запрос -> когда он завершится отправляете соответствующий action (success, failure) -> store обрабатывает экшен, изменяет свое состояние -> controller view получает новые данные и рендерится

    4. В ES6 есть промисы
    const someArr = [];
    const doAjaxJob = el => fetch('some-url', .... );
    const p = Promise.all(someArr.map(doAjaxJob)); // <-- сюда можно подписаться


    PS И главное - не превращайте хороший функциональный стиль в спагетти
    Ответ написан
    Комментировать
  • Как добавить элемент в форму по клику в React?

    Я набросал пример - jsfiddle.net/yuvuyrhv/19

    class MyForm extends React.Component {
    
      constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.addGood = this.addGood.bind(this);
        this.changeGoodCount = this.changeGoodCount.bind(this);
        this.state = { goods: [] };
      }
    
      handleSubmit() {
        console.log('handleSubmit');
      }
    
      addGood() {
        const { goods } = this.state;
        this.setState({ goods: [ ...goods, { count: 0 } ] });
      }
    
      changeGoodCount(n, count) {
        const { goods } = this.state;
        this.setState({ goods: goods.map( (good, i) => i === n ? { count } : good ) });
      }
    
      render() {
        const { goods } = this.state;
        const { handleSubmit, addGood, changeGoodCount } = this;
        console.log('MyForm.render() -> goods =', goods);
        return (
          <form onSubmit={handleSubmit}>
          	<div>
              Имя пользователя: <input type="text" />
            </div>
            <div>
              Телефон: <input type="text" />
            </div>
            <div>
              { goods.map( (good, i) => <GoodInput key={i} good={good} n={i} onChange={changeGoodCount}/> ) }
            </div>
            <div>
              <button type="button" onClick={addGood}>Добавить что-либо</button>
            </div>
          </form>
        );
      }
    }
    
    class GoodInput extends React.Component {
      handleChange(e) {
        const { n, onChange } = this.props;
        const count = e.currentTarget.value;
        onChange(n, count);
      }
    
      render() {
        const { good, n } = this.props;
        return ( 
          <div>
            Количество товара {n} <input type="text" onChange={(e) => this.handleChange(e)} />
          </div>
        );
      }
    }


    Идея, надеюсь, ясна. В итоге подключите к вашим сторам все это, уберете стейт, добавить проп тайпс, добавите обработчики onChange на все инпуты и так далее...
    Ответ написан
    2 комментария
  • Как достать 1 значение из массива в React-е?

    Внесу свою лепту. Буду базироваться на ответе Алексей Зуев :

    1. Сделать отдельный компонент для строки с товаром (GoodRow) и строки с товарами пользователя (UserGoodsRow). Все-таки разные вещи.

    2. Для всех динамических дочерних компонентов надо добавить свойство key

    3. Никогда не называйте поля объекта с большой буквы. Фи. Да и CamelCase предпочтительней, чем SnakeCase

    Результат -> jsfiddle.net/yuvuyrhv/11

    4. Как вы относитесь к ES6? Вам все равно нужен babel!
    jsfiddle.net/yuvuyrhv/13

    5. Указывайте propTypes

    Ну и напоследок скажу, что логику разбиения продуктов по пользователям НЕОБХОДИМО вынести в отдельный слой (либо в бизнесс ... или, на худой конец в какой-нибудь controller-view вроде UserGoodsPage)

    Финальный результат -> jsfiddle.net/yuvuyrhv/14

    PS Также рекомендую взять в использование один из инструментов, облегчающих ФП - будь то lodash, underscore или ramdajs
    Ответ написан
    1 комментарий
  • Принудительная загрузка скрипта на React.js, как?

    <script type="text/javascript">
      google.load('visualization', '1.1', {packages: ['geochart'], callback: drawVisualization});
    
      function drawVisualization() { ... }
    </script>

    Этот кусок кода вообще особняком стоит. Нужно же его интегрировать ... Начнем!

    Первым делом поместим функцию drawVisualization в наш js файл:
    function drawVisualization(element, commonData, regionData) {
      console.log('elemet', element);
      var data = google.visualization.arrayToDataTable(commonData);
      var mapVisualization = new google.visualization.GeoChart(element);
      mapVisualization.draw(data, regionData);
    }


    И немного модифицируем главный файл:
    <script type="text/javascript">
      google.load('visualization', '1.1', {packages: ['geochart']});
    </script>


    Затем определим компонент, который будет рисовать карту:
    class MapVisualization {
    
      componentDidMount() {
        this.drawMap();
      }
      
      componentDidUpdate() {
        this.drawMap();
      }
      
      drawMap() {
        drawVisualization(this.refs.mapDiv.getDOMNode(), this.props.commonData, this.props.data);
      }
    
      render() { 
        return (
          <div ref="mapDiv" />
        );
      }
    };


    Готово. Все данные поместим в props компонента Tabs и затем изменим его render:
    render() {
          var list = this.props.data.map(function(d, i) { return <button type = "button" className = { 'tab' + (i === this.state.current ? ' active' : '') } key = { 'tab-' + i } onClick = { this.handleClick.bind(this, i) }>{d.title}</button>
          }.bind(this));
    
          const { commonData, data } = this.props;
          const { current } = this.state;
          return (         
            < div className = 'container' >
              <div className='col-12'>
                  {list}
                  <div className = 'map'>
                    <MapVisualization data={data[current].content} commonData={commonData} />
                  </div>
              </div>
            </div>
          );
        }


    Вместо ссылки я использую конечно-же кнопку.
    Конечный результат

    Это конечно далеко от идеала, но я так понимаю Вы не давно начали реакт - поэтому пойдет
    Ответ написан
    4 комментария
  • Почему AngularJS плохо индексируется поисковиками, а ReactJS хорошо?

    На laravel вы пишете rest API + у вас будет сервер на node.js на котором запущено универсальное (изоморфное) react-приложение.
    Идея в том, что такое приложение (благодаря виртуальному DOM) работает как на клиенте, так и на сервере. React может автоматически подхватывать отрендеренную на сервере верстку (в том числе правильно навесить на нее ваши обработчики событий - клики, сабмиты и так далее).
    Ответ написан
    Комментировать
  • Существует ли индексируемый поисковиками аналог AngularJS?

    flux + react.js
    Ответ написан
    Комментировать
  • Как использовать react-dom и react-router вместе?

    Как же так искать можно?!

    https://github.com/rackt/react-router/blob/v1.0.0-...

    Замените React.render на ReactDOM.render вот и все
    Ответ написан
    2 комментария
  • Как сделать конструктор пиццы, т.е. выбираешь какие-то ингредиенты и они добавляются на основной картинке как бы слоями сверху?

    Два варианта:
    1) canvas и рисовать слои друг над другом (первый сайт)
    2) Возится с div'ами. Просто накладывая картинки с прозрачностью (вторые два сайта).
    Выглядят картинки так:
    tomat2.pngbel.pngkolbasa1.png

    А вообще можете через dev-tools сами посмотреть как и что сделано
    Ответ написан
    1 комментарий
  • Как подружить node-babel и forever?

    Вы знаете для чего нужен forever?

    A simple CLI tool for ensuring that a given script runs continuously (i.e. forever).


    Это значит, что вы запустили ваш скрипт app.js, который слушает какой-то порт (занял его), потом (судя по всему) пытаетесь запустить еще один скрипт, который пытается подключится к этому же порту и получаете ошибку - адрес (порт) уже занят.

    Убейте предыдущий скрипт, а потом уже запускайте новый.
    Ответ написан
    Комментировать
  • Requirejs и итерация?

    Ваша проблема в том, что Вы замыкаете коллбек на значение переменной i. Если коллбек не успевает отработать до конца цикла (а так и происходит), то вы в console.log будете получать всегда последнее значение i. Подробнее Почему происходит магия в JS коде?
    Ответ написан
  • Javascript срабатывает после 2 клика - почему?

    Что не так с $('#votepost').submit(function(e){ ?


    Верните false из функции и будет вам счастье
    Ответ написан
  • Насколько широко сейчас можно применять рендер на клиенте?

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

    Что касается сео - я сам интересовался некоторое время назад, посмотрите тут: Индексация сайта при использовании AngularJS

    Так что сейчас нету особых проблем с сео таких приложений.
    Ответ написан
    Комментировать
  • Как в AngularJS ui-router сделать вложенные стейты?

    Скорей всего у Вас ошибка в шаблоне для core.api . В документации к uiRouter сказано, что:
    //Relatively targets the unnamed view in this state's parent state <div ui-view/>
    "" : { ... }


    То есть вьюха с пустым названием загружается во вьюху без названия родителя. А если у Вас в шаблоне родителя нету такой вьюхи (а, судя по Вашему описанию - ее нету), то она никуда и не грузится.

    Может быть вам подойдет такой вариант для core.api.create:
    // absolutely targets the unnamed view in root unnamed state.
    // <div ui-view/> 
    "@" : { ... }


    Либо добавьте <div ui-view/> в шаблон core.api
    И если Вы используете только unnamed views, то можно проще делать - указывать templateUrl как у Вас в core state
    Ответ написан
    1 комментарий
  • Обязательно ли необходим javascript для того, чтобы работать с angularjs?

    Просто как я понимаю из позиционирования jquery и angularjs - библиотека, упрощенный javascript, а второе - фреймворк, написанный на javascript'е, так?


    jQuery - библиотека, облегчающая работу с DOM
    Angular - фреймворк для построения single page application (spa)

    Ни то ни другое никак не "упрощает" javascript. Так что js Вам выучить придется.
    Ответ написан
    Комментировать