Ответы пользователя Roman_Kh по тегу «JavaScript»

Как прослушивать store и ререндерить компонент?

Roman_Kh @Roman_Kh

Из своего компонента вы dispatch вообще не должны вызывать никогда.
В Resize вы должны вызывать action, который вызывает dispatch.
Когда store выполнит обновление, он должен отправлять сообщение, допустим, RESIZE
Совершенно независимо от этого Modal должен при создании (например, в componentDidMount) подписаться на получение сообщений RESIZE от store.
Получив сообщение, Modal должен отреагировать на него, например, вызвав render, изменив свое состояние через setState или через forceUpdate().

Ответ написан более трёх лет назад

3 комментария

С помощью React.js можно собирать интерфейсы?

Roman_Kh @Roman_Kh

Это сделано с помощью React и React Router, а потом собрано WebPack'ом

Ответ написан более трёх лет назад

3 комментария

Как сделать handleChange(event) который слушает сразу 2 события?

Roman_Kh @Roman_Kh

...
handleChange(source, event){
   // source содержит имя элемента, сгенерировавшего событие: Comp1 или Comp2
   ...
}

render(){
   ...
  <OneComponent ... onSomeEvent={this.handleChange.bind(this, "Comp1"} />
  <OtherComponent ... onAnotherEvent={this.handleChange.bind(this, "Comp2"} />
   ...
}
...

Ответ написан более трёх лет назад

8 комментариев

Какие плюсы и минусы Webpack перед Browserify?

Roman_Kh @Roman_Kh

1. Генерация нескольких файлов (в т.ч. содержащих по несколько модулей сразу)
2. Динамическая подгрузка файлов
3. Масса плагинов для обработки кода
4. Динамическое обновление кода во время его работы без потери состояния программы

Ответ написан более трёх лет назад

2 комментария

Как реализована загрузка содержимого блоков на facebook?

Roman_Kh @Roman_Kh

React и Flux

Ответ написан более трёх лет назад

6 комментариев

Как с помощью Webpack с CommonsChunkPlugin разделить код по страничным бандлам?

Roman_Kh @Roman_Kh

Потому что vendor не должен быть в entry, если вы хотите, чтобы он стал единой сборкой общего кода.

А вообще, лучший туториал по Webpack - https://www.youtube.com/playlist?list=PLDyvV36pndZ... - с разнообразными примерами и подробными пояснениями.
Смотрите видео с 3.1 по 3.6 - это займет 20 минут, зато все станет понятно.

Ответ написан более трёх лет назад

7 комментариев

Как организовать большой single page application?

Roman_Kh @Roman_Kh

Есть несколько вариантов динамической загрузки модулей.

Например, можно разместить каждый компонент в отдельном файле, но в конце вместо exports вставлять компонент в глобальный скоуп браузера.

var SomeComp = React.createClass({
   ...
})

window.SomeComp = SomeComp

И затем в другом файле вы легко можете сослаться на этот компонент:

...
  render(){
      ...
     <SomeComp ... />
     ...
  }

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

Но лучше всего воспользоваться webpack loaders. Тем более, что они как раз и созданы для вашей задачи.

Ответ написан более трёх лет назад

2 комментария

Наполнение объекта javascript в цикле, как сделать элегантно?

Roman_Kh @Roman_Kh

Чтобы избавиться от "жутких if'ов" и сделать элегатное обновление вам нужно
1. изменить структуры данных: users и jobs должны стать map'ами по именам пользователей.

users = {
     'Вася' : {
           'job': 'Слесарь', 
           'phone' : 123345
     },
     'Петя' : {
           'job': 'Слесарь', 
           'phone' : 789901
     }
}

jobs = {
     'Вася' : { 'job': 'Плотник' },
     'Петя' : { 'job': 'Столяр' }
}

2. применить Object.assign (или object-assign)
И тогда весь ваш цикл превратится в одну строчку
Object.assign(obj.users, users)
И обновление работ также уместится на одной строке:
Object.assign(obj.users, jobs)
Или можно объединить обе операции:
Object.assign(obj.users, users, jobs)

Обратите внимание, что в случае с object-assign будет чуть-чуть иначе:
obj.users = object_assign(obj.users, users, jobs)

Ответ написан более трёх лет назад

4 комментария

Есть JS библиотеки для работы с статистическими рассчетами (мне нужно распределение Пуассона)?

Roman_Kh @Roman_Kh

Есть, например, jStat, в котором как раз есть распределение Пуассона.

Ответ написан более трёх лет назад

1 комментарий

Как подписать ребенка на событие?

Roman_Kh @Roman_Kh

Например, вот так

class Parent {
  ....
  handleChildTick(someData){
      // обработать данные от потомка 
      // (указание на конкретного потомка можно вставить в структуру someData)
  }
  ....
  render(){
      ....
      <Child ... onTick={this.handleChildTick} />
      ....
  }
}

class Child {
  ....
  someAction(){
      ....
      if(this.props.onTick)
          this.props.onTick(someData)
      ....
  }
}

Ответ написан более трёх лет назад

Комментировать

Почему скрипт срабатывает только после абсолютно полной загрузки страницы?

Roman_Kh @Roman_Kh

Потому что ваш скрипт завернут в вызов $(window).load, который как раз и предназначен для того, чтобы запустить скрипт только после 100% загрузки страницы.

Ответ написан более трёх лет назад

Комментировать

Округление float чисел?

Roman_Kh @Roman_Kh

Конкретные операторы и функции сильно зависит от используемого вами языка программирования, но в целом алгоритм такой:
1. Сначала округляете число до нужного вам количества знаков.
2. Затем преобразуете его в строку
3. После чего удаляете все нули с конца строки, если они есть.
Во многих языках вам вообще ничего не надо делать, потому что их стандартные функции и так удалят все ненужное.

Ответ написан более трёх лет назад

Комментировать

Как выбрать конкретный элемент (React Native)?

Roman_Kh @Roman_Kh

Видимо, вам нужен bind:

handlePress(photoNo){
    // do something with photo number photoNo
    ....
}
....
render(){
    ....
    <TouchableHighlight onPress={this.handlePress.bind(this, photoNo)}>
      <Image style={...} source={...} />
    </TouchableHighlight>
    ....
}

Ответ написан более трёх лет назад

Комментировать

React и Flux: как получить данные при загрузке страницы?

Roman_Kh @Roman_Kh

По идее, ваш компонент понятия не имеет, нужно или нет загружать данные с сервера. Об этом знает только store. Поэтому компонент должен лишь запрашивать данные у store, но при этом уметь понимать, что в ответ получены именно данные и тогда отрисовывать обычный контент, или что в ответ получена информация о том, что данные загружаются с сервера и тогда отрисовывать другой контент (например, с иконкой и сообщением о загрузке).
Примерно так:

class SomeComponent {
  ...
  componentDidMount() {
      Store.addListener("DATA_CHANGED", this.handleChanged)
      Store.addListener("DATA_LOADED", this.handleLoaded)
  }
  ...
  handleLoaded(){
     // just force rendering (you can do something smart beforehand though)
      this.forceUpdate()
  }

  ...
  renderContent(){
      // your usual render code
      ...
  }

  renderLoading(){
      return <Icon type="spinner" spin />
  }

  render(){
      if(Store.isLoading()){
          return this.renderLoading()
      } else {
          return this.renderContent()
      }
  }
}

Ответ написан более трёх лет назад

Комментировать

Войдите на сайт