Зная меня, зная JavaScript - А-ха!
Все мы слышали старую идиому Эйнштейна: «Если вы не можете объяснить это просто, вы недостаточно хорошо понимаете». Я использую JavaScript уже пару лет, и когда меня спросили, что такое JavaScript и как он работает? Мой ответ был бы ... ну ... путаным и откровенно вздорным.
Это, ммм, язык компьютерного программирования, ммм, который позволяет создавать веб-сайты и приложения. Он работает, ммм, в браузере, однопоточный, ммм, как синхронный, так и асинхронный, ммм, больше жаргона… так что поехали!
Если вы в одной лодке со мной, эта статья для вас. По крайней мере, я на это надеюсь. Я нашел идеальный ответ: программа на JavaScript работает так же, как и мы.
Если вы хотите узнать больше, дайте мне шанс и продолжайте читать. Я надеюсь, что эта статья предоставит вам полезную метафору, чтобы лучше понять, как работает JavaScript.
Кстати - эта статья пронизана отсылками к песням ABBA, заранее могу только извиниться.
Название игры
Когда вы просыпаетесь утром, как вы решаете, что делать? У вас есть готовый список вещей или вы реагируете на окружающий мир? Ответ, вероятно, и того, и другого.
Утром наши первые дела - это реакция на пробуждение. Чистка зубов, принятие душа и завтрак - все это примеры задач, которые мы запрограммировали выполнять при пробуждении.
Таким образом, большая часть того, что мы делаем, - это реакция на «события». То же самое и с программой на JavaScript. Когда происходит x, мы делаем y. События вызывают действия.
Весь код JavaScript запускается событием, хотя это не всегда явно. Если задачи не назначены событию, они запускаются при первой загрузке файла JavaScript. Это эквивалентно тому, как мы просыпаемся утром и выполняем задания, необходимые для подготовки к новому дню.
Реакция на события часто называется асинхронным программированием или неблокирующим программированием. В конце концов, знание того, что завтра утром мы очистим зубы, не мешает нам что-то делать сейчас.
Итак, как JavaScript выполняет эти задачи, когда происходит событие?
I Do, I Do, I Do, I Do, I Do
Ходят слухи, что мужчины не могут одновременно выполнять несколько задач. Каким бы возмутительным и клеветническим это ни было, программа на JavaScript, как и мужчины, может делать только одно дело за раз. Таким образом, люди считают себя единомышленниками… в то время как JavaScript считается однопоточным.
Однако, в отличие от большинства из нас, программа на JavaScript всегда в фокусе. Он не перейдет к чему-то новому, пока эта задача не будет выполнена. Таким образом, JavaScript считается синхронным и блокирующим.
Используя предыдущие задачи по пробуждению, мы не можем одновременно завтракать и чистить зубы. Таким образом, одна задача должна выполняться раньше другой.
В программе на JavaScript порядком выполнения задач управляет Очередь задач. Эта очередь действует как ваш список дел. Как и в любой упорядоченной очереди, первая входящая задача - первая выходящая. Итак, первая задача будет запущена, затем следующая и так далее.
Выполнением каждой отдельной задачи управляет стек вызовов. Как и стопка бумаг, стек вызовов идет первым, а потом уходит. Зачем использовать стек, а не очередь? Потому что задача часто содержит подзадачи, которые необходимо выполнить, чтобы выполнить первую задачу.
Например. Чтобы очистить зубы, вам нужно нанести зубную пасту на щетку, почистить зубы, а затем выплюнуть зубную пасту. Только выполнив эти подзадачи, вы сможете выполнить первое задание по чистке зубов.
После того, как все задачи в стеке вызовов будут выполнены и стек станет пустым, очередь задач может перейти к следующей задаче.
Когда вы можете делать только одно дело за раз, размер этой задачи и время определяют то, что вы можете сделать. То же верно и для программы на JavaScript.
(NB: технически программа JavaScript может работать над несколькими задачами одновременно с использованием Web Workers. Это эквивалентно использованию помощника, который поможет вам.)
Двигаться дальше
По мере того как минутная стрелка тикает, мы делаем больше. А теперь представьте, что минутная стрелка все больше ускоряется вокруг часов, пока не станет размытым. Вы представляете себе сверхбыстрые часы, управляющие JavaScript, которые называются Цикл событий.
Эти часы особенные не только потому, что они очень быстрые, но и потому, что они останавливаются всякий раз, когда выполняется задача. В большинстве случаев мы не замечаем зависания, потому что код JavaScript работает очень быстро. Если мы это сделаем, это хороший знак, что у нас есть проблемы с производительностью, которые необходимо решить. Если ваш компьютер полностью зависает, это означает, что задача выполняется постоянно и застряла в бесконечном цикле.
После завершения задачи эти специальные часы перезапустятся и будут оценивать любые новые события, которые произошли. Если с этими событиями связаны задачи, они добавляются в вашу очередь задач. И цикл повторяется. Отсюда и название цикл событий.
Конечно, наличие единой очереди задач проблематично. Некоторые события вызывают более срочные задачи, чем другие. К счастью, JavaScript может с этим справиться.
Voulez Vous… Расставить приоритеты
Наши приоритеты часто связаны с обещаниями, которые мы дали себе и другим. Чаще всего они привязаны к сроку! Мы обещаем, когда хотим подчеркнуть нашу приверженность чему-то в качестве приоритета.
Обещания также существуют в JavaScript и отражают наши обещания. Я обещаю сделать y, если y произойдет, сделайте x, если y не может материализоваться, сделайте z.
Когда вы даете обещание в программе JavaScript, выполнение или невыполнение этого обещания добавляет приоритетную задачу. Эта приоритетная задача называется микрозадачей и имеет собственную очередь задач. Эта очередь дает задачам возможность переходить по очереди и запускаться перед следующей задачей в стандартной очереди задач. Как и в случае с нашими приоритетными задачами, пока у нас есть приоритеты, мы не можем переходить к другим нашим задачам. Микрозадачи запускаются всякий раз, когда существующий стек вызовов пуст.
Если вы все еще здесь, вы, вероятно, спрашиваете: «Как, черт возьми, все это возможно?» Как и у нас, мозг делает все возможным.
Зная меня, зная тебя
Кто мы, наши воспоминания, наша логика и наши убеждения - все это находится в нашем мозгу. Наш мозг воспринимает мир вокруг нас, интерпретируя электронные / химические импульсы от наших нейронов, которые получают информацию от наших органов чувств.
В программе JavaScript JavaScript выполняет ту же функцию, что и эти нейроны. Ретрансляция сообщений туда и обратно. JavaScript - это просто язык, используемый мозгом JavaScript.
Этим мозгом является браузер (например, Chrome, Firefox) или сервер, содержащий движок JavaScript (node.js). Механизм JavaScript в браузере интерпретирует JavaScript посредством процесса, называемого компиляцией. Компиляция позволяет браузеру / серверу разбираться в JavaScript и предпринимать действия. Этим действием может быть присвоение данных и действий памяти или выполнение задач.
Как у нас есть шаблоны для взаимодействия с внешним миром, такие как устное слово. Браузеры и серверы могут взаимодействовать с внешним миром с помощью API. API - это просто общий язык, на котором стороны могут взаимодействовать. Таким образом, браузер может взаимодействовать с вашим компьютером или базой данных на другом конце света для создания веб-сайтов.
Браузер (или сервер) делает возможной программу JavaScript. Стеки вызовов, очереди задач, цикл событий, переменные и обратные вызовы - все это управляется этим мозгом JavaScript. Программист javascript просто создает сообщения и шаблоны, чтобы мозг мог их интерпретировать и предпринять действия.
Когда все сказано и сделано
Итак, в заключение:
- Как и у нас, большинство задач связано с реакцией на события. В JavaScript реакция на события асинхронная и неблокирующая.
- Как и мы, программа на JavaScript использует списки «сделать» для управления задачами, один из которых является стандартным списком «сделать» (очередь задач), а другой - очередью приоритетных задач (микрозадачи). Задачи добавляются в эти очереди при наступлении определенных событий.
- Как и мы (или мужчины), программа на JavaScript фокусируется на одной вещи за раз (однопоточная), хотя она может использовать помощников (веб-воркеров) для выполнения параллельных задач.
- В отличие от нас, программа на JavaScript непоколебима, она не откажется от задачи до ее завершения. Таким образом, JavaScript является синхронным и блокирующим. Задача завершена, когда стек вызовов пуст.
- Как и мы, часы определяют, сколько задач может выполнить программа на JavaScript. Часы JavaScript, цикл событий, отличаются от наших часов тем, что они зависают каждый раз, когда выполняется задача. По завершении задачи цикл событий проверит, какие события произошли, и соответственно добавит задачи в очередь задач.
- Как и мы, программа на JavaScript использует язык для передачи данных в свой мозг, из него и внутри него. Хотя у нас есть нейроны, программа на JavaScript использует JavaScript.
- Как и мы, мозг делает все это возможным. Он интерпретирует сообщения, управляет памятью и позволяет действовать и общаться с нашей средой, используя один из многих общих языков. В программе JavaScript этот мозг представляет собой браузер (или сервер), содержащий движок JavaScript.
Снова и снова и снова
В качестве подтверждения ваших знаний следующие видео Филиппа Робертса (https://www.youtube.com/watch?v=8aGhZQkoFbQ) и Джейка Арчибальда будут неоценимыми (https://www.youtube.com/watch ? v = cCOL7MC4Pl0 ). Поэтому вместо того, чтобы добавлять задачу в очередь задач, дайте обещание и начните наблюдать за ними раньше.
Если вы воскликнули «SOS», потому что JavaScript работает совсем не так, как мы. Вы абсолютно правы.
Так же, как мы работаем, более сложен и JavaScript. Тем не менее, я надеюсь, что эта упрощенная модель поможет вам запомнить и объяснить, как работает JavaScript.
"Пока!"
Спасибо
Эта статья была написана, чтобы помочь мне лучше понять, как работает JavaScript, и был ряд источников, которые я нашел бесценными в этом личном поиске. Так что я благодарю видео Филипа Робертса на YouTube, объяснение Джейка Арчибальда на YouTube, серию статей Кайла Симпсона «Ты не знаешь JavaScript», развлекательный блог Дмитрия Глазкова и множество других источников.
