Задать вопрос
hzzzzl

hzzzzl

Лайки

  • Как менять текст у нескольких кнопок сразу?

    Casufi
    @Casufi
    Первый вариант - двунаправленный поток данных как в первом ответе, но если у вас будет 10 - 20 компонентов вы запутаетесь
    Проще всего подключить любой стейт менеджемент
    Context API https://reactjs.org/docs/context.html
    redux + react redux
    https://mobx.js.org/README.html
    Из новых https://recoiljs.org/
    Второе, согласно последнему style guide новые компоненты нужно делать функциональными с использованием хуков, а не классами
    1) Они лучше вписываются в функциональный подход реакта, 2) Лучше работают с Fiber
    Ответ написан
    Комментировать
    Комментировать

  • Как работает эта функция?

    dmitry0141e
    @dmitry0141e
    Frontend Developer
    Медленно :)
    Сложность выходит O(n^2)
    Считайте числа Фибоначчи так (сложность O(n) и без рекурсии):
    const fib = (n) => {
    const buf = [0, 1];
    for (let i = 2; i <= n; i++) {
        buf[i % 2] += buf[(i + 1) % 2];
    }
    return buf[n % 2];
};
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать список задом наперед?

    scottparker
    @scottparker
    flex-direction: row-reverse; может расположить элементы в обратном порядке в строку
    Ответ написан
    Комментировать
    Комментировать

  • Как из "2462кккк43453" вычти цифры только до буквы "к" тобишь 2462?

    TAbrahamyan
    @TAbrahamyan
    лучшая видео из того что видел про регулярки

    str.match(/^\d+/);
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать поиск по каждому столбцу?

    0xD34F
    @0xD34F Куратор тега React
    Продублированы данные - зачем? Пусть результат поиска будет изначально пуст, выполняйте поиск после создания экземпляра компонента. Чтобы не пришлось дублировать код поиска, разделите метод на два: один обновляет значения для поиска, другой выполняет собственно поиск и вызывается в двух местах - в componendDidMount и после обновления объекта значений для поиска.

    Стейт обновляется асинхронно, так что сразу после вызова setState вы не увидите в стейте только что обновлённое значение и будете выполнять поиск по старому. Вторым параметром в setState можно передать функцию, которая будет выполнена после обновления стейта - передавайте метод поиска. Или же, в componentDidUpdate проверяйте, что текущий объект поиска не равен предыдущему и в этом случае вызывайте метод поиска.

    Конвертация в json - зачем?

    Почему любая успешная проверка приводит к помещению элемента данных в массив результатов поиска? Так результаты будут дублироваться - скольким значениям из объекта поиска соответствует элемент данных, столько раз он будет помещён в массив результатов. Надо убедиться, что элемент данных соответствует всем значениям из объекта поиска, и только после этого помещать его в массив результатов.

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

    https://jsfiddle.net/vLk97n6y/1/
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать неизменяемую часть в placeholder?

    Kurokq
    @Kurokq
    Наполни смыслом каждое мгновенье
    Ответ написан
    1 комментарий
    1 комментарий

  • Как достать nick из "[id123|nick]" в js?

    @AlexCraft
    Software engineer
    let text = "[id123|nick]"
    let result = text.match(/nick/)
    console.log(result[0])
    Ответ написан
    2 комментария
    2 комментария

  • Как сделать прогресс бар по границе прямоугольника?

  • Как сделать функцию, которая выбирает рандомные элементы массива?

    @yeswell 
    const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

function getRandomRiver(n, arr) {
    const indexes = new Set();
    const limit = arr.length;
    n = Math.min(n, limit);
    while (indexes.size < n) {
        const index = Math.floor(limit * Math.random());
        indexes.add(index);
    }
    const result = [...indexes].map(index => arr[index]);
    return result;
};

const randomSet = getRandomRiver(3, arr);
console.log(randomSet);
    Ответ написан
    4 комментария
    4 комментария

  • Как в React не рендерить элементы с одинаковым полем?

    @yeswell 
    const array = [
    {
        name: 'Jonh',
        age: 32
    }, {
        name: 'James',
        age: 33
    }, {
        name: 'Jacob',
        age: 33
    }
];

const key = 'age';
const values = new Set();

const filtredArray = array.filter(item => {
    const value = item[key];
    if (!values.has(value)) {
        values.add(value);
        return true;
    }
    return false;
});
    Ответ написан
    1 комментарий
    1 комментарий

  • Почему объект показывает 6, а значение length 8?

    sHinE
    @sHinE
    веб-разработчик, php/js/mysql и сопутствующее
    Насколько я помню, такое может быть, если после того как вы сделали console.log этого массива, у вас туда ещё что-то записалось, т.е. он изменился.
    Ответ написан
    2 комментария
    2 комментария

  • Как работает websocket на низком уровне?

    bingo347
    @bingo347
    Crazy on performance...
    Вопрос 1
    Браузер инициирует новое tcp соединение на тот же 80 порт сервера или бывают случаи что на другой ?
    WebSocket работает не поверх голого tcp, а поверх http (а тот уже поверх tcp или tls -> tcp). 80 порт стандартный для http, а 443 - для https (http поверх tls). WebSocket по умолчанию использует те же 80 и 443 порты для ws и wss протоколов соответственно. Но никто не мешает использовать кастомный порт. Конкретные порты для конкретных протоколов - это не более соглашения. Порты работают на IP уровне, который ничего не знает о прикладном уровне.

    Вопрос 2
    Что сервер делает с ws пакетами - проксирует их к СП как есть в обертке, или же обертку раскрывает и передает "чистые/сырые" данные далее ?
    Если речь идет о nginx как о реверси прокси, то для него это обычный http запрос, просто клиент очень долго шлет тело запроса, а сервер тело ответа (главное таймауты тут выключить). Так как http в принципе не запрещает серверу начать слать ответ не закончив чтение запроса, все вполне прекрасно работает.

    Вопрос 3
    Как сервер отличает ws от http - по некой сигнатуре - типа по последовательности первых пришедших байт, по которым можно распознать что это именно ws а не http ?
    По http заголовкам. В частности клиент шлет заголовок upgrade в котором говорит, что хочет WebSocket и еще несколько специфичных для WebSocket заголовков, а сервер отвечает статусом 101 и своим набором заголовков. Это и есть WebSocket рукопожатие. Само общение происходит уже в теле запроса и теле ответа.

    Вопрос 4
    Как эти данные передаются в сторону СП - через переменные окружения, или через unix-socket или через tcp стек?
    Если используя последние два варианта, то получается что сервер держит внутри системы соединения с СП до тех пор пока "наружное" tcp соединение между клиентом и сервером не буде закрыто?
    На уровне tcp вообще пофиг сколько времени открыто соединение, какая из сторон в какой последовательности и сколько данных отправляет. Тут лишь то, что клиент может попробовать открыть соединение, сервер его может принять (или отклонить), а после любая из сторон может слать данные другой или закрыть соединение. Ну и плюс есть гарантии, что потерянные данные будут отправлены повторно и порядок получения совпадет с порядком отправки. На уровне http у нас обычный запрос-ответ, просто клиент слишком долго шлет тело запроса, а сервер - тело ответа. На уровне WebSocket у нас в обе стороны ходят MessageFrame'ы, содержащие данные + метаданные и имеющие четкие границы.

    Вопрос 5
    В свою очередь СП это отдельный unix процесс отличный от основного бекенд приложения, которое работает по принципу "спросили - запустился - обработал - сформировал ответ - отправил - завершился" Или же это все то же бекенд приложение только в том случае если с ним установлено ws-соединение, оно не прекращает свою работу?
    Как реализуете, так и будет. Но одно можно сказать точно, соединение должно быть открытым на протяжении всего сеанса обмена сообщениями.
    Важно еще понимать, что в контексте WebSocket нет понятий запрос и ответ (хотя их могут реализовывать нижележащие протоколы), есть лишь понятие сообщение. Каждая из сторон, пока открыто соединение, может в любой момент времени отправлять любое количество сообщений.

    P.S. если обе стороны (и клиент и сервер) не ограничены только http протоколом для общения через tcp (как например это происходит у браузерных приложений), то WebSocket будет лишней нагрузкой как на сеть, так и на вычисления. Лучше взять какой-нибудь бинарный сериализатор, с четкими границами (msgpack, flatbuffer) и гонять данные по raw tcp или tls.
    Ответ написан
    2 комментария
    2 комментария

  • Зачем нужен ignore в данном коде?

    @camelCaseVlad
    Данный метод называют Clean Up'ом, что можно перевести как зачистка.
    В данном примере представлена "перестраховка" в случае, когда фетч не успел вернуть дату, а компонент уже был демонтирован.

    [1] компонент демонтирован, [2] флаг ignore стал трушным и [3] сетпродукт не будет вызван.

    UPD: В будущем, предполагаю, для клинапа будут использовать АбортКонтроллер.

    https://dev.to/pallymore/clean-up-async-requests-i...
    Ответ написан
    Комментировать
    Комментировать

  • Как получить вложенный HTML элемент с помощью JS?

    profesor08
    @profesor08 Куратор тега JavaScript
    parentNode.children[2]; // обведенный элемент
    Ответ написан
    Комментировать
    Комментировать

  • Как из нескольких инпутов сделать один?

    GORNOSTAY25
    @GORNOSTAY25 Автор вопроса
    html
    <input type=text data-n=1>
<input type=text data-n=2>
<input type=text data-n=3>
<input type=text data-n=4>
<input type=text data-n=5>
<input type=text data-n=6>


    JS
    const ins = document.querySelectorAll('input')

ins.forEach(i => i.addEventListener('input', onInput))

function onInput(e) {
  e.target.value = e.target.value[e.target.value.length - 1] || "";
  const n = e.target.dataset.n
  const next = document.querySelector(`input[data-n="${+n + 1}"]`)

if(e.target.value == ""){
  if(n==1){
  document.querySelector(`input[data-n=1]`).focus();
  }
  else{
  document.querySelector(`input[data-n="${+n - 1}"]`).focus();
  }
  }else{
  if (next) {
    next.focus()
  }}
  
}
    Ответ написан
    Комментировать
    Комментировать

  • Метод call объекта-функции в js как работает?

    ThunderCat
    @ThunderCat Куратор тега JavaScript
    {PHP, MySql, HTML, JS, CSS} developer
    5e7d0b745cebf502411281.jpeg
    Ответ написан
    6 комментариев
    6 комментариев

  • Существует ли Телеграм-бот для Q&A ресурсов (как этот), и как может отнестись администрация к такого рода ботам для уведомлений?

    hottabxp
    @hottabxp
    Сначала мы жили бедно, а потом нас обокрали..
    Я парсил недавно. Правда спарсил не до конца, а до примерно 600000 вопроса(правда вопросов там 435 тыс., так как остальные удалены - спам и прочие). Интересно посмотреть было на вопросы по количеству подписчиков, ответов, просмотров и д.т. Если надумаете парсить, могу дать вам около 435 тыс. html страничек(от первого вопроса до 600000). У меня они в нескольких архивах, общим объёмом около 13 - 15 ГБ(и это они у меня в zip архивах!)
    Есть идея вытащить оттуда время задания вопроса, время ответов(и даты разумеется) и провести статистику, в какой день(время) задают больше вопросов, когда больше дают ответов, и т.д.
    Я парсил примерно по одному запросу в секунду, проблем не было.
    Сортировка по подписчикам:
    5e7b7245cd379240777563.png
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сверстать эти пункты что бы не выбивались из потока?

    Seasle
    @Seasle Куратор тега CSS
    text-orientation
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать скролл фоновой картинки внутри блока?

  • Есть ли сайты, на которых собраны множество "рецептов" по html/css?

    Eugevin
    @Eugevin
    22 года, frontend как смысл жизни
    Оу, май, парень. В этом плане лучше всех CSS-Tricks! И это на самом деле лучший ресурс: трюки, фишки, обучение и гайды с подробным описанием всех новейших технологий в области HTML/CSS (Flex, Grid, красивые менюшки и так далее)
    Ответ написан
    Комментировать
    Комментировать