Автор оригинала: FreeCodeCamp Community Member.
Мария Дминского
Добро пожаловать в часть II Узнайте Node.js с бригадирными путаницами , серия, созданная, чтобы помочь вам легко понять Node.js ❤
В Часть I Brigadier Fluffykins и I ввел Node.js, что вы можете построить с ним, async/Sync концепции. Я прошел вас через установку, и вместе мы создали свой первый сервер.
Это было великолепно:
Сегодняшний урок будет покрывать:
- Почему Node.js – это язык, управляемый событием, и как это важно для асинхронного поведения
- Как события в доме похожи на события в Node.js
- Как требуют процессы цикла событий
- Создание пользовательских событий с использованием Eventemitter.
Программирование, ориентированное на событие потрясающе
Поскольку Node.js – однопоточная, чтобы его создать параллелизм и не быть болезненно медленным – поскольку модель традиционного клиентского сервера пояснила в Часть I – Он использует события для прослушивания запросов.
Это отличается от скажем, Apache, веб-сервера, который использует многопоточный http. Для каждого запроса Apache получает, это создает новую тему для обработки его. Это означает, что да, пока вы можете иметь более одного процесса, работающего одновременно через потоки, падение – это то, что результаты из всех запросов должны вернуться перед подачей страницы.
С другой стороны, архитектура, управляемая событием Node.j позволяет обработать несколько запросов на один поток. Например, однажды A Запрос событие Срабатывает, обратные вызовы и обещает процесс этих запросов асинхронно.
Это означает, что если у вас есть несколько запросов, входящих и запрос A, все еще делает свою вещь, запрос B начнет получать результаты – результаты – результат, являющийся либо запрос B, отвечает клиенту перед запросом A или в то же время, как запрос A.
Поскольку все обрабатывается быстрее, у клиента есть лучший пользовательский опыт. Давайте обсудим это более подробно дополнительно в уроке.
Есть несколько падений в модель параллелизма Node.js, но мы будем охватывать это в следующие несколько уроков.
События в доме похожи на события в Node.js
Подумайте о событиях таким образом: так же, как события взаимодействуют с объектами DOM, многие объекты в Node.js Emit Events.
Если вы сделали любой тип манипулирования DOM с JavaScript, то вы понимаете, что DOM может иметь слушателей событий, такие как Нажмите , dblclick , Отправить, keydown, keyup и так далее. После срабатывания событие обращается с обратным вызовом.
Например, когда вы настраиваете Нажмите Событие, вы можете получить обратный вызов: «Когда что-то нажат, поверните третий диван синий!»
Вот кодированный пример.
В вашем index.html файл:
В вашем main.js Файл :
И, если вы хотите проверить это в своем браузере, вот некоторые CSS. Это должно идти в still.css :
Когда клиент нажимает кнопку, наше Нажмите Событие срабатывает, и наш обратный вызов делает что-то до DOM. В этом случае он превращает третий дива синий и меняет текст внутри кнопки.
Как Запрос событие В Node.js, когда клиент нажимает кнопку, это так, как будто они отправляют запрос в файл main.js, где Нажмите Событие слушает – так же, как Запросить событие будет слушать для входящих запросов.
Тогда, как ответ событие будет отвечать на клиента с какой-то информацией внутри обратного вызова, обратный вызов DOM Нажмите Событие отвечает, изменив цвет фона третьего div. Это также изменяет текст в кнопке внутри файла HTML.
Основное различие между событиями в Node.js и событиях в DOM – это то, что события DOM в основном прикреплены к объекту DOM – на стороне клиента – в то время как события для Node.js больше ориентированы на взаимосвязь между клиентом и сервером Отказ
Node.js излучает события с объектов – например, объект веб-сервера ( http.createserver). Счастливо для вас, вы на самом деле уже использовали события на Часть I На шаге # 1.5!
Во время этого шага вы сохранили объект веб-сервера в своей собственной переменной и прослушивании для входящих запросов через Запросить событие прикреплен к http.createserver объект в первом параметре.
Под этим объектом является Eventemitter Конструктор Что мы узнаем о очень скоро. На данный момент просмотрите код, который мы создали в Часть I И посмотрите, есть ли у вас лучший взгляд о том, что происходит после пояснения нашего события.
Здесь снова для справки:
Контур событий
Итак, у вас есть базовое понимание событий и о том, как они относятся к Node.js, но как на самом деле работает Node.js под капотом?
Первое, что node.js делает, когда он читает ваш код, подписываешь события, которые вы использовали, например Запрос , слушать , Соединение или Закрыть. Как только это будет сделано, он входит в Структура событий и слушает эти события непрерывно внутри одного потока.
Например, на сервере, который мы ранее создали выше, это только слушает только Запросить событие И, таким образом, контур событий думает:
«Есть ли вошли какие-либо запросы?»
“Как насчет сейчас?”
“…. “
“Сейчас?”
«Сейчас прямо?»
Никаких забот, единственная резьбовая петля Node.js не является Жюлем Уинфилд. На самом деле это просто терпеливо ждать и слушать события, которые он ранее подписался на заднем плане.
Если запрос приходит, это триггеры Запрос событие и управляет обратным вызовом, мы написали – в нашем случае мини HTML внутри конец Метод в нашем предыдущем примере сервера. Также имейте в виду, что события могут вызвать другие события.
Но что, если несколько запросов приходят одновременно? Как Запрос и Закрыть мероприятие? Контур событий будет обработать эти события по одному во времени. Итак, сначала Запрос событие будет обработан, а затем Закрыть событие Отказ Хотя они обрабатываются, они не блокируют больше событий. Если они сделали, наш код будет работать в два раза длиннее.
Давайте погрузиться дальше в то, что это все означает
Поэтому, когда мы говорим, что JavaScript является однопотоком, мы говорим, что у него есть только один Стек вызовов – то, что удерживает функции, которые будут выполняться в вашем коде. Каждый золотой бар представляет собой функцию внутри Стек вызовов Отказ Последняя функция, добавленная сверху – первая функция, которая выполняется и выключается.
Если JavaScript был синхронным языком, и у нас были два запроса, приходящие в том, что вы думаете, случится? Мы должны дождаться результата первого запроса, чтобы вернуться до того, как мы сможем обработать второй запрос. Это означает, что первый запрос останется в Стек вызовов , блокируя любые другие запросы от прихода, пока не вернутся необходимые результаты.
После того, как результаты извлекаются, первый запрос «выскакивает», и только тогда второй запрос входит в Стек вызовов И получить казнь:
JavaScript достигает своей модели параллелизма, сохраняя асинхронные функции где-то еще, в то время как другие задачи, намного быстрее. Затем, когда наша асинхронная функция получает то, что нужно, это в конечном итоге выполняет. По крайней мере, это суть этого.
Давайте погрузиться глубже сейчас, когда мы знаем о Стек вызовов Отказ
Когда асинхронная функция с обратным вызовом или событием входит в Стек вызовов он автоматически перемещается в Веб-API Отказ Веб-API где события подписаны на Структура событий хранятся. Они ждут заказов от Структура событий , который слушает, называются какие-либо события.
Как только кто-то запускает событие, например, Запросить событие обратный вызов этого события отправляется в Очередь события Отказ Эта очередь также называется Обратный вызов очереди или просто Очередь задачи.
Причина, по которой у нас есть несколько имен в очередь, заключается в том, что тот же процесс, который происходит для событий, происходит для асинхронных функций – или методов – все, что имеет обратный вызов, включая DOM события и функции событий и мероприятия, не являющиеся частью собственного JavaScript, как Ajax и Сетримс (Да, они являются частью Web API , а не JavaScript).
Теперь последнее, что происходит, это обратный вызов Запросить событие ждать внутри этого Событие/Обратный вызов/Очередь задачи для Стек вызовов опустошить. Это есть что связано с способом памяти процессов JavaScript – так что в основном просто знают, как только мы доберемся до этого этапа, мы должны дождаться до тех пор, пока все функции все еще не будут выпущены, прежде чем мы сможем добавить обратный вызов в Стек вызовов и обрабатывать это.
Вот визуальная демонстрация всего, что мы только что объяснили:
- JavaScript сканирует ваш код и стекирует функции, события и все остальное на Стек вызовов Отказ
- Золотые бары ниже регулярные, не асинхронные функции. Последние розовые и зеленые бары – два Запрос событий Отказ Эти события подписаны на Структура событий (играет бригадир пуффикинов) и ждать внутри Веб-API быть названным.
- Поскольку события ждут, другие функции выполняются на Стек вызовов Отказ
- Как только событие вызвано, Структура событий слышит это и что обратный вызов этого конкретного события перемещается в очередь. Хотя , Так как это Запросить событие Сначала это будет ждать каких-либо результатов. И только тогда он отправляет обратный вызов в очередь.
- Хотя находятся функции, работающие и выполняются на Стек вызовов События должны ждать Стек вызовов пустить для того, чтобы они запустили. Brigadier Fluffykins позволяет им знать, если это хорошо, чтобы перейти в Стек вызовов или не в зависимости от того, если он пусто или нет.
Давайте создадим пользовательские события!
Эмиттеры событий широко используются в библиотеках Node.js, поэтому давайте узнаем, как создавать свои собственные и лучше понять, как они работают!
Все объекты, которые Emit Events – это случаи Eventemitter Класс И все события наследуют от Совещатель Constructor Отказ Мы будем создавать два события для Bunnyerror Эмиттер событий – Bunnywarning и Bunnyneed Отказ
Скопируйте и вставьте это в файл под названием Bunnyemitter.js :
Хорошо, так что здесь происходит?
Сначала нам требуется в Node.js Eventemitter Object И тогда мы создаем экземпляр нового объекта Eventemitter, для которого мы создадим пользовательские события для. Мы называем этот экземпляр Bunnyerror Отказ
Затем мы создаем слушатель события для нашего первого события, Bunnywarning , с на Метод, который слушает событие. Мы обращаемся к этому событию, когда он используется, вызвав обратный вызов, который просто печатает «Bunny Watings: предупреждение».
Обратите внимание, что я использовал Шаблонные литералы – особенность ES6. Вы можете узнать больше им здесь Отказ Это так же, как поговорка console.log (“Bunny предупреждение:” + сообщение) Отказ
Наконец мы используем Эмит Метод для запуска или вызова события. Как только событие называется обратный вызов, должен работать. Мы можем сделать это столько раз, сколько мы хотим.
Предполагая, что файл находится на вашем рабочем столе, введите Узел Bunnyemitter.js В вашей оболочке:
Если вы хотите только эмиттер событий, чтобы вызвать один раз, Eventemitter Object имеет метод под названием .once который вы можете использовать вместо .на:
yourEventEmitter.once(yourEvent, yourCallback)
С этим, независимо от того, сколько раз вы эмируете важен это будет работать только один раз.
Хорошей практикой для ограничения количества слушателей событий у вас есть. На самом деле, если у вас есть более десяти, вы получите предупреждение:
"(node) warning: possible EventEmitter memory leak detected. 11 listeners added. Use emitter.setMaxListeners() to increase limit."
До сих пор вы видели такие условия, как События , Слушатель событий и Обработчик событий использовался. Давайте сделаем основные различия, прежде чем мы будем двигаться дальше:
Слушатель событий это событие Вы создаете, чтобы слушать любые входящие события. Обработчик событий это обратный вызов, который будет вызван после Слушатель событий слышит событие Отказ
В нашем собственном примере излучения событий Слушатели событий были Bunnywarning и кролики и Обработчики событий были обратные вызовы каждого события.
Проверьте эти дополнительные ресурсы
- Node.js Документы на события
- Список событий для дома
- Вы научились создавать экземпляр Emitter событий, но что, если вы хотите продлить его и использовать его в разных файлах? Проверьте этот учебник
- Узнать больше методов на объекте Eventemitter
- Хотите узнать больше о петле события?
Поздравляю! Вы сделали это через Узнайте Node.js с бригадирными путаницами Часть II! На сегодняшнем уроке вы узнали, что Node.js – это ориентированный на событие, и почему это полезно для асинхронного поведения. Вы также узнали, как эти события обрабатываются через петлю события.
Мы также взяли погружение в изучение сходства между событиями и событиями DOM и событиями в Node.js, чтобы помочь вам немного больше ослабить эту новую царство.
Наконец, мы создали первый Eventemitter и два удивительных события!
Давайте узнаем больше об этих темах, а также других, мы только поцарапали только в следующие несколько уроков. Спасибо за чтение и оставайтесь на улице.
Держите свою мудрость на сегодняшний день, щелкнув ❤ ниже и следуя, как больше Узнайте Node.js с бригадирными путаницами скоро на среднем!
Часть I: Sync, Async, и создавая свой первый сервер!
Часть II: События, Eventemitter & Event Loop
Часть III: Запросить объект, настроить маршруты, подавать файлы