uz
Feedback

Firibgarlarga uchmang! Telemetrio bunday kanallarni topadi va belgilaydi 👉 Belgini ko‘rmoqchi bo‘lsangiz, obuna bo‘ling

Frontend | Вопросы собесов

Frontend | Вопросы собесов

Kanalga Telegram’da o‘tish

Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @sendme_ads

Ko'proq ko'rsatish

📈 Telegram kanali Frontend | Вопросы собесов analitikasi

Frontend | Вопросы собесов (@easy_javascript_ru) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 17 320 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 7 477-o'rinni va Rossiya mintaqasida 37 825-o'rinni egallagan.

📊 Auditoriya ko‘rsatkichlari va dinamika

невідомо sanasidan buyon loyiha tez o‘sib, 17 320 obunachiga ega bo‘ldi.

06 Noyabr, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -291 ga, so‘nggi 24 soatda esa -11 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.

  • Tasdiqlash holati: Tasdiqlanmagan
  • Jalb etish (ER): Auditoriya o‘rtacha 6.55% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 4.40% ini tashkil etuvchi reaksiyalarni to‘playdi.
  • Post qamrovi: Har bir post o‘rtacha 1 135 marta ko‘riladi; birinchi sutkada odatda 763 ta ko‘rish yig‘iladi.
  • Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 4 ta reaksiya keladi.
  • Tematik yo‘nalishlar: Kontent ставь, браузер, html, border, flex kabi asosiy mavzularga jamlangan.

📝 Tavsif va kontent siyosati

Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida ta’riflaydi:
“Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @sendme_ads”

Yuqori yangilanish chastotasi (oxirgi ma’lumot 07 Noyabr, 2026 da olingan) sababli kanal doimo dolzarb va katta qamrovli bo‘lib qoladi. Analitika auditoriya kontent bilan faol hamkorlik qilishini, uni Texnologiyalar & Aralashmalar toifasidagi muhim ta’sir nuqtasiga aylantirishini ko‘rsatadi.

17 320
Obunachilar
-1124 soatlar
-857 kun
-29130 kun
Postlar arxiv
\n\n\n\n🚩Плюсы\n\n➕Реальное время\nЛонг-пулинг позволяет получать данные в реальном времени без необходимости постоянно проверять сервер с частыми запросами.\n➕Снижение нагрузки на сервер\nПо сравнению с обычным пулингом (когда клиент постоянно отправляет запросы с фиксированным интервалом), лонг-пулинг уменьшает количество HTTP-запросов, что снижает нагрузку на сервер.\n➕Простота реализации\nЛонг-пулинг легче внедрить и поддерживать в сравнении с более сложными технологиями, такими как WebSockets.\n\n🚩Минусы\n\n➖Задержка\nХотя лонг-пулинг уменьшает задержку по сравнению с обычным пулингом, он все же может иметь небольшие задержки в зависимости от времени ожидания и частоты событий.\n➖Ресурсоемкость\nДержание соединений открытыми в течение длительного времени может быть ресурсоемким для сервера, особенно при большом количестве клиентов.\n➖Неоптимальность\nЛонг-пулинг менее эффективен по сравнению с WebSockets, которые предоставляют постоянное двустороннее соединение.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2024-11-15T09:10:11Z","dateModified":"2024-11-15T09:10:11Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":5,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3716},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":15},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":31},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":5}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/825","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/825","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/825","headline":"🤔 Что такое контекст в функции? Контекст в функции — это окружение, в котором выполняется функция, определяющ…","articleBody":"🤔 Что такое контекст в функции?\n\nКонтекст в функции — это окружение, в котором выполняется функция, определяющее, на что ссылается ключевое слово this. В JavaScript, например, контекст может меняться в зависимости от того, как вызывается функция (например, напрямую, через метод объекта или с использованием call/apply). Контекст позволяет функции взаимодействовать с объектом, который вызвал её, и получать доступ к его данным.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2024-11-14T16:10:10Z","dateModified":"2024-11-14T16:10:10Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3585},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":14},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":18},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/824","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/824","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/824","headline":"🤔 Что такое websockets? Это протокол коммуникации, предоставляющий двусторонний, полнодуплексный канал связи…","articleBody":"🤔 Что такое websockets? \n\nЭто протокол коммуникации, предоставляющий двусторонний, полнодуплексный канал связи между клиентом и сервером через одно соединение TCP. Он позволяет обмениваться данными в режиме реального времени, что делает его идеальным для приложений, требующих мгновенной передачи информации, таких как чаты, игры, финансовые системы и другие.\n\n🚩Основные особенности WebSockets\n\n🟠Двусторонняя связь\nWebSockets обеспечивают полнодуплексное общение, позволяя серверу и клиенту отправлять данные друг другу в любое время.\n\n🟠Постоянное соединение\nВ отличие от HTTP, где каждое запрос-ответное взаимодействие открывает и закрывает соединение, WebSocket поддерживает постоянное соединение, что позволяет мгновенно передавать данные.\n\n🟠Меньшая задержка и накладные расходы\nWebSockets уменьшают накладные расходы на установление соединений и протоколирование запросов, что приводит к более низкой задержке и уменьшенному использованию ресурсов по сравнению с регулярными HTTP-запросами.\n\n🟠Поддержка бинарных данных\nWebSockets поддерживают передачу не только текстовых данных, но и бинарных, что расширяет возможности их применения.\n\n🚩Как работает WebSocket\n\n🟠Установление соединения\nСоединение WebSocket начинается с \"рукопожатия\" по протоколу HTTP. Клиент отправляет запрос на установление соединения с сервером, используя заголовок Upgrade, чтобы переключиться с HTTP на WebSocket.\n\n🟠Открытие соединения\nЕсли сервер принимает запрос, он отвечает с подтверждением, и соединение переключается на протокол WebSocket. С этого момента канал связи открыт и доступен для двусторонней передачи данных.\n\n🟠Обмен данными\nКлиент и сервер могут обмениваться данными в любом направлении. Сообщения отправляются в рамках установленного соединения без необходимости повторного рукопожатия.\n\n🟠Закрытие соединения\nСоединение может быть закрыто любой стороной (клиентом или сервером) в любое время. Это может быть сделано по желанию или в случае ошибки.\n\n🚩Сервер на Node.js с использованием библиотеки `ws`\n\nconst WebSocket = require('ws');\n\nconst server = new WebSocket.Server({ port: 8080 });\n\nserver.on('connection', (socket) => {\n console.log('Client connected');\n\n socket.on('message', (message) => {\n console.log(`Received: ${message}`);\n socket.send(`You said: ${message}`);\n });\n\n socket.on('close', () => {\n console.log('Client disconnected');\n });\n});\n\nconsole.log('WebSocket server is running on ws://localhost:8080');\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2024-11-14T09:10:09Z","dateModified":"2024-11-14T09:10:09Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3610},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":28},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":39},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/819","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/819","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/819","headline":"RE Design Buro – уникальные интерьеры для IT-специалистов! Более 15 лет создаем уникальные проекты международ…","articleBody":"RE Design Buro – уникальные интерьеры для IT-специалистов! \n\nБолее 15 лет создаем уникальные проекты международного уровня, которые не только отражают ваш стиль, но и удовлетворяют все ваши потребности.\n\nЧто мы предлагаем?\n\n⭐️ Полный дизайн-проект: от идеи до реализации – разработаем концепцию, подготовим детальные чертежи и подберем лучшие материалы. \n\n💡 Оперативность и комфорт: начинаем работу ещё до получения ключей, чтобы вы могли въехать в новый дом как можно скорее!\n\n❗️ Прозрачность и честность: фиксируем стоимость работ и сроки, предлагаем удобную поэтапную оплату. \n\n🔥 Специальные условия для IT-специалистов.\n\n👉 Выполненные работы\n👉 Подписывайтесь на канал \n👉 Бесплатная консультация дизайнера","datePublished":"2024-11-13T17:10:09Z","dateModified":"2024-11-15T17:10:16Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2574},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/818","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/818","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/818","headline":"🤔 Что такое прототипы? Прототипы — это механизмы наследования, позволяющие объектам в JavaScript делиться мет…","articleBody":"🤔 Что такое прототипы?\n\nПрототипы — это механизмы наследования, позволяющие объектам в JavaScript делиться методами и свойствами. Каждый объект имеет скрытую ссылку на прототип, откуда он может наследовать функциональность. Прототипное наследование экономит память и упрощает структуру объектов, делая их лёгкими и взаимосвязанными.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2024-11-13T16:10:10Z","dateModified":"2024-11-13T16:10:10Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3682},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":19},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":24}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/817","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/817","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/817","headline":"🤔 Что такое mutations и actions в vuex? Который является официальной библиотекой для управления состоянием в…","articleBody":"🤔 Что такое mutations и actions в vuex? \n\nКоторый является официальной библиотекой для управления состоянием в приложениях Vue.js, mutations (мутации) и actions (действия) играют ключевые роли в управлении состоянием. Они помогают обеспечивать предсказуемость изменения состояния и организовывают логику приложения.\n\n🚩Mutations (Мутации)\n\nЭто единственный способ изменить состояние в Vuex. Каждая мутация имеет тип и обработчик. Обработчик мутации получает состояние как первый аргумент, и дополнительный аргумент в качестве полезной нагрузки (payload), который можно использовать для передачи данных в мутацию. Мутации должны быть синхронными, чтобы изменения состояния можно было легко отслеживать. Это помогает делать отладку и логгирование более предсказуемыми.\nimport Vue from 'vue';\nimport Vuex from 'vuex';\n\nVue.use(Vuex);\n\nexport default new Vuex.Store({\n state: {\n count: 0\n },\n mutations: {\n increment(state) {\n state.count++;\n },\n incrementBy(state, payload) {\n state.count += payload.amount;\n }\n }\n});\n\n🚩Actions (Действия)\n\nДействия используются для выполнения асинхронных операций или сложной бизнес-логики перед вызовом мутаций. Действия могут содержать произвольную асинхронную логику, такие как API-запросы, и затем вызывать мутации для изменения состояния. Действия вызываются с помощью метода dispatch и могут возвращать промисы, что полезно для обработки цепочек асинхронных операций.\nimport Vue from 'vue';\nimport Vuex from 'vuex';\n\nVue.use(Vuex);\n\nexport default new Vuex.Store({\n state: {\n count: 0\n },\n mutations: {\n increment(state) {\n state.count++;\n }\n },\n actions: {\n incrementAsync({ commit }) {\n setTimeout(() => {\n commit('increment');\n }, 1000);\n },\n incrementByAsync({ commit }, payload) {\n setTimeout(() => {\n commit('incrementBy', payload);\n }, 1000);\n }\n }\n});\n\n🚩Взаимодействие между Mutations и Actions:\n\n🟠Mutations\nСинхронно изменяют состояние.\n🟠Actions\nМогут быть асинхронными и обычно вызывают мутации для изменения состояния.\n\nПример взаимодействия\n// store.js\nimport Vue from 'vue';\nimport Vuex from 'vuex';\n\nVue.use(Vuex);\n\nexport default new Vuex.Store({\n state: {\n message: ''\n },\n mutations: {\n setMessage(state, message) {\n state.message = message;\n }\n },\n actions: {\n fetchMessage({ commit }) {\n setTimeout(() => {\n const message = 'Hello from async action!';\n commit('setMessage', message);\n }, 2000);\n }\n }\n});\n\nКомпонент\n\n\n\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2024-11-13T09:10:14Z","dateModified":"2024-11-13T09:10:14Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3557},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":18}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/816","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/816","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/816","headline":"Бесплатный практический вебинар: Профессия «Frontend-разработчик». ⏰ Когда: 19 ноября в 19:00 по мск. Погрузи…","articleBody":"Бесплатный практический вебинар: Профессия «Frontend-разработчик».\n\n⏰ Когда: 19 ноября в 19:00 по мск.\n\nПогрузитесь в решение реальной задачи и напишите мини-игру, которая работает прямо в браузере 🎮\n\nРасскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе.\n\nКакие JS фреймворки учить: Vue, React, а может, Angular?\n\nЗадайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии.\n\n🎁 Всем, кто зарегистрировался - Гайд «Как заговорить на сленге IT-специалистов», а каждому участнику -  Карта компетенций начинающего Frontend-разработчика.","datePublished":"2024-11-13T07:00:19Z","dateModified":"2024-11-15T07:00:17Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2252},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/815","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/815","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/815","headline":"🤔 Какие методы массивов знаешь В JavaScript массивы поддерживают методы `push()` и `pop()` для добавления и у…","articleBody":"🤔 Какие методы массивов знаешь\n\nВ JavaScript массивы поддерживают методы `push()` и `pop()` для добавления и удаления элементов с конца массива. Методы `shift()` и `unshift()` используются для работы с началом массива, а `map()`, `filter()`, и `reduce()` помогают обрабатывать и преобразовывать массивы функционально. Существуют также `slice()`, `splice()`, и `concat()` для копирования, модификации и объединения массивов.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2024-11-12T16:10:12Z","dateModified":"2024-11-12T16:10:12Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":10,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3711},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":28},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":30},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":10}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/814","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/814","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/814","headline":"Курс графического дизайна с нуля. Бесплатное обучение! Выбери свое направление в дизайне: графический дизайн,…","articleBody":"Курс графического дизайна с нуля. Бесплатное обучение!\n\nВыбери свое направление в дизайне: графический дизайн, веб-дизайн, UX/UI-дизайн.\n\nИ изучи бесплатно основы дизайна с личным наставником! 3 работы в портфолио. \n\nУзнать больше\n\n#реклама 16+\nyudaevschool24.online\nО рекламодателе","datePublished":"2024-11-12T15:15:19Z","dateModified":"2024-11-14T13:25:59Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2431},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/813","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/813","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/813","headline":"🤔 Как обрабатываются значения формы в vuex? Для обработки значений формы в Vuex (состоянии управления в прило…","articleBody":"🤔 Как обрабатываются значения формы в vuex? \n\nДля обработки значений формы в Vuex (состоянии управления в приложениях Vue) нужно выполнить следующие шаги: \n\n1⃣Создание формы в компоненте Vue\nСоздайте компонент с формой, который будет использоваться для ввода данных.\n\n\n\n\n2⃣Создание состояний, мутаций и действий в Vuex\nСоздайте состояние для хранения данных формы, мутации для обновления состояния и действия для обработки отправки формы.\nimport Vue from 'vue';\nimport Vuex from 'vuex';\n\nVue.use(Vuex);\n\nexport default new Vuex.Store({\n state: {\n formData: {\n name: '',\n email: ''\n }\n },\n mutations: {\n SET_FORM_DATA(state, payload) {\n state.formData = payload;\n }\n },\n actions: {\n submitForm({ commit }, formData) {\n // Здесь вы можете выполнить любые асинхронные операции, такие как отправка данных на сервер\n // Например, с использованием axios:\n // axios.post('/api/form', formData).then(response => {\n // console.log(response.data);\n // });\n\n commit('SET_FORM_DATA', formData);\n }\n }\n});\n\n3⃣Связать значения формы с состоянием Vuex\nВы можете использовать mapState и mapMutations для связывания состояния и мутаций Vuex с вашим компонентом.\n\n\n\n\n4⃣Отправить данные из формы в Vuex и обновить состояние\nКогда пользователь отправляет форму, данные формы отправляются в Vuex с помощью действия submitForm, которое обновляет состояние через мутацию SET_FORM_DATA.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2024-11-12T09:10:11Z","dateModified":"2024-11-12T09:10:11Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3499},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/812","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/812","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/812","headline":"Твое резюме на HeadHunter — ОК, если ты видишь это. HeadHunter сравнивает ключевые навыки в твоем резюме и в…","articleBody":"Твое резюме на HeadHunter — ОК, если ты видишь это.\n\nHeadHunter сравнивает ключевые навыки в твоем резюме и в вакансии и в момент отклика отображает, насколько % ты соответствуешь требованиям.\n\nСпециальный бейджик «Подходит по навыкам на 100%» отображается, если соответствие составляет более 60%.\n\nЕсли при просмотре вакансий ты видишь такой бейджик, это значит, что список навыков в твоем резюме качественно составлен.\n\nЭто важный параметр, так как рекрутерам чаще показываются резюме с лучшим соответствием.\n\nО том, как правильно указывать ключевые навыки и оптимизировать свое резюме я уже рассказывал в этом видео","datePublished":"2024-11-12T07:35:20Z","dateModified":"2024-11-12T07:35:20Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3196},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":31},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}],"sharedContent":{"@type":"SocialMediaPosting","datePublished":"2024-11-12T07:35:03Z"}}}]}
🤔 Что такое DOM-дерево? DOM (Document Object Model) — это структура, представляющая HTML-документ в виде дерева объектов. Каждый элемент, атрибут или текстовый узел страницы представлен как узел дерева, что позволяет программам (например, через JavaScript) взаимодействовать с документом, изменять его содержимое и структуру. DOM-дерево обеспечивает удобный способ управления элементами веб-страницы динамически. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Помощь в трудоустройстве в IT-сфере! В России из-за дефицита айтишников запустили бесплатную программу по обучению IT-специал
+9
Помощь в трудоустройстве в IT-сфере! В России из-за дефицита айтишников запустили бесплатную программу по обучению IT-специалистов. Теперь любой желающий может попробовать себя в IT с полного нуля и начать обучение бесплатно! Узнайте про дальнейшее трудоустройство в ведущие IT-компании для восполнения кадрового дефицита. Для этого нужно: - Перейти по ссылке - Заполнить анкету и ответить на вопросы (занимает менее 3 минут) - На основании ваших ответов вы сразу узнаете, подходит ли вам сфера IT и сможете ли вы в ней работать Перейти на сайт #реклама 16+ urban-university.ru О рекламодателе

🤔 Что такое синтаксическая сложность? Это мера, которая оценивает сложность структуры и конструкции кода. Она часто используется для оценки понятности, поддерживаемости и вероятности ошибок в программном коде. Одним из наиболее известных методов измерения синтаксической сложности является цикломатическая сложность, предложенная Томасом Маккейбом в 1976 году. 🚩Цикломатическая сложность Это количественная мера количества независимых путей через программу. Она используется для оценки сложности программного кода, измеряя количество логических ветвлений. Чем выше цикломатическая сложность, тем больше возможных путей исполнения и, следовательно, тем сложнее понять и протестировать программу. 🚩Как рассчитывается цикломатическая сложность Цикломатическая сложность может быть рассчитана с помощью следующей формулы:
V(G) = E - N + 2P
🚩Пример расчета цикломатической сложности
def example(a, b):
    if a > 0:
        if b > 0:
            return a + b
        else:
            return a - b
    else:
        return b
Цикломатическая сложность V(G) будет
V(G) = E - N + 2P
V(G) = 6 - 5 + 2*1
V(G) = 3
🚩Почему синтаксическая сложность важна 🟠Понимаемость кода Чем выше сложность, тем труднее понять код. Программы с высокой сложностью требуют больше времени для анализа и понимания. 🟠Поддерживаемость Код с высокой сложностью сложнее поддерживать и изменять. Это может привести к большему числу ошибок при внесении изменений. 🟠Тестируемость Более сложный код требует большего количества тестов для покрытия всех возможных путей исполнения. Это увеличивает время и усилия, необходимые для тестирования. 🟠Надежность Программы с низкой сложностью, как правило, более надежны и менее подвержены ошибкам, так как легче понимать и тестировать все возможные сценарии. 🚩Методы уменьшения синтаксической сложности 🟠Рефакторинг Разделение сложных функций на более простые и малые функции. Использование более простых и понятных конструкций. 🟠Удаление дублированного кода Вынос повторяющегося кода в отдельные функции или методы. 🟠Использование комментариев и документации Добавление пояснительных комментариев и документации для сложных участков кода. 🟠Применение паттернов проектирования: Использование проверенных паттернов проектирования для упрощения и структурирования кода. Ставь 👍 и забирай 📚 Базу знаний

🤔 Как использовать useEffect? useEffect — это хук в React, который позволяет выполнять побочные эффекты в функциональных компонентах, таких как запросы к API или подписки. Он принимает функцию, которая выполняется после рендеринга, и массив зависимостей, определяющий, когда эффект должен обновляться. Если массив зависимостей пуст, эффект выполнится только один раз при монтировании компонента. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Помощь в трудоустройстве в IT-сфере! В России из-за дефицита айтишников запустили бесплатную программу по обучению IT-специал
+9
Помощь в трудоустройстве в IT-сфере! В России из-за дефицита айтишников запустили бесплатную программу по обучению IT-специалистов. Теперь любой желающий может попробовать себя в IT с полного нуля и начать обучение бесплатно! Узнайте про дальнейшее трудоустройство в ведущие IT-компании для восполнения кадрового дефицита. Для этого нужно: - Перейти по ссылке - Заполнить анкету и ответить на вопросы (занимает менее 3 минут) - На основании ваших ответов вы сразу узнаете, подходит ли вам сфера IT и сможете ли вы в ней работать Перейти на сайт #реклама 16+ urban-university.ru О рекламодателе

🤔 Почему нельзя отправлять в get запросах чувствительную информацию? 🟠URL видны в истории браузера GET-запросы отправляют данные через URL, который сохраняется в истории браузера. Это означает, что любой, кто имеет доступ к истории браузера, может увидеть эти данные. 🟠Логи сервера Многие веб-серверы и прокси-серверы автоматически записывают URL всех запросов в свои логи. Чувствительная информация в URL будет сохранена в этих логах и может быть доступна администраторам серверов или в случае компрометации системы. 🟠Кэширование Браузеры, прокси-серверы и промежуточные серверы могут кэшировать URL-адреса GET-запросов. Это означает, что чувствительная информация может быть сохранена в кэшах и доступна при последующих обращениях. 🟠Ограничения длины URL Большинство браузеров и серверов имеют ограничения на длину URL (обычно около 2000 символов). Если данные слишком длинные, они могут быть обрезаны, что приведет к потере информации или ошибкам при обработке запроса. 🟠Видимость в реферере Когда пользователь переходит по ссылке с одной страницы на другую, URL-адрес исходной страницы часто передается как заголовок Referer в HTTP-запросе. Это означает, что чувствительная информация в URL может быть передана сторонним сайтам. 🟠HTTP-заголовки и GET-запросы Данные в GET-запросах передаются через URL, в то время как данные в POST-запросах передаются в теле запроса. URL более подвержены утечке, так как они часто видны в различных местах (например, в журналах серверов, истории браузера и т.д.). 🚩Использование POST-запросов в качестве альтернативы Для отправки чувствительной информации лучше использовать POST-запросы, так как данные передаются в теле запроса и не сохраняются в URL.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Secure Form</title>
</head>
<body>
  <form action="/submit" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    <button type="submit">Submit</button>
  </form>
</body>
</html>
Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое семантика? Семантика — это значение или смысл, который несет элемент или структура кода, указывая на её предназначение. В HTML семантические теги (например, <header>, <footer>, <article>) улучшают читаемость кода и помогают поисковым системам и браузерам лучше интерпретировать его. Семантика кода улучшает доступность и упрощает его поддержку. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как происходит аутентификация? Это процесс проверки подлинности пользователя, который пытается получить доступ к системе или ресурсу. Веб-приложения и сервисы обычно используют несколько методов аутентификации для обеспечения безопасности и защиты данных. 🚩Методы 🟠Аутентификация по паролю Пользователь вводит имя пользователя и пароль, которые проверяются на сервере. Веб-сайты с формой входа, требующей логин и пароль. 🟠Аутентификация по токенам После успешного входа пользователь получает токен (например, JWT), который используется для дальнейших запросов. API, использующие токены для проверки подлинности запросов. 🟠OAuth Протокол авторизации, позволяющий сторонним приложениям получать ограниченный доступ к ресурсам пользователя без передачи пароля. Вход через Google, Facebook или другие социальные сети. 🟠Двухфакторная аутентификация (2FA) Требует два различных типа проверки (например, пароль и одноразовый код). Вход с использованием пароля и SMS-кода. 🟠Биометрическая аутентификация Использует биометрические данные (например, отпечатки пальцев или распознавание лиц) для проверки подлинности. Вход через Touch ID или Face ID на мобильных устройствах. 🚩Сервер на Node.js с использованием Express и JWT 1⃣Установка зависимостей
npm install express jsonwebtoken bcryptjs body-parser   
2⃣Создание сервера
const express = require('express');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const bodyParser = require('body-parser');

const app = express();
const PORT = 3000;
const SECRET_KEY = 'your_secret_key';

let users = []; // Для простоты используем массив в памяти

app.use(bodyParser.json());

// Регистрация пользователя
app.post('/register', async (req, res) => {
  const { username, password } = req.body;
  const hashedPassword = await bcrypt.hash(password, 8);
  users.push({ username, password: hashedPassword });
  res.status(201).send('User registered');
});

// Вход пользователя
app.post('/login', async (req, res) => {
  const { username, password } = req.body;
  const user = users.find(u => u.username === username);
  if (!user) {
   return res.status(404).send('User not found');
}

  const isPasswordValid = await bcrypt.compare(password, user.password);
  if (!isPasswordValid) {
  return res.status(401).send('Invalid password');
}

  const token = jwt.sign({ username: user.username }, SECRET_KEY, { expiresIn: '1h' });
  res.json({ token });
});

// Защищенный маршрут
app.get('/protected', (req, res) => {
  const token = req.headers['authorization'];
  if (!token) {
  return res.status(401).send('Access denied');
}

try {
  const decoded = jwt.verify(token, SECRET_KEY);
  res.json({ message: 'Protected content', user: decoded });
} catch (err) {
  res.status(401).send('Invalid token');
}
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});
Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое state manager и с какими приходилось работать? State manager — это инструмент или библиотека для управления состоянием приложения, особенно в сложных проектах с большим количеством взаимозависимых данных. Популярные state manager’ы включают Redux, MobX и Zustand для React-приложений, обеспечивающие централизованное хранение и управление состоянием. Они помогают структурировать данные, отслеживать их изменения и синхронизировать их между компонентами. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое лонг пулинг? Это техника, используемая для реализации связи между клиентом и сервером в веб-приложениях, чтобы поддерживать обновление данных в реальном времени. В отличие от обычных HTTP-запросов, лонг-пулинг позволяет клиенту ждать ответа от сервера дольше, что помогает уменьшить задержку при получении новых данных. 🚩Как работает 1⃣Запрос от клиента Клиент отправляет HTTP-запрос к серверу. 2⃣Ожидание на сервере Сервер не отвечает сразу, а задерживает ответ до тех пор, пока не появятся новые данные или не истечет таймаут. 3⃣Ответ сервера Когда данные становятся доступными или истекает таймаут ожидания, сервер отправляет ответ клиенту. 4⃣Обработка на клиенте Клиент обрабатывает полученные данные и немедленно отправляет новый запрос к серверу для получения следующих обновлений. Сервер на Node.js с использованием express
const express = require('express');
const app = express();

let messages = [];
let clients = [];

// Endpoint для отправки сообщений
app.post('/messages', (req, res) => {
  const message = req.body.message;
  messages.push(message);

  // Уведомляем всех клиентов
  clients.forEach(client => client.res.json({ message }));
  clients = [];
  res.status(200).send('Message sent');
});

// Endpoint для получения сообщений (лонг-пулинг)
app.get('/messages', (req, res) => {
  if (messages.length > 0) {
    res.json({ message: messages.pop() });
  } else {
    clients.push({ req, res });
  }
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});
Клиентский код на JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Long Polling Example</title>
</head>
<body>
  <h1>Long Polling Example</h1>
  <div id="messages"></div>
  <script>
    function pollMessages() {
      fetch('/messages')
        .then(response => response.json())
        .then(data => {
          const messageDiv = document.createElement('div');
          messageDiv.textContent = `New message: ${data.message}`;
          document.getElementById('messages').appendChild(messageDiv);
          pollMessages(); // Отправляем новый запрос после получения сообщения
        })
        .catch(error => {
          console.error('Error:', error);
          setTimeout(pollMessages, 5000); // Повторный запрос через 5 секунд при ошибке
        });
    }

    // Начинаем лонг-пулинг
    pollMessages();
  </script>
</body>
</html>
🚩Плюсы ➕Реальное время Лонг-пулинг позволяет получать данные в реальном времени без необходимости постоянно проверять сервер с частыми запросами. ➕Снижение нагрузки на сервер По сравнению с обычным пулингом (когда клиент постоянно отправляет запросы с фиксированным интервалом), лонг-пулинг уменьшает количество HTTP-запросов, что снижает нагрузку на сервер. ➕Простота реализации Лонг-пулинг легче внедрить и поддерживать в сравнении с более сложными технологиями, такими как WebSockets. 🚩Минусы ➖Задержка Хотя лонг-пулинг уменьшает задержку по сравнению с обычным пулингом, он все же может иметь небольшие задержки в зависимости от времени ожидания и частоты событий. ➖Ресурсоемкость Держание соединений открытыми в течение длительного времени может быть ресурсоемким для сервера, особенно при большом количестве клиентов. ➖Неоптимальность Лонг-пулинг менее эффективен по сравнению с WebSockets, которые предоставляют постоянное двустороннее соединение. Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое контекст в функции? Контекст в функции — это окружение, в котором выполняется функция, определяющее, на что ссылается ключевое слово this. В JavaScript, например, контекст может меняться в зависимости от того, как вызывается функция (например, напрямую, через метод объекта или с использованием call/apply). Контекст позволяет функции взаимодействовать с объектом, который вызвал её, и получать доступ к его данным. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое websockets? Это протокол коммуникации, предоставляющий двусторонний, полнодуплексный канал связи между клиентом и сервером через одно соединение TCP. Он позволяет обмениваться данными в режиме реального времени, что делает его идеальным для приложений, требующих мгновенной передачи информации, таких как чаты, игры, финансовые системы и другие. 🚩Основные особенности WebSockets 🟠Двусторонняя связь WebSockets обеспечивают полнодуплексное общение, позволяя серверу и клиенту отправлять данные друг другу в любое время. 🟠Постоянное соединение В отличие от HTTP, где каждое запрос-ответное взаимодействие открывает и закрывает соединение, WebSocket поддерживает постоянное соединение, что позволяет мгновенно передавать данные. 🟠Меньшая задержка и накладные расходы WebSockets уменьшают накладные расходы на установление соединений и протоколирование запросов, что приводит к более низкой задержке и уменьшенному использованию ресурсов по сравнению с регулярными HTTP-запросами. 🟠Поддержка бинарных данных WebSockets поддерживают передачу не только текстовых данных, но и бинарных, что расширяет возможности их применения. 🚩Как работает WebSocket 🟠Установление соединения Соединение WebSocket начинается с "рукопожатия" по протоколу HTTP. Клиент отправляет запрос на установление соединения с сервером, используя заголовок Upgrade, чтобы переключиться с HTTP на WebSocket. 🟠Открытие соединения Если сервер принимает запрос, он отвечает с подтверждением, и соединение переключается на протокол WebSocket. С этого момента канал связи открыт и доступен для двусторонней передачи данных. 🟠Обмен данными Клиент и сервер могут обмениваться данными в любом направлении. Сообщения отправляются в рамках установленного соединения без необходимости повторного рукопожатия. 🟠Закрытие соединения Соединение может быть закрыто любой стороной (клиентом или сервером) в любое время. Это может быть сделано по желанию или в случае ошибки. 🚩Сервер на Node.js с использованием библиотеки `ws`
const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (socket) => {
  console.log('Client connected');

  socket.on('message', (message) => {
    console.log(`Received: ${message}`);
    socket.send(`You said: ${message}`);
  });

  socket.on('close', () => {
    console.log('Client disconnected');
  });
});

console.log('WebSocket server is running on ws://localhost:8080');
Ставь 👍 и забирай 📚 Базу знаний

RE Design Buro – уникальные интерьеры для IT-специалистов! Более 15 лет создаем уникальные проекты международного уровня, кот
+4
RE Design Buro – уникальные интерьеры для IT-специалистов! Более 15 лет создаем уникальные проекты международного уровня, которые не только отражают ваш стиль, но и удовлетворяют все ваши потребности. Что мы предлагаем? ⭐️ Полный дизайн-проект: от идеи до реализации – разработаем концепцию, подготовим детальные чертежи и подберем лучшие материалы. 💡 Оперативность и комфорт: начинаем работу ещё до получения ключей, чтобы вы могли въехать в новый дом как можно скорее! ❗️ Прозрачность и честность: фиксируем стоимость работ и сроки, предлагаем удобную поэтапную оплату. 🔥 Специальные условия для IT-специалистов. 👉 Выполненные работы 👉 Подписывайтесь на канал 👉 Бесплатная консультация дизайнера

🤔 Что такое прототипы? Прототипы — это механизмы наследования, позволяющие объектам в JavaScript делиться методами и свойствами. Каждый объект имеет скрытую ссылку на прототип, откуда он может наследовать функциональность. Прототипное наследование экономит память и упрощает структуру объектов, делая их лёгкими и взаимосвязанными. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое mutations и actions в vuex? Который является официальной библиотекой для управления состоянием в приложениях Vue.js, mutations (мутации) и actions (действия) играют ключевые роли в управлении состоянием. Они помогают обеспечивать предсказуемость изменения состояния и организовывают логику приложения. 🚩Mutations (Мутации) Это единственный способ изменить состояние в Vuex. Каждая мутация имеет тип и обработчик. Обработчик мутации получает состояние как первый аргумент, и дополнительный аргумент в качестве полезной нагрузки (payload), который можно использовать для передачи данных в мутацию. Мутации должны быть синхронными, чтобы изменения состояния можно было легко отслеживать. Это помогает делать отладку и логгирование более предсказуемыми.
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    incrementBy(state, payload) {
      state.count += payload.amount;
    }
  }
});
🚩Actions (Действия) Действия используются для выполнения асинхронных операций или сложной бизнес-логики перед вызовом мутаций. Действия могут содержать произвольную асинхронную логику, такие как API-запросы, и затем вызывать мутации для изменения состояния. Действия вызываются с помощью метода dispatch и могут возвращать промисы, что полезно для обработки цепочек асинхронных операций.
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    },
    incrementByAsync({ commit }, payload) {
      setTimeout(() => {
        commit('incrementBy', payload);
      }, 1000);
    }
  }
});
🚩Взаимодействие между Mutations и Actions: 🟠Mutations Синхронно изменяют состояние. 🟠Actions Могут быть асинхронными и обычно вызывают мутации для изменения состояния. Пример взаимодействия
// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, message) {
      state.message = message;
    }
  },
  actions: {
    fetchMessage({ commit }) {
      setTimeout(() => {
        const message = 'Hello from async action!';
        commit('setMessage', message);
      }, 2000);
    }
  }
});
Компонент
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="loadMessage">Load Message</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapActions(['fetchMessage']),
    loadMessage() {
      this.fetchMessage();
    }
  }
};
</script>
Ставь 👍 и забирай 📚 Базу знаний

Бесплатный практический вебинар: Профессия «Frontend-разработчик». ⏰ Когда: 19 ноября в 19:00 по мск. Погрузитесь в решение р
Бесплатный практический вебинар: Профессия «Frontend-разработчик». ⏰ Когда: 19 ноября в 19:00 по мск. Погрузитесь в решение реальной задачи и напишите мини-игру, которая работает прямо в браузере 🎮 Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular? Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии. 🎁 Всем, кто зарегистрировался - Гайд «Как заговорить на сленге IT-специалистов», а каждому участнику -  Карта компетенций начинающего Frontend-разработчика.

🤔 Какие методы массивов знаешь В JavaScript массивы поддерживают методы `push()` и `pop()` для добавления и удаления элементов с конца массива. Методы `shift()` и `unshift()` используются для работы с началом массива, а `map()`, `filter()`, и `reduce()` помогают обрабатывать и преобразовывать массивы функционально. Существуют также `slice()`, `splice()`, и `concat()` для копирования, модификации и объединения массивов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Курс графического дизайна с нуля. Бесплатное обучение! Выбери свое направление в дизайне: графический дизайн, веб-дизайн, UX/UI-дизайн. И изучи бесплатно основы дизайна с личным наставником! 3 работы в портфолио. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

🤔 Как обрабатываются значения формы в vuex? Для обработки значений формы в Vuex (состоянии управления в приложениях Vue) нужно выполнить следующие шаги: 1⃣Создание формы в компоненте Vue Создайте компонент с формой, который будет использоваться для ввода данных.
<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <label for="name">Имя:</label>
      <input type="text" id="name" v-model="name" />

      <label for="email">Email:</label>
      <input type="email" id="email" v-model="email" />

      <button type="submit">Отправить</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: ''
    };
  },
  methods: {
    handleSubmit() {
      this.$store.dispatch('submitForm', {
        name: this.name,
        email: this.email
      });
    }
  }
};
</script>
2⃣Создание состояний, мутаций и действий в Vuex Создайте состояние для хранения данных формы, мутации для обновления состояния и действия для обработки отправки формы.
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    formData: {
      name: '',
      email: ''
    }
  },
  mutations: {
    SET_FORM_DATA(state, payload) {
      state.formData = payload;
    }
  },
  actions: {
    submitForm({ commit }, formData) {
      // Здесь вы можете выполнить любые асинхронные операции, такие как отправка данных на сервер
      // Например, с использованием axios:
      // axios.post('/api/form', formData).then(response => {
      //   console.log(response.data);
      // });

      commit('SET_FORM_DATA', formData);
    }
  }
});
3⃣Связать значения формы с состоянием Vuex Вы можете использовать mapState и mapMutations для связывания состояния и мутаций Vuex с вашим компонентом.
<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <label for="name">Имя:</label>
      <input type="text" id="name" v-model="localName" />

      <label for="email">Email:</label>
      <input type="email" id="email" v-model="localEmail" />

      <button type="submit">Отправить</button>
    </form>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState({
      name: state => state.formData.name,
      email: state => state.formData.email
    }),
    localName: {
      get() {
        return this.name;
      },
      set(value) {
        this.updateForm({ name: value, email: this.email });
      }
    },
    localEmail: {
      get() {
        return this.email;
      },
      set(value) {
        this.updateForm({ name: this.name, email: value });
      }
    }
  },
  methods: {
    ...mapActions(['submitForm']),
    handleSubmit() {
      this.submitForm({
        name: this.localName,
        email: this.localEmail
      });
    },
    updateForm(payload) {
      this.$store.commit('SET_FORM_DATA', payload);
    }
  }
};
</script>
4⃣Отправить данные из формы в Vuex и обновить состояние Когда пользователь отправляет форму, данные формы отправляются в Vuex с помощью действия submitForm, которое обновляет состояние через мутацию SET_FORM_DATA. Ставь 👍 и забирай 📚 Базу знаний

Repost from Идущий к IT
Твое резюме на HeadHunter — ОК, если ты видишь это. HeadHunter сравнивает ключевые навыки в твоем резюме и в вакансии и в мом
Твое резюме на HeadHunter — ОК, если ты видишь это. HeadHunter сравнивает ключевые навыки в твоем резюме и в вакансии и в момент отклика отображает, насколько % ты соответствуешь требованиям. Специальный бейджик «Подходит по навыкам на 100%» отображается, если соответствие составляет более 60%. Если при просмотре вакансий ты видишь такой бейджик, это значит, что список навыков в твоем резюме качественно составлен. Это важный параметр, так как рекрутерам чаще показываются резюме с лучшим соответствием. О том, как правильно указывать ключевые навыки и оптимизировать свое резюме я уже рассказывал в этом видео