{"id":325646,"date":"2021-06-29T09:00:20","date_gmt":"2021-06-29T09:00:20","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=325646"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=325646","title":{"rendered":"\u041a\u043e\u043d\u0435\u0447\u043d\u044b\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u044b \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u0436\u0438\u0437\u043d\u0438: \u0433\u0434\u0435 \u043c\u044b \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0438 \u043f\u043e\u0447\u0435\u043c\u0443"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\u041f\u0440\u0438\u0432\u0435\u0442, \u043c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0410\u043d\u0442\u043e\u043d \u0421\u0443\u0431\u0431\u043e\u0442\u0438\u043d, \u044f \u0432\u044b\u043f\u0443\u0441\u043a\u043d\u0438\u043a \u043a\u0443\u0440\u0441\u0430 <a href=\"https:\/\/praktikum.yandex.ru\/middle-frontend?utm_source=pr&amp;utm_medium=content&amp;utm_content=29_06_21&amp;utm_campaign=pr_content_middle-frontend_habr\">\u00ab\u041c\u0438\u0434\u043b \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u00bb<\/a> \u0432 \u042f\u043d\u0434\u0435\u043a\u0441.\u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0443\u043c\u0435. \u041d\u0435 \u0442\u0430\u043a \u0434\u0430\u0432\u043d\u043e \u043c\u044b \u0441 \u043d\u0430\u0441\u0442\u0430\u0432\u043d\u0438\u043a\u043e\u043c \u043a\u0443\u0440\u0441\u0430 \u0417\u0430\u0445\u0430\u0440\u043e\u043c \u041e\u0432\u0447\u0430\u0440\u043e\u0432\u044b\u043c \u043f\u0440\u043e\u0432\u0435\u043b\u0438 \u0432\u0435\u0431\u0438\u043d\u0430\u0440, \u043f\u043e\u0441\u0432\u044f\u0449\u0451\u043d\u043d\u044b\u0439 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u043c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0430\u043c \u0438 \u0438\u0445 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c\u0443 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044e. \u0412\u0435\u0431\u0438\u043d\u0430\u0440 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c, \u0430 \u043f\u043e\u0442\u043e\u043c\u0443 \u043f\u043e \u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0430\u043c \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b <a href=\"https:\/\/javascript.plainenglish.io\/finite-state-machines-in-real-life-65370b1b091e\">\u0441\u0442\u0430\u0442\u044c\u044e<\/a> \u0434\u043b\u044f Medium \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435. \u0422\u0430\u043a\u0436\u0435 \u0435\u0441\u0442\u044c <a href=\"https:\/\/www.youtube.com\/watch?v=LWA43vTeFGQ\">\u0437\u0430\u043f\u0438\u0441\u044c<\/a> \u0432\u0435\u0431\u0438\u043d\u0430\u0440\u0430. \u041e\u0434\u043d\u0430\u043a\u043e \u043c\u044b \u0441 \u0417\u0430\u0445\u0430\u0440\u043e\u043c \u0440\u0435\u0448\u0438\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0449\u0451 \u043a\u043e\u0435-\u0447\u0442\u043e: \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u0438\u0439 \u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u043d\u0438\u043a\u0443\u0434\u0430 \u043d\u0435 \u0445\u043e\u0434\u0438\u0442\u044c \u0438 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0435\u0451 \u0437\u0434\u0435\u0441\u044c, \u043d\u0430 \u0425\u0430\u0431\u0440\u0435. \u0420\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c \u0441 \u043f\u0440\u0435\u0434\u044b\u0441\u0442\u043e\u0440\u0438\u0435\u0439 \u2014 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0447\u043d\u0451\u043c \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0432 \u043c\u0438\u0440 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0445 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u043e\u0432.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ik\/04\/im\/ik04imf2f9dsxgujs9zzd6d5jbu.png\"><\/p>\n<p>  <sup>\u041a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442 \u0441 \u0441\u0447\u0430\u0441\u0442\u043b\u0438\u0432\u044b\u043c \u0438 \u0433\u0440\u0443\u0441\u0442\u043d\u044b\u043c \u0412\u0430\u0441\u044c\u043a\u043e\u0439<\/sup><br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h4>\u041a\u043e\u043d\u0435\u0447\u043d\u044b\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u044b<\/h4>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0430\u0434\u0438\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435: \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442 (finite-state machine, FSM) \u2014 \u044d\u0442\u043e \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u044f, \u043c\u043e\u0434\u0435\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u0447\u0438\u0441\u043b\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0432 \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0410\u0432\u0442\u043e\u043c\u0430\u0442 \u0443\u043c\u0435\u0435\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 \u0434\u0440\u0443\u0433\u043e\u0435 \u0432 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0432\u0445\u043e\u0434; \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u043c. FSM \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439, \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0438 \u0438\u043d\u043f\u0443\u0442\u0430\u043c\u0438, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0449\u0438\u043c\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b. <\/p>\n<p>  \u0412\u043e\u0442 \u0438 \u0432\u0441\u0451 \u2014 \u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0430 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439, \u043e\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u043d\u0438\u0445 \u0432 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0430 \u0435\u0449\u0451 \u0443 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0438\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438. \u0414\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c \u043a\u043e\u0442\u0430 \u043f\u043e \u0438\u043c\u0435\u043d\u0438 \u0412\u0430\u0441\u044c\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u0447\u0430\u0441\u0442\u043b\u0438\u0432\u044b\u043c \u0438\u043b\u0438 \u0433\u0440\u0443\u0441\u0442\u043d\u044b\u043c. \u041f\u0440\u044f\u043c\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0412\u0430\u0441\u044c\u043a\u0430 \u0441\u0447\u0430\u0441\u0442\u043b\u0438\u0432. \u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u0443\u0445\u043e\u0434\u0438\u0442\u0435, \u043e\u043d \u0433\u0440\u0443\u0441\u0442\u0438\u0442, \u0430 \u043a\u043e\u0433\u0434\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0435\u0441\u044c \u2014 \u0441\u043d\u043e\u0432\u0430 \u0441\u0447\u0430\u0441\u0442\u043b\u0438\u0432. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u043e\u0437\u0440\u0430\u0437\u0438\u0442\u044c, \u0447\u0442\u043e \u043a\u043e\u0448\u043a\u0430\u043c \u043d\u0430\u043f\u043b\u0435\u0432\u0430\u0442\u044c, \u0434\u043e\u043c\u0430 \u0432\u044b \u0438\u043b\u0438 \u043d\u0435\u0442, \u043d\u043e \u043d\u0430\u0448 \u0412\u0430\u0441\u044c\u043a\u0430 \u043d\u0435 \u0442\u0430\u043a\u043e\u0439. \u0412\u044b, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u0443\u0436\u0435 \u0432\u0438\u0434\u0438\u0442\u0435 \u0441\u0432\u044f\u0437\u044c:<\/p>\n<ul>\n<li>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u041a\u043e\u0442 \u043b\u0438\u0431\u043e \u0441\u0447\u0430\u0441\u0442\u043b\u0438\u0432, \u043b\u0438\u0431\u043e \u0433\u0440\u0443\u0441\u0442\u0435\u043d \u0438 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u044b\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0431\u0435 \u044d\u043c\u043e\u0446\u0438\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e.<\/li>\n<li>\u041d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u041c\u044b \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043b\u0438, \u0447\u0442\u043e \u0412\u0430\u0441\u044c\u043a\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u0447\u0430\u0441\u0442\u043b\u0438\u0432.<\/li>\n<li>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u044b. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0439\u0442\u0438 \u0438\u043b\u0438 \u043f\u0440\u0438\u0439\u0442\u0438, \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u0442\u0430 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f.<\/li>\n<\/ul>\n<p>  \u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0412\u0430\u0441\u044c\u043a\u0443-\u0430\u0432\u0442\u043e\u043c\u0430\u0442 \u043d\u0430 \u0441\u0445\u0435\u043c\u0435, \u043a\u0430\u043a \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435 \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<p>  \u042d\u0442\u043e \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u0442\u044c. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043e\u0431\u0441\u0443\u0434\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u043e\u0432 \u0438 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0441 \u043d\u0443\u043b\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0440\u0435\u0448\u0438\u043c \u043f\u0430\u0440\u0443 \u0437\u0430\u0434\u0430\u0447 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0430. \u0412\u043f\u0435\u0440\u0451\u0434!<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/h4>\n<p>  FSM \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0445 \u0440\u0435\u0448\u0430\u0442\u044c \u0442\u0435 \u0438\u043b\u0438 \u0438\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u043c\u043e\u0434\u0435\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043b\u044e\u0431\u043e\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430. \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432:<\/p>\n<ol>\n<li><b>\u041b\u043e\u0433\u0438\u043a\u0430 \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u043b\u043b\u0435\u043a\u0442\u0430 \u0434\u043b\u044f \u0438\u0433\u0440<\/b>. \u0412\u043e\u0442 <a href=\"https:\/\/gamedevelopment.tutsplus.com\/tutorials\/finite-state-machines-theory-and-implementation--gamedev-11867\">\u0441\u0442\u0430\u0442\u044c\u044f<\/a>, \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u044d\u0442\u0443 \u0438\u0434\u0435\u044e.<\/li>\n<li><b>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0438 \u043b\u0435\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0430\u043d\u0430\u043b\u0438\u0437<\/b>. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u0442\u0430\u043a\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/hackernoon.com\/lexical-analysis-861b8bfe4cb0\">\u0437\u0434\u0435\u0441\u044c<\/a>. \u0412 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0441\u044e\u0434\u0430 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u044f\u0437\u044b\u043a\u0430 \u2014 \u043c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0451 \u0432 \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0430\u0442\u044c\u0438, \u043f\u043e\u0441\u0432\u044f\u0449\u0451\u043d\u043d\u043e\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0435 \u0431\u0438\u043d\u0430\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430.<\/li>\n<li><b>\u0421\u043b\u043e\u0436\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/b>. \u041e \u043d\u0438\u0445 \u0435\u0441\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0430\u044f <a href=\"https:\/\/medium.com\/okcupid-tech-blog\/modeling-ui-states-in-a-react-form-component-using-a-finite-state-machine-d12a6258cd06\">\u0441\u0442\u0430\u0442\u044c\u044f<\/a>, \u043e\u0434\u043d\u0430\u043a\u043e \u043c\u044b \u0442\u043e\u0436\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u044d\u0442\u0443 \u0442\u0435\u043c\u0443.<\/li>\n<\/ol>\n<p>  \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043b\u0435\u0433\u043a\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a, \u0435\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435: FSM \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u043e\u0431\u043b\u0430\u0441\u0442\u044f\u0445, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043b\u0438\u043d\u0433\u0432\u0438\u0441\u0442\u0438\u043a\u0443, \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u043a\u0443, \u0431\u0438\u043e\u043b\u043e\u0433\u0438\u044e, \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0443 \u0438 \u0434\u0430\u0436\u0435 \u0444\u0438\u043b\u043e\u0441\u043e\u0444\u0438\u044e.<\/p>\n<h4>\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0431\u0438\u043d\u0430\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430<\/h4>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0430\u0448 \u043f\u0435\u0440\u0432\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 <a href=\"https:\/\/codepen.io\/kotosha\/pen\/OJpyQPx\">\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435<\/a> \u0438\u043b\u0438 \u043f\u0438\u0448\u0438\u0442\u0435 \u043a\u043e\u0434 \u043f\u043e \u0445\u043e\u0434\u0443 \u0447\u0442\u0435\u043d\u0438\u044f. \u0411\u0443\u0434\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0434\u043e\u043f\u0443\u0441\u043a\u0430\u044e\u0449\u0438\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442 \u0441 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c. \u042d\u0442\u043e \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442, \u0446\u0435\u043b\u044c \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u043f\u0440\u0438\u043d\u0430\u0434\u043b\u0435\u0436\u0438\u0442 \u043b\u0438 \u043d\u0435\u043a\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u043c\u0443 \u044f\u0437\u044b\u043a\u0443, \u0438 \u043b\u0438\u0431\u043e \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c, \u043b\u0438\u0431\u043e \u043e\u0442\u043a\u043b\u043e\u043d\u0438\u0442\u044c \u0435\u0451. \u041c\u044b \u0443\u0436\u0435 \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u043b\u0438 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b, \u043e\u0434\u043d\u0430\u043a\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0435\u0449\u0451 \u0434\u0432\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430:<\/p>\n<ul>\n<li>\u0410\u043b\u0444\u0430\u0432\u0438\u0442. \u041d\u0430\u0431\u043e\u0440 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 (\u0438 \u043d\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u0432\u043d\u0435 \u0430\u043b\u0444\u0430\u0432\u0438\u0442\u0430).<\/li>\n<li>\u041a\u043e\u043d\u0435\u0447\u043d\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u041f\u043e\u0434\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u2014 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043f\u0443\u0441\u0442\u043e\u0435. \u041a\u043e\u0433\u0434\u0430 FSM \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u0442 \u0441\u0432\u043e\u044e \u0440\u0430\u0431\u043e\u0442\u0443, \u043e\u043d \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043f\u043e\u0434\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0438 \u043e\u0442\u043a\u043b\u043e\u043d\u044f\u0435\u0442 \u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435.<\/li>\n<\/ul>\n<p>  \u041f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0437\u0430\u0434\u0430\u0447\u0435:<\/p>\n<ul>\n<li>\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442 \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0431\u0438\u043d\u0430\u0440\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c.<\/li>\n<li>\u041c\u044b \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c \u043d\u0435\u043f\u0443\u0441\u0442\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0441 \u0441\u0438\u043c\u0432\u043e\u043b\u0430\u043c\u0438 0 \u0438 1 \u0438 \u043e\u0442\u043a\u043b\u043e\u043d\u044f\u0435\u043c \u0432\u0441\u0451 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435.<\/li>\n<\/ul>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u0441 \u044d\u0442\u0438\u043c, FSM \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u043f\u043e\u0441\u0438\u043c\u0432\u043e\u043b\u044c\u043d\u043e: \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u0438\u043c\u0432\u043e\u043b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u0430\u043b\u0444\u0430\u0432\u0438\u0442\u0443, \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434. \u041a\u043e\u0433\u0434\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442 \u043f\u0440\u043e\u0439\u0434\u0451\u0442 \u043f\u043e \u0432\u0441\u0435\u043c \u0441\u0438\u043c\u0432\u043e\u043b\u0430\u043c, \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0435\u0448\u0438\u0442\u044c, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u043d\u0435\u0442, \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439.<\/p>\n<p>  \u0412\u043e\u0442 \u043d\u0430\u0448 \u0430\u0432\u0442\u043e\u043c\u0430\u0442, \u0434\u0435\u0442\u0435\u0440\u043c\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0430\u043a\u0446\u0435\u043f\u0442\u043e\u0440 \u0441 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c:<\/p>\n<pre><code class=\"javascript\">\/**  * \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u0417\u0430\u0445\u0430\u0440\u043e\u043c \u041e\u0432\u0447\u0430\u0440\u043e\u0432\u044b\u043c (https:\/\/www.linkedin.com\/in\/zakhar-ovcharov-a657a4197\/)  * \u0441 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u0410\u043d\u0442\u043e\u043d\u0430 \u0421\u0443\u0431\u0431\u043e\u0442\u0438\u043d\u0430  *\/  class FSM {   \/**    * \u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u043a\u043b\u0430\u0441\u0441\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0439 \u0430\u043b\u0444\u0430\u0432\u0438\u0442, \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u043f\u043e\u0434\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u043d\u0430 \u0432\u0445\u043e\u0434.    * @param {String} alphabet    * @param {String[]} states    * @param {String} startState    * @param {String[]} finiteStates    * @param {Object} transitions    *\/   constructor(alphabet, states, startState, finiteStates, transitions) {     this.alphabet = alphabet     this.states = states     this.startState = startState     this.transitions = transitions     this.finiteStates = finiteStates     this.currentState = null   }    \/**    * \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043b\u0438 \u0441\u0438\u043c\u0432\u043e\u043b \u043a \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u043c\u0443 \u0430\u043b\u0444\u0430\u0432\u0438\u0442\u0443.    * @param {String} symbol    * @returns {Boolean}    *\/   _checkIsBelongAlphabet(symbol) {     return this.alphabet.includes(symbol)   }    \/**    * \u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u0438\u043c\u0432\u043e\u043b\u0430. \u0410\u0432\u0442\u043e\u043c\u0430\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u0435\u0440\u0432\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443, \u0435\u0441\u043b\u0438 \u0443 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043a \u0442\u0435\u043a\u0443\u0449\u0435\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e.    * @param {String} symbol    *\/   _changeState(symbol) {     if (       this.transitions[this.currentState] &amp;&amp;       this.transitions[this.currentState][symbol]     ) {       this.currentState = this.transitions[this.currentState][symbol]     } else {       throw new Error(`No transition from ${this.currentState} by ${symbol}`)     }   }    \/**    * \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c. \u041f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0435\u0441\u043b\u0438 finiteStates \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0438 \u043e\u0442\u043a\u043b\u043e\u043d\u044f\u0435\u043c, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a.    * @param {String} value    * @returns {String}    *\/   test(value) {     this.currentState = this.startState      for (let symbol of value) {       if (this._checkIsBelongAlphabet(symbol)) {         this._changeState(symbol)       } else {         return false       }     }      return this.finiteStates.includes(this.currentState)   } }<\/code><\/pre>\n<p>  \u0423 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u0441\u0432\u043e\u0438\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f\u043c. \u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c\u0441\u044f.<\/p>\n<ul>\n<li><b>\u0410\u043b\u0444\u0430\u0432\u0438\u0442<\/b>. \u042d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e. \u041c\u044b \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u044b 0 \u0438 1.<\/li>\n<li><b>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/b>. \u042d\u0442\u043e \u0442\u043e\u0436\u0435 \u043b\u0435\u0433\u043a\u043e. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043b\u0438\u0431\u043e \u0431\u0438\u043d\u0430\u0440\u043d\u043e\u0435, \u043b\u0438\u0431\u043e \u043d\u0435\u0442. \u041c\u044b \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f q0 (\u00ab\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u2014 \u043d\u0435 \u0431\u0438\u043d\u0430\u0440\u043d\u044b\u0439 \u043a\u043e\u0434\u00bb) \u0438 q1 (\u00ab\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u2014 \u0431\u0438\u043d\u0430\u0440\u043d\u044b\u0439 \u043a\u043e\u0434\u00bb).<\/li>\n<li><b>\u041d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/b>. \u041c\u044b \u043d\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c \u043f\u0443\u0441\u0442\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u2014 q0.<\/li>\n<li><b>\u041a\u043e\u043d\u0435\u0447\u043d\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/b> \u043e\u0442\u043c\u0435\u0447\u0430\u044e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u0430\u043a \u043f\u0440\u0438\u043d\u044f\u0442\u043e\u0435. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u2014 q1.<\/li>\n<li><b>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u044b<\/b>. \u0421\u043c. \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0443:<\/li>\n<\/ul>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/r2\/li\/vh\/r2livh7gkvjajq8tae8vwz85fbc.png\"><\/p>\n<p>  <sup>\u0421\u0445\u0435\u043c\u0430 \u0430\u043a\u0446\u0435\u043f\u0442\u043e\u0440\u0430 \u0431\u0438\u043d\u0430\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430<\/sup><\/p>\n<p>  \u041f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0432 \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438, \u0438 \u0443 \u043b\u044e\u0431\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u043c\u0435\u044e\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u0434\u043b\u044f \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 0 \u0438 1. \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a:<\/p>\n<ul>\n<li>\u0415\u0441\u043b\u0438 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u2014 q0, \u0430 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0441\u0438\u043c\u0432\u043e\u043b \u2014 0 \u0438\u043b\u0438 1, \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 q1.<\/li>\n<li>\u0415\u0441\u043b\u0438 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u2014 q1, \u0430 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0441\u0438\u043c\u0432\u043e\u043b \u2014 0 \u0438\u043b\u0438 1, \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0432 \u0442\u043e \u0436\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/li>\n<li>\u0415\u0441\u043b\u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0441\u0438\u043c\u0432\u043e\u043b \u043d\u0435 \u0440\u0430\u0432\u0435\u043d 0 \u0438\u043b\u0438 1, \u043e\u0442\u043a\u043b\u043e\u043d\u0438\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/li>\n<\/ul>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 FSM \u0438 \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e:<\/p>\n<pre><code class=\"javascript\">\/\/ \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443: \u0430\u043b\u0444\u0430\u0432\u0438\u0442, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \/\/ \u041d\u0443\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u043a\u0430\u043a \u043e\u0431\u044a\u0435\u043a\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c: \/\/ 1. \u041a\u043b\u044e\u0447 \u2014 \u044d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \/\/ 2. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u2014 \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c: \/\/ 2.1. \u041a\u043b\u044e\u0447 \u2014 \u044d\u0442\u043e \u0441\u0438\u043c\u0432\u043e\u043b,  \/\/ 2.2. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u2014 \u044d\u0442\u043e \u0446\u0435\u043b\u0435\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. const fsm = new FSM('01', ['q0', 'q1'], 'q0', ['q0'], {   q0: {     0: 'q0',     1: 'q0'   },   q1: {     0: 'q1',     1: 'q1'   } })  console.log(fsm.test('111')) \/\/ true console.log(fsm.test('0111')) \/\/ true console.log(fsm.test('1112')) \/\/ false, 2 \u043d\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u0430\u043b\u0444\u0430\u0432\u0438\u0442\u0443 '01'<\/code><\/pre>\n<p>  <\/p>\n<h4>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h4>\n<p>  \u041f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c! \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u044b \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u2014 \u043a\u043e\u0433\u0434\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u0442 \u043d\u0435 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0432 \u0430\u043b\u0444\u0430\u0432\u0438\u0442\u0435 \u0441\u0438\u043c\u0432\u043e\u043b, \u043e\u043d \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443.<\/p>\n<h4>\u0421\u043b\u043e\u0436\u043d\u0430\u044f \u0444\u043e\u0440\u043c\u0430<\/h4>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u043e\u0439 \u0431\u0438\u043d\u0430\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u2014 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u044b\u0439. \u0412\u0440\u044f\u0434 \u043b\u0438 \u0432\u0430\u043c \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0440\u0435\u0448\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u0435\u0441\u043b\u0438 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0432\u043e\u043e\u0431\u0449\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u043f\u0440\u0438\u043c\u0435\u0440 \u2014 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u043e\u0440\u043c\u0443 \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 \u0432 UI-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c FSM. \u041a\u043e\u0434 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043d\u0430 <a href=\"https:\/\/codesandbox.io\/s\/finite-state-machine-6s69l\">CodeSandbox<\/a>, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u043d\u0435\u043c\u0443 \u0438\u043b\u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0435\u0433\u043e \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e.<\/p>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 React:<\/p>\n<pre><code class=\"bash\">create-react-app questionnaire<\/code><\/pre>\n<p>  \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/5u\/v2\/uu\/5uv2uukqqand41r37s3ku4kq3vy.png\" width=\"410\"><\/p>\n<p>  <code>App.js<\/code> \u0438 <code>index.js<\/code> \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439. FSM.js \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e FSM, \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0435\u0451:<\/p>\n<pre><code class=\"javascript\">\/**  * \u0417\u0434\u0435\u0441\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0432 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u2014 FSM. \u0427\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432 \u043d\u0435\u0451 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u043d\u0430\u0431\u043e\u0440 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432, \u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044e subscribe \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0440\u0435\u0430\u043a\u0446\u0438\u0438 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.   * @param {String} initialState  * @param {Object} transitions  * @returns  *\/ export const FSM = (initialState, transitions) =&gt; {   const subscriptions = []   const subscriptionsRelatedToTriggers = {}    const machine = {     state: initialState,      \/**      * \u0423\u043a\u0430\u0436\u0438\u0442\u0435 \u043a\u043e\u043b\u043b\u0431\u044d\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u041f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0442\u0440\u0438\u0433\u0433\u0435\u0440 \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u043a\u043e\u043b\u043b\u0431\u044d\u043a\u0430 (\u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0442\u0440\u0438\u0433\u0433\u0435\u0440).       * @param {Function} f      * @param {String} trigger      *\/     subscribe(f, trigger = null) {       if (trigger) {         const subscriptionsByTrigger =           subscriptionsRelatedToTriggers[trigger] || []         subscriptionsByTrigger.push(f)         subscriptionsRelatedToTriggers[trigger] = subscriptionsByTrigger         return       }        subscriptions.push(f)     },      \/**      * \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043f\u043e \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0443. \u0415\u0441\u043b\u0438 \u0442\u0440\u0438\u0433\u0433\u0435\u0440 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043a\u043e\u043b\u043b\u0431\u044d\u043a\u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u043e\u043a.       * @param {String} trigger      *\/     send(trigger) {       const currentState = this.state       const nextState =         transitions[currentState] &amp;&amp; transitions[currentState][trigger]           ? transitions[currentState][trigger]           : this.state        if (nextState !== currentState) {         this.state = nextState         subscriptions.forEach((f) =&gt; f(this.state))         const subscriptionsByTrigger = subscriptionsRelatedToTriggers[trigger]         if (subscriptionsByTrigger) {           subscriptionsByTrigger.forEach((f) =&gt; f(this.state))         }       }     }   }    return machine }<\/code><\/pre>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043c\u044b \u0443\u0434\u0430\u043b\u0438\u043b\u0438 \u0430\u043b\u0444\u0430\u0432\u0438\u0442 \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0432\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c:<\/p>\n<ul>\n<li>\u041d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u0420\u0430\u0431\u043e\u0442\u0430 FSM \u0434\u043e\u043b\u0436\u043d\u0430 \u0433\u0434\u0435-\u0442\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c\u0441\u044f.<\/li>\n<li>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u044b. \u041e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u0438\u0445 \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 \u2014 \u0442\u0430\u043a \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0431\u043e\u043b\u0435\u0435 \u0451\u043c\u043a\u0438\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044f \u0442\u0443 \u0436\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c.<\/li>\n<\/ul>\n<p>  \u041a\u043e\u043d\u0435\u0447\u043d\u044b\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u044b \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b \u2014 \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043b\u044e\u0431\u044b\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u0447\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c. \u041f\u043e\u043a\u0430 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u0438 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0432\u0441\u0451 \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435.<\/p>\n<p>  \u041d\u0430\u0448\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u0431\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>send<\/code> \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043c\u0435\u0442\u043e\u0434 <code>subscribe<\/code>. \u042d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u043e, \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0430\u0432\u0442\u043e\u043c\u0430\u0442 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u043b \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u0434 \u043d\u0430 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441 \u0412\u0430\u0441\u044c\u043a\u043e\u0439. \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b <code>test.js<\/code>:<\/p>\n<pre><code class=\"javascript\">import { FSM } from '.\/FSM'  const machine = FSM('happy', {   happy: {     leave: 'sad'   },   sad: {     come: 'happy'   } })  console.log(machine.state) \/\/ happy, it's the initial state machine.send('leave') console.log(machine.state) \/\/ sad, we left machine.send('come') console.log(machine.state) \/\/ happy again, we came back!<\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u0435\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>node test.js<\/code> (\u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0432\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0435\u0441\u044c \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u0444\u0430\u0439\u043b\u043e\u0432). \u0412\u044b\u0432\u043e\u0434 \u043d\u0430 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<p>  <code>happy<\/code><br \/>  <code>sad<\/code><br \/>  <code>happy<\/code><\/p>\n<p>  \u0410\u0432\u0442\u043e\u043c\u0430\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442! \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u0442\u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u043c \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0412\u0430\u0441\u044c\u043a\u0438:<\/p>\n<pre><code class=\"javascript\">import { FSM } from '.\/FSM  const machine = FSM('happy', {   happy: {     leave: 'sad'   },   sad: {     come: 'happy'   } })  machine.subscribe((state) =&gt; {   if (state === 'sad') {     console.log(`I can't let you be ${state}, Vasya. I'm going back!`)     machine.send('come')   } }) console.log(machine.state) \/\/ \u0441\u0447\u0430\u0441\u0442\u043b\u0438\u0432\u044b\u0439 \u2014 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 machine.send('leave') console.log(machine.state) \/\/ \u0441\u043d\u043e\u0432\u0430 \u0441\u0447\u0430\u0441\u0442\u043b\u0438\u0432, \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0431\u0440\u043e\u0441\u0438\u0442\u044c \u0412\u0430\u0441\u044c\u043a\u0443!<\/code><\/pre>\n<p>  \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442 \u0441\u043d\u043e\u0432\u0430.<\/p>\n<p>  <code>happy<\/code><br \/>  <code>happy<\/code><\/p>\n<p>  \u0412\u0430\u0441\u044c\u043a\u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u0447\u0430\u0441\u0442\u043b\u0438\u0432, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u044b \u043d\u0435 \u0431\u0440\u043e\u0441\u0430\u0435\u043c \u0435\u0433\u043e. \u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u2014 \u0433\u0440\u0443\u0441\u0442\u043d\u043e\u0435, \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0442\u0440\u0438\u0433\u0433\u0435\u0440 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f, \u0438 \u043a\u043e\u0442 \u0441\u043d\u043e\u0432\u0430 \u0441\u0447\u0430\u0441\u0442\u043b\u0438\u0432.<\/p>\n<p>  \u041f\u043e\u0445\u043e\u0436\u0435, \u0432\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e. \u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435: \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0430\u043d\u043a\u0435\u0442\u0443 \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u044b \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0443\u0437\u043d\u0430\u0442\u044c \u0438\u043c\u044f \u0438 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u2014 \u0441\u0442\u0443\u0434\u0435\u043d\u0442, \u043c\u044b \u0441\u043f\u0440\u043e\u0441\u0438\u043c, \u0432 \u043a\u0430\u043a\u043e\u043c \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0438\u0442\u0435\u0442\u0435 \u043e\u043d \u0443\u0447\u0438\u0442\u0441\u044f. \u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u043f\u0440\u043e\u0441\u0438\u043c, \u0433\u0434\u0435 \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u0441 \u044d\u0442\u0430\u043f\u0430 Education \/ Work \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u043a \u044d\u0442\u0430\u043f\u0443 Personal, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u0438\u043c\u044f. \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0430\u043d\u043a\u0435\u0442\u0443 \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u043b\u044e\u0431\u043e\u0433\u043e \u0438\u0437 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0437\u0430\u043d\u044f\u0442\u043e\u0441\u0442\u0438.<\/p>\n<p>  \u041d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430, \u0447\u0442\u043e\u0431\u044b \u0441\u0442\u0430\u043b\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/nd\/i_\/pb\/ndi_pbncpd8i98e6nmw2rltgejc.png\"><br \/>  <sup>\u0410\u0432\u0442\u043e\u043c\u0430\u0442, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0438\u0439 \u043d\u0430\u0448\u0443 \u0430\u043d\u043a\u0435\u0442\u0443<\/sup><\/p>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u0441\u0442\u0430\u043b\u043e \u044f\u0441\u043d\u043e, \u043a\u0430\u043a\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0438 \u043a\u0430\u043a \u043e\u043d\u0438 \u0441\u043e\u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u043d\u0430\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c. \u041f\u0435\u0440\u0432\u043e\u0435: \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<pre><code class=\"bash\">npm i animate.css react-transition-group<\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <code>\/components<\/code> \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0432\u043d\u0443\u0442\u0440\u0438. \u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0444\u0430\u0439\u043b <code>questionnaireMachine.js<\/code> \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>\/src<\/code>. \u0422\u0435\u043f\u0435\u0440\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ut\/ty\/gj\/uttygj5wq8gsjuexh72hluzr6ow.png\" width=\"410\"><\/p>\n<p>  \u0424\u0430\u0439\u043b <code>questionnaireMachine.js<\/code> \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 Questionnaire FSM:<\/p>\n<pre><code class=\"javascript\">import { FSM } from '.\/FSM'  export const machine = FSM('initial', {   initial: {     start: 'personal'   },   personal: {     next: 'occupation'   },   occupation: {     back: 'personal',     education: 'education',     work: 'work'   },   education: {     back: 'occupation',     send: 'loading'   },   work: {     back: 'occupation',     send: 'loading'   },   loading: {     success: 'success'   },   success: {     reset: 'initial'   } })<\/code><\/pre>\n<p>  <\/p>\n<h4>Questionnaire FSM<\/h4>\n<p>  \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u2014 \u0441\u0430\u043c\u043e\u0439 \u0430\u043d\u043a\u0435\u0442\u044b. \u041c\u044b \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043c \u0435\u0433\u043e \u043d\u0430 \u0442\u0440\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n<ul>\n<li><b>\u0410\u043d\u043a\u0435\u0442\u0430<\/b>. \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0438\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432.<\/li>\n<li><b>\u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430<\/b>. \u041c\u043d\u043e\u0433\u043e\u0440\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0447\u0430\u0441\u0442\u0438 \u0430\u043d\u043a\u0435\u0442\u044b.<\/li>\n<li><b>\u041f\u0440\u0435\u043b\u043e\u0430\u0434\u0435\u0440<\/b>. \u041f\u0440\u043e\u0441\u0442\u0430\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430.<\/li>\n<\/ul>\n<p>  \u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0430\u043d\u043a\u0435\u0442\u044b:<\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u043e\u0434<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">import React, { useEffect, useState } from 'react'  import { Card } from '..\/\u0421ard' import { Loader } from '..\/Loader' import { machine } from '..\/..\/questionnaireMachine'  import '.\/style.css'  export const Questionnaire = () =&gt; {   const [uiState, setUiState] = useState(machine.state)    useEffect(() =&gt; {     machine.subscribe((state) =&gt; setUISstate(state))   }, [])    return (     &lt;div className=&quot;questionnaire&quot;&gt;       &lt;Card         active={uiState === 'initial'}         next={{ action: () =&gt; machine.send('start'), content: 'Start' }}         subtitle=&quot;Thank you for taking part in our survey&quot;         title=&quot;Survey&quot;       \/&gt;        &lt;Card         active={uiState === 'personal'}         next={{ action: () =&gt; machine.send('next'), content: 'Next' }}         subtitle=&quot;Tell us about you!&quot;         title=&quot;Personal&quot;       &gt;         &lt;div className=&quot;input-group&quot;&gt;           &lt;label htmlFor=&quot;name&quot; className=&quot;label&quot;&gt;             Name           &lt;\/label&gt;           &lt;input type=&quot;text&quot; placeholder=&quot;Floppa&quot; id=&quot;name&quot; className=&quot;input&quot; \/&gt;         &lt;\/div&gt;       &lt;\/Card&gt;        &lt;Card         active={uiState === 'occupation'}         prev={{ action: () =&gt; machine.send('back'), content: 'Back' }}         subtitle=&quot;Do you work or study?&quot;         title=&quot;Occupation&quot;       &gt;         &lt;div className=&quot;input-group&quot;&gt;           &lt;label htmlFor=&quot;occupationStudent&quot; className=&quot;label-radio&quot;&gt;             &lt;input               type=&quot;radio&quot;               name=&quot;occupation&quot;               id=&quot;occupationStudent&quot;               className=&quot;input-radio&quot;               onChange={() =&gt; machine.send('education')}             \/&gt;             &lt;span className=&quot;label-radio__toggler&quot;&gt;&lt;\/span&gt;             &lt;span className=&quot;label-radio__content&quot;&gt;Student&lt;\/span&gt;           &lt;\/label&gt;         &lt;\/div&gt;         &lt;div className=&quot;input-group&quot;&gt;           &lt;label htmlFor=&quot;occupationWorker&quot; className=&quot;label-radio&quot;&gt;             &lt;input               type=&quot;radio&quot;               name=&quot;occupation&quot;               id=&quot;occupationWorker&quot;               className=&quot;input-radio&quot;               onChange={() =&gt; machine.send('work')}             \/&gt;             &lt;span className=&quot;label-radio__toggler&quot;&gt;&lt;\/span&gt;             &lt;span className=&quot;label-radio__content&quot;&gt;Worker&lt;\/span&gt;           &lt;\/label&gt;         &lt;\/div&gt;       &lt;\/Card&gt;        &lt;Card         active={uiState === 'work'}         next={{           action: () =&gt; {             machine.send('send')             setTimeout(() =&gt; machine.send('success'), 1500)           },           content: 'Send survey'         }}         prev={{ action: () =&gt; machine.send('back'), content: 'Back' }}         subtitle=&quot;Wow! What's your job?&quot;         title=&quot;Work&quot;       &gt;         &lt;div className=&quot;input-group&quot;&gt;           &lt;label htmlFor=&quot;job&quot; className=&quot;label&quot;&gt;             Job           &lt;\/label&gt;           &lt;input type=&quot;text&quot; placeholder=&quot;Caracal&quot; id=&quot;job&quot; className=&quot;input&quot; \/&gt;         &lt;\/div&gt;       &lt;\/Card&gt;        &lt;Card         active={uiState === 'education'}         next={{           action: () =&gt; {             machine.send('send')             setTimeout(() =&gt; machine.send('success'), 1500)           },           content: 'Send survey'         }}         prev={{ action: () =&gt; machine.send('back'), content: 'Back' }}         subtitle=&quot;That's great! What's your future profession?&quot;         title=&quot;Education&quot;       &gt;         &lt;div className=&quot;input-group&quot;&gt;           &lt;label htmlFor=&quot;profession&quot; className=&quot;label&quot;&gt;             Profession           &lt;\/label&gt;           &lt;input             type=&quot;text&quot;             placeholder=&quot;Meme&quot;             id=&quot;profession&quot;             className=&quot;input&quot;           \/&gt;         &lt;\/div&gt;       &lt;\/Card&gt;        {uiState === 'loading' &amp;&amp; &lt;Loader \/&gt;}        &lt;Card         active={uiState === 'success'}         prev={{           action: () =&gt; machine.send('reset'),           content: 'Take another survey'         }}         subtitle=&quot;Thank you for your response! Want another survey?&quot;         title=&quot;We got it!&quot;       \/&gt;     &lt;\/div&gt;   ) }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">.questionnaire {   position: fixed;   top: 50%;   left: 50%;   width: 30em;   height: 30em;   transform: translate(-50%, -50%); }<\/code><\/pre>\n<\/div><\/div>\n<p>  \u041f\u0435\u0440\u0432\u043e\u0435: \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0430. \u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u043c\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c <code>uiState<\/code>. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>active<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u2014 \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u043d\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0440\u0435\u0448\u0430\u0442\u044c, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0441\u0435\u0431\u044f \u0438\u043b\u0438 \u043d\u0435\u0442.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u0439\u043c\u0451\u043c\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438:<\/p>\n<pre><code class=\"javascript\">import React from 'react' import { CSSTransition } from 'react-transition-group'  import '.\/style.css'  export const Card = ({ active, children, next, prev, subtitle, title }) =&gt; {   return (     &lt;CSSTransition in={active} timeout={300} classNames=&quot;swipe&quot; unmountOnExit&gt;       &lt;div className=&quot;card&quot;&gt;         &lt;header className=&quot;card__header&quot;&gt;           &lt;h2 className=&quot;card__title&quot;&gt;{title}&lt;\/h2&gt;           &lt;p className=&quot;card__subtitle&quot;&gt;{subtitle}&lt;\/p&gt;         &lt;\/header&gt;         &lt;div className=&quot;card__main&quot;&gt;{children}&lt;\/div&gt;         &lt;div className=&quot;card__actions&quot;&gt;           {prev &amp;&amp; (             &lt;button               className=&quot;card__action card__action_prev&quot;               onClick={prev.action}             &gt;               {prev.content}             &lt;\/button&gt;           )}           {next &amp;&amp; (             &lt;button               className=&quot;card__action card__action_next&quot;               onClick={next.action}             &gt;               {next.content}             &lt;\/button&gt;           )}         &lt;\/div&gt;       &lt;\/div&gt;     &lt;\/CSSTransition&gt;   ) }<\/code><\/pre>\n<p>  <\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u043e\u0434<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">.card {   position: absolute;   display: flex;   flex-direction: column;   width: 100%;   height: 100%;   padding: 3em 2em 2em;   border-radius: 1.5em;   background-color: #fff; }  .card__header {   margin-bottom: 2em;   padding-bottom: 1em;   border-bottom: 1px solid #f5f5f5; }  .card__title {   margin: 0 0 1em; }  .card__subtitle {   margin: 0; }  .card__main {   flex-grow: 1; }  .card__action {   padding: 1em 1.5em;   border-radius: 1.5em;   border: 0;   color: #fff;   font-size: 1em;   cursor: pointer;   transition: background-color 0.3s ease, box-shadow 0.3s ease; }  .card__action_next {   background-color: #4a90e2; }  .card__action_prev {   background-color: #bbb; }  .card__action:not(:last-child) {   margin-right: 1em; }  .card__action:hover {   box-shadow: 0 0 0.5em 0 #00000042; }  .card__action_prev:hover {   background-color: #4a90e2; }  .swipe-enter {   z-index: 1;   transform: translateY(10vh) scale(0.9); }  .swipe-enter-active {   transform: translateY(0) scale(1);   transition: transform 0.3s; }  .swipe-exit {   z-index: 10; }  .swipe-exit-active {   transform: translateY(100vh);   transition: transform 0.3s; }<\/code><\/pre>\n<\/div><\/div>\n<p>  \u041a\u043d\u043e\u043f\u043a\u0438 \u0432 \u043d\u0438\u0436\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043a\u0430\u043a listener \u0434\u043b\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043a\u043b\u0438\u043a\u0430. \u0412\u043e\u0442 \u043f\u043e\u0447\u0435\u043c\u0443 \u043c\u044b \u0437\u0434\u0435\u0441\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0449\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 FSM: \u0442\u0430\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0430\u043d\u043a\u0435\u0442\u044b \u0441\u043c\u043e\u0436\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c <code>uiState<\/code> \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u043d\u0443\u0436\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443.<\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u043c\u0435\u043b\u043e\u0447\u044c \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u0435\u043b\u043e\u0430\u0434\u0435\u0440\u0430. \u0417\u0434\u0435\u0441\u044c \u043d\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0433\u043e, \u043f\u0440\u043e\u0441\u0442\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430:<\/p>\n<pre><code class=\"javascript\">import React from 'react'  import '.\/style.css'  export const Loader = () =&gt; {   return (     &lt;div className=&quot;loader&quot;&gt;       &lt;span className=&quot;loader__element animate__animated animate__bounce animate__infinite&quot;&gt;&lt;\/span&gt;     &lt;\/div&gt;   ) }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">.loader {   position: fixed;   z-index: 1;   top: 50%;   left: 50%;   transform: translate(-50%, -50%); }  .loader__element {   display: block;   width: 1em;   height: 1em;   border-radius: 50%;   background: #fff; }<\/code><\/pre>\n<p>  \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0430\u043d\u043a\u0435\u0442\u0443 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438:<\/p>\n<pre><code class=\"javascript\">import { Questionnaire } from '.\/components\/Questionnaire' import 'animate.css' import '.\/styles.css'  export default function App() {   return &lt;Questionnaire \/&gt; }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">@import url('https:\/\/fonts.googleapis.com\/css2?family=Open+Sans:wght@400;700&amp;display=swap');  * {   font-family: 'Open Sans', sans-serif;   box-sizing: border-box; }  body {   margin: 0;   background: #4a90e2; }  .input-group:not(:last-child) {   margin-bottom: 1em; }  .label {   display: block;   margin-bottom: 0.75em;   padding-left: 1.25em;   font-size: 0.875em; }  .input {   width: 100%;   padding: 1em;   border-radius: 1.5em;   border: 0.125em solid transparent;   outline: 0;   background-color: #f0f4fd;   font-size: 1em; }  .input::placeholder {   color: #d8d8d8;   opacity: 1; }  .input:focus {   border-color: #4a90e2; }  .input-radio {   display: none; }  .label-radio {   display: inline-flex;   align-items: center;   cursor: pointer; }  .label-radio__toggler {   width: 1em;   height: 1em;   margin-right: 0.5em;   border-radius: 50%;   border: 0.125em solid #bbb;   transition: border-color 0.3s ease; }  .label-radio:hover .label-radio__toggler {   border-color: #4a90e2; }<\/code><\/pre>\n<p>  \u0412 \u0438\u0442\u043e\u0433\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u043d\u0435\u0447\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435\u0435 \u043d\u0430 <a href=\"https:\/\/6s69l.csb.app\/\">\u044d\u0442\u043e<\/a>. \u0415\u0441\u043b\u0438 \u0434\u0430, \u0432\u043e\u0437\u0440\u0430\u0434\u0443\u0439\u0442\u0435\u0441\u044c \u2014 \u0432\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0430\u043d\u043a\u0435\u0442\u0443 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0430! \u0415\u0441\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u0435 \u0441\u0432\u043e\u0439 \u043a\u043e\u0434 \u0441 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c \u044d\u0442\u043e\u0439 <a href=\"https:\/\/codesandbox.io\/s\/finite-state-machine-6s69l\">\u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435<\/a>. \u0423 \u0432\u0430\u0441 \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043d\u0430\u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u0443\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u0435.<\/p>\n<p>  \u0410\u043d\u043a\u0435\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043b\u0438, \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0430 \u043d\u0430 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0438 \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0441\u043b\u043e\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u0435\u0451 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u043b\u0435\u0433\u043a\u043e \u0441\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u041e\u0434\u043d\u0443 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u2014 \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u0443\u044e \u0438 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u0418 \u0435\u0449\u0451 \u043a\u043e\u0435-\u0447\u0442\u043e. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 FSM \u0441 \u043d\u0443\u043b\u044f \u2014 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 \u043e\u043f\u044b\u0442, \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0447\u0438\u0445 \u0437\u0430\u0434\u0430\u0447 \u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <a href=\"https:\/\/xstate.js.org\/docs\/\">XState<\/a>. \u0422\u0430\u043c \u0435\u0441\u0442\u044c \u0438 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f, \u0438 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b (\u0438\u0445, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0434\u0430\u0436\u0435 \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c \u043d\u0443\u0436\u043d\u043e).<\/p>\n<h4>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h4>\n<p>  \u0412\u043e\u0442 \u0438 \u0432\u0441\u0451! \u041c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u044b \u0438 \u0433\u0434\u0435 \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. \u041f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442 \u0441 \u043d\u0443\u043b\u044f \u0438 \u0440\u0435\u0448\u0438\u043b\u0438 \u0441 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0432\u0435 \u0437\u0430\u0434\u0430\u0447\u0438. FSM \u2014 \u0448\u0442\u0443\u043a\u0430, \u043f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043e\u0431\u043b\u0430\u0441\u0442\u044f\u0445, \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0440\u0435\u0448\u0435\u043d\u0438\u044e \u043c\u043d\u043e\u0433\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0438 \u0442\u0435\u0445\u043d\u0438\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0442\u043e\u0438\u0442 \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u0438 \u0432\u0437\u044f\u0442\u044c \u043d\u0430 \u0432\u043e\u043e\u0440\u0443\u0436\u0435\u043d\u0438\u0435. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0441\u0442\u0430\u0442\u044c\u044f \u0431\u044b\u043b\u0430 \u0434\u043b\u044f \u0432\u0430\u0441 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439. \u0411\u0443\u0434\u0443 \u0440\u0430\u0434, \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u0435\u0441\u044c \u043c\u043d\u0435\u043d\u0438\u0435\u043c \u0438 \u043e\u043f\u044b\u0442\u043e\u043c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445.<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/yandex_praktikum\/blog\/564800\/\"> https:\/\/habr.com\/ru\/company\/yandex_praktikum\/blog\/564800\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\u041f\u0440\u0438\u0432\u0435\u0442, \u043c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0410\u043d\u0442\u043e\u043d \u0421\u0443\u0431\u0431\u043e\u0442\u0438\u043d, \u044f \u0432\u044b\u043f\u0443\u0441\u043a\u043d\u0438\u043a \u043a\u0443\u0440\u0441\u0430 <a href=\"https:\/\/praktikum.yandex.ru\/middle-frontend?utm_source=pr&amp;utm_medium=content&amp;utm_content=29_06_21&amp;utm_campaign=pr_content_middle-frontend_habr\">\u00ab\u041c\u0438\u0434\u043b \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u00bb<\/a> \u0432 \u042f\u043d\u0434\u0435\u043a\u0441.\u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0443\u043c\u0435. \u041d\u0435 \u0442\u0430\u043a \u0434\u0430\u0432\u043d\u043e \u043c\u044b \u0441 \u043d\u0430\u0441\u0442\u0430\u0432\u043d\u0438\u043a\u043e\u043c \u043a\u0443\u0440\u0441\u0430 \u0417\u0430\u0445\u0430\u0440\u043e\u043c \u041e\u0432\u0447\u0430\u0440\u043e\u0432\u044b\u043c \u043f\u0440\u043e\u0432\u0435\u043b\u0438 \u0432\u0435\u0431\u0438\u043d\u0430\u0440, \u043f\u043e\u0441\u0432\u044f\u0449\u0451\u043d\u043d\u044b\u0439 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u043c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0430\u043c \u0438 \u0438\u0445 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c\u0443 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044e. \u0412\u0435\u0431\u0438\u043d\u0430\u0440 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c, \u0430 \u043f\u043e\u0442\u043e\u043c\u0443 \u043f\u043e \u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0430\u043c \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b <a href=\"https:\/\/javascript.plainenglish.io\/finite-state-machines-in-real-life-65370b1b091e\">\u0441\u0442\u0430\u0442\u044c\u044e<\/a> \u0434\u043b\u044f Medium \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435. \u0422\u0430\u043a\u0436\u0435 \u0435\u0441\u0442\u044c <a href=\"https:\/\/www.youtube.com\/watch?v=LWA43vTeFGQ\">\u0437\u0430\u043f\u0438\u0441\u044c<\/a> \u0432\u0435\u0431\u0438\u043d\u0430\u0440\u0430. \u041e\u0434\u043d\u0430\u043a\u043e \u043c\u044b \u0441 \u0417\u0430\u0445\u0430\u0440\u043e\u043c \u0440\u0435\u0448\u0438\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0449\u0451 \u043a\u043e\u0435-\u0447\u0442\u043e: \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u0438\u0439 \u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u043d\u0438\u043a\u0443\u0434\u0430 \u043d\u0435 \u0445\u043e\u0434\u0438\u0442\u044c \u0438 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0435\u0451 \u0437\u0434\u0435\u0441\u044c, \u043d\u0430 \u0425\u0430\u0431\u0440\u0435. \u0420\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c \u0441 \u043f\u0440\u0435\u0434\u044b\u0441\u0442\u043e\u0440\u0438\u0435\u0439 \u2014 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0447\u043d\u0451\u043c \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0432 \u043c\u0438\u0440 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0445 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u043e\u0432.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ik\/04\/im\/ik04imf2f9dsxgujs9zzd6d5jbu.png\"><\/p>\n<p>  <sup>\u041a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442 \u0441 \u0441\u0447\u0430\u0441\u0442\u043b\u0438\u0432\u044b\u043c \u0438 \u0433\u0440\u0443\u0441\u0442\u043d\u044b\u043c \u0412\u0430\u0441\u044c\u043a\u043e\u0439<\/sup>  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-325646","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/325646","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=325646"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/325646\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=325646"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=325646"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=325646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}