{"id":289046,"date":"2018-09-06T13:30:02","date_gmt":"2018-09-06T09:30:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=289046"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2018-09-06T09:30:02","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=289046","title":{"rendered":"\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0438\u0441\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u043e GitHub \u0431\u0435\u0437 JavaScript"},"content":{"rendered":"\n<div data-io-article-url=\"https:\/\/habr.com\/post\/369785\/\" class=\"post__text post__text-html js-mediator-article\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/7c8\/ee1\/568\/7c8ee156890a802bdb318b9abc7e3555.png\" alt=\"image\"> <\/p>\n<p>  <\/p>\n<p>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! 24 \u0430\u0432\u0433\u0443\u0441\u0442\u0430 2018 \u0432\u044b\u0448\u043b\u0430 \u0432\u0435\u0440\u0441\u0438\u044f <a href=\"https:\/\/blog.golang.org\/go1.11\">Go 1.11<\/a> \u0441 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 WebAssembly (Wasm). \u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f \u0438 \u0443 \u043c\u0435\u043d\u044f \u0441\u0440\u0430\u0437\u0443 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u043e \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u041d\u0430\u043f\u0438\u0441\u0430\u0442\u044c &#171;Hello World&#187; \u0441\u043a\u0443\u0447\u043d\u043e (\u0438 \u043e\u043d \u043a\u0441\u0442\u0430\u0442\u0438 \u0435\u0441\u0442\u044c \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438), \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u0442\u0440\u0435\u043d\u0434 \u043f\u0440\u043e\u0448\u0435\u0434\u0448\u0435\u0433\u043e \u043b\u0435\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u0438 \u0438\u0437 \u0441\u0435\u0440\u0438\u0438 &#171;\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0438\u0441\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u043e GitHub &lt;\u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u043b\u044e\u0431\u0438\u043c\u044b\u0439 JS-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a&gt;&#187;<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<p>\u0418\u0442\u0430\u043a, \u0434\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u044d\u0442\u043e \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0435\u043d\u0438\u0435 \u0446\u0438\u043a\u043b\u0430. \u0412\u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435 \u0433\u043b\u0430\u0432\u044b:<br \/>  <a href=\"https:\/\/habr.com\/post\/419559\/\">\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0438\u0441\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u043e GitHub \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f React + RxJS 6 + Recompose<\/a><br \/>  <a href=\"https:\/\/habr.com\/post\/419653\/\">\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0438\u0441\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u043e GitHub \u0431\u0435\u0437 React + RxJS 6 + Recompose<\/a><br \/>  <a href=\"https:\/\/habr.com\/post\/420351\/\">\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0438\u0441\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u043e GitHub, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f Vue<\/a><br \/>  <a href=\"https:\/\/habr.com\/post\/419933\/\">\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0438\u0441\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u043e Github \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f Angular<\/a><br \/>  <a href=\"https:\/\/habr.com\/post\/419893\/\">\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0438\u0441\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u043e Github \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f VanillaJS<\/a> <\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043a\u0430\u043a \u0434\u043e\u043b\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0435\u0441\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u0439 \u0438\u0437 \u0441\u0442\u0430\u0442\u0435\u0439 \u0432\u044b\u0448\u0435, \u0434\u043b\u044f \u0442\u0435\u0445 \u043a\u043e\u043c\u0443 \u043b\u0435\u043d\u044c \u0447\u0438\u0442\u0430\u0442\u044c \u043e\u043f\u0438\u0448\u0443 \u043a\u043e\u0440\u043e\u0442\u043a\u043e:<br \/>  \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0438\u0441\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u043e GitHub \u0441 \u0432\u0432\u043e\u0434\u043e\u043c \u043b\u043e\u0433\u0438\u043d\u0430 \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c HTML. \u041a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0440\u043d\u043e, \u043d\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c JavaScript. \u0414\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0432\u043e\u0442 \u044d\u0442\u043e:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/9c2\/020\/f20\/9c2020f205bbbbaeae6734360cf7bfe9.gif\" alt=\"image\"><\/p>\n<p>  <\/p>\n<h2 id=\"ustanovka\">\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430<\/h2>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u0434\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 Go (\u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 1.11)<br \/>  \u041a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 HTML &amp; JS \u0432 \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">cp $(go env GOROOT)\/misc\/wasm\/wasm_exec.{html,js} .<\/code><\/pre>\n<p>  <\/p>\n<p>Hello World \u0438 \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 HTTP \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u044f \u043f\u0440\u043e\u043f\u0443\u0449\u0443, \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0430 <a href=\"https:\/\/github.com\/golang\/go\/wiki\/WebAssembly\">Go Wiki<\/a><\/p>\n<p>  <\/p>\n<h2 id=\"vzaimodeystvie-s-dom\">\u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 DOM<\/h2>\n<p>  <\/p>\n<p>\u041e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043f\u0430\u043a\u0435\u0442 <a href=\"https:\/\/tip.golang.org\/pkg\/syscall\/js\/\"><code>syscall\/js<\/code><\/a><br \/>  \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f JavaScript:<\/p>\n<p>  <\/p>\n<pre><code class=\"go\">js.Value \/\/ \u0442\u0438\u043f, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 JavaScript     func Global() Value \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 JavaScript, \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u044d\u0442\u043e `window`     func (v Value) Call(m string, args ...interface{}) Value \/\/ \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044e     func (v Value) Get(p string) Value \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u0435\u0439 \u043e\u0431\u044a\u0435\u043a\u0442\u0430     func (v Value) Set(p string, x interface{}) \/\/ \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u0435\u0439 \u043e\u0431\u044a\u0435\u043a\u0442\u0430  <\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u0441\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0438\u043c\u0435\u044e\u0442 \u0430\u043d\u0430\u043b\u043e\u0433\u0438 \u0432 JS, \u0438 \u0441\u0442\u0430\u043d\u0443\u0442 \u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435 \u043f\u043e \u0445\u043e\u0434\u0443 \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<p>  <\/p>\n<h2 id=\"pole-vvoda\">\u041f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430<\/h2>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u043e\u043b\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u043b\u043e\u0433\u0438\u043d \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430, \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0442\u0435\u0433 <code>input<\/code> \u0441 <code>placeholder<\/code>.<br \/>  \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0435\u0449\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0442\u0435\u0433\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0441\u0440\u0430\u0437\u0443 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<pre><code class=\"go\">type Element struct {     tag    string     params map[string]string }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0442\u0435\u0433\u0430 <code>tag<\/code> (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <code>input<\/code>, <code>div<\/code> \u0438 \u0442.\u0434) \u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b <code>params<\/code> (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: <code>placeholder<\/code>, <code>id<\/code> \u0438 \u0442.\u0434)<\/p>\n<p>  <\/p>\n<p>\u0421\u0430\u043c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"go\">func (el *Element) createEl() js.Value {     e := js.Global().Get(\"document\").Call(\"createElement\", el.tag)     for attr, value := range el.params {         e.Set(attr, value)     }     return e }<\/code><\/pre>\n<p>  <\/p>\n<p><code>e := js.Global().Get(\"document\").Call(\"createElement\", el.tag)<\/code> \u044d\u0442\u043e \u0430\u043d\u0430\u043b\u043e\u0433 <code>var e = document.createElement(tag)<\/code> \u0432 JS<br \/>  <code>e.Set(attr, value)<\/code> \u0430\u043d\u0430\u043b\u043e\u0433 <code>e.setAttribute(attr, value)<\/code><br \/>  \u0414\u0430\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043d\u043e \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0445 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n<p>  <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043c\u0435\u0441\u0442\u043e \u0435\u0433\u043e \u0432\u0441\u0442\u0430\u0432\u043a\u0438. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u0443\u0434\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432 <code>div<\/code> \u0441 <code>id=\"box\"<\/code> (\u0432 <code>wasm_exec.html<\/code> \u0441\u0442\u0440\u043e\u043a\u0430 <code>&lt;div id=\"box\"&gt;&lt;\/div&gt;<\/code>)<\/p>\n<p>  <\/p>\n<pre><code class=\"go\">type Box struct {     el js.Value }  box := Box{     el: js.Global().Get(\"document\").Call(\"getElementById\", \"box\"), }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 box.el \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<br \/>  <code>js.Global().Get(\"document\").Call(\"getElementById\", \"box\")<\/code> \u0432 JS \u044d\u0442\u043e <code>document.getElementById('box')<\/code><\/p>\n<p>  <\/p>\n<p>\u0421\u0430\u043c \u043c\u0435\u0442\u043e\u0434 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f input-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"go\">func (b *Box) createInputBox() js.Value {     \/\/ \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440     el := Element{         tag: \"input\",         params: map[string]string{             \"placeholder\": \"GitHub username\",         },     }     \/\/ \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430     input := el.createEl()     \/\/ \u0412\u044b\u0432\u043e\u0434 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 div \u0441 id=\"box\"     b.el.Call(\"appendChild\", input)     return input }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;input placeholder=\"GitHub username\"&gt;<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"konteyner-vyvoda-rezultatov\">\u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0432\u044b\u0432\u043e\u0434\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432<\/h2>\n<p>  <\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043a\u0443\u0434\u0430-\u0442\u043e \u043d\u0430\u0434\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c <code>div<\/code> c <code>id=\"search_result\"<\/code> \u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 <code>input<\/code><\/p>\n<p>  <\/p>\n<pre><code class=\"go\">func (b *Box) createResultBox() js.Value {     el := Element{         tag: \"div\",         params: map[string]string{             \"id\": \"search_result\",         },     }     div := el.createEl()     b.el.Call(\"appendChild\", div)     return div }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div id=\"search_result\"&gt;&lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u0441\u0442\u0430\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u043d\u0430\u0448\u0435\u0433\u043e Web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<p>  <\/p>\n<pre><code class=\"go\">type App struct {     inputBox     js.Value     resultBox    js.Value }  a := App{     inputBox:     box.createInputBox(),     resultBox:    box.createResultBox(), }<\/code><\/pre>\n<p>  <\/p>\n<p><code>inputBox<\/code> \u0438 <code>resultBox<\/code> \u2014 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0440\u0430\u043d\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b <code>&lt;input placeholder=\"GitHub username\"&gt;<\/code> \u0438 <code>&lt;div id=\"search_result\"&gt;&lt;\/div&gt;<\/code> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e<\/p>\n<p>  <\/p>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e! \u041c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0434\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 <code>input<\/code> \u0438 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u043f\u0443\u0441\u0442\u043e\u0439 <code>div<\/code>, \u0443\u0436\u0435 \u043d\u0435\u043f\u043b\u043e\u0445\u043e, \u043d\u043e \u043f\u043e\u043a\u0430 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u043c \u044d\u0442\u043e.<\/p>\n<p>  <\/p>\n<h2 id=\"sobytie-vvoda\">\u0421\u043e\u0431\u044b\u0442\u0438\u0435 \u0432\u0432\u043e\u0434\u0430<\/h2>\n<p>  <\/p>\n<p>\u041d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0432\u043e\u0434\u0438\u0442 \u043b\u043e\u0433\u0438\u043d \u0432 <code>input<\/code> \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 keyup, \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e<\/p>\n<p>  <\/p>\n<pre><code class=\"go\">func (a *App) userHandler() {     a.input.Call(\"addEventListener\", \"keyup\", js.NewCallback(func(args []js.Value) {         e := args[0]         user := e.Get(\"target\").Get(\"value\").String()         println(user)     })) }<\/code><\/pre>\n<p>  <\/p>\n<p><code>e.Get(\"target\").Get(\"value\")<\/code> \u2014 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>input<\/code>, \u0430\u043d\u0430\u043b\u043e\u0433 <code>event.target.value<\/code> \u0432 JS, <code>println(user)<\/code> \u043e\u0431\u044b\u0447\u043d\u044b\u0439 <code>console.log(user)<\/code><\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043a\u043e\u043d\u0441\u043e\u043b\u0438\u043c \u0432\u0441\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e \u0432\u0432\u043e\u0434\u0443 \u043b\u043e\u0433\u0438\u043d\u0430 \u0432 <code>input<\/code>.<br \/>  \u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u043a GitHub API<\/p>\n<p>  <\/p>\n<h2 id=\"zaprosy-k-github-api\">\u0417\u0430\u043f\u0440\u043e\u0441\u044b \u043a GitHub API<\/h2>\n<p>  <\/p>\n<p>\u0417\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043f\u043e \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c: get-\u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 <a href=\"https:\/\/api.github.com\/users\/:username\">https:\/\/api.github.com\/users\/:username<\/a><br \/>  \u041d\u043e \u0441\u043f\u0435\u0440\u0432\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043e\u0442\u0432\u0435\u0442\u0430 GitHub API<\/p>\n<p>  <\/p>\n<pre><code class=\"go\">type Search struct {     Response Response     Result   Result }  type Response struct {     Status string }`  `type Result struct {     Login            string `json:\"login\"`     ID               int    `json:\"id\"`     Message          string `json:\"message\"`     DocumentationURL string `json:\"documentation_url\"`     AvatarURL        string `json:\"avatar_url\"`     Name             string `json:\"name\"`     PublicRepos      int    `json:\"public_repos\"`     PublicGists      int    `json:\"public_gists\"`     Followers        int    `json:\"followers\"` }<\/code><\/pre>\n<p>  <\/p>\n<p><code>Response<\/code> \u2014 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043e\u0442\u0432\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0443\u0436\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0430\u0442\u0443\u0441 <code>Status string<\/code> \u2014 \u043e\u043d \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043e\u0448\u0438\u0431\u043a\u0438.<br \/>  <code>Result<\/code> \u2014 \u0442\u0435\u043b\u043e \u043e\u0442\u0432\u0435\u0442\u0430 \u0432 \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u043e\u043c \u0432\u0438\u0434\u0435, \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u043e\u043b\u044f.<\/p>\n<p>  <\/p>\n<p>\u0421\u0430\u043c\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442 <code>net\/http<\/code><\/p>\n<p>  <\/p>\n<pre><code class=\"go\">func (a *App) getUserCard(user string) {     resp, err := http.Get(ApiGitHub + \"\/users\/\" + user)     if err != nil {         log.Fatal(err)     }     defer resp.Body.Close()     b, err := ioutil.ReadAll(resp.Body)     if err != nil {         log.Fatal(err)     }     var search Search     json.Unmarshal(b, &amp;search.Result)      search.Response.Status = resp.Status     a.search &lt;- search }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043c\u0435\u0442\u043e\u0434 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435 \u0441 GitHub API \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c <code>userHandler()<\/code> \u0438 \u043f\u043e\u043f\u0443\u0442\u043d\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 Web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f <code>App<\/code> \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0442\u0443\u0434\u0430 \u043a\u0430\u043d\u0430\u043b <code>chan Search<\/code> \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 \u0433\u043e\u0440\u0443\u0442\u0438\u043d\u044b <code>getUserCard()<\/code><\/p>\n<p>  <\/p>\n<pre><code class=\"go\">type App struct {     inputBox     js.Value     resultBox    js.Value     search    chan Search }  a := App{     inputBox:     box.createInputBox(),     resultBox:    box.createResultBox(),     search:    make(chan Search), }  func (a *App) userHandler() {     a.input.Call(\"addEventListener\", \"keyup\", js.NewCallback(func(args []js.Value) {         e := args[0]         user := e.Get(\"target\").Get(\"value\").String()         go a.getUserCard(user)     })) }<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"shablonizator\">\u0428\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440<\/h2>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e! \u041c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435 \u0438 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u0432\u0441\u0442\u0430\u0432\u043a\u0438. \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d HTML-\u0448\u0430\u0431\u043b\u043e\u043d \u0438 \u0440\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440. \u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"http:\/\/mustache.github.io\/\">mustache<\/a> \u2014 \u044d\u0442\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440 \u0441 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u043e\u0439.<br \/>  \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430: <code>go get github.com\/cbroglie\/mustache<\/code><\/p>\n<p>  <\/p>\n<p>\u0421\u0430\u043c HTML-\u0448\u0430\u0431\u043b\u043e\u043d <code>user.mustache<\/code> \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>tmpl<\/code> \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=\"github-card user-card\"&gt;     &lt;div class=\"header User\" \/&gt;     &lt;a class=\"avatar\" href=\"https:\/\/github.com\/{{Result.Login}}\"&gt;         &lt;img src=\"{{Result.AvatarURL}}&amp;s=80\" alt=\"{{Result.Name}}\" \/&gt;     &lt;\/a&gt;     &lt;div class=\"content\"&gt;         &lt;h1&gt;{{Result.Name}}&lt;\/h1&gt;         &lt;ul class=\"status\"&gt;             &lt;li&gt;                 &lt;a href=\"https:\/\/github.com\/{{Result.Login}}?tab=repositories\"&gt;                     &lt;strong&gt;{{Result.PublicRepos}}&lt;\/strong&gt;Repos                 &lt;\/a&gt;             &lt;\/li&gt;             &lt;li&gt;                 &lt;a href=\"https:\/\/gist.github.com\/{{Result.Login}}\"&gt;                     &lt;strong&gt;{{Result.PublicGists}}&lt;\/strong&gt;Gists                 &lt;\/a&gt;             &lt;\/li&gt;             &lt;li&gt;                 &lt;a href=\"https:\/\/github.com\/{{Result.Login}}\/followers\"&gt;                     &lt;strong&gt;{{Result.Followers}}&lt;\/strong&gt;Followers                 &lt;\/a&gt;             &lt;\/li&gt;         &lt;\/ul&gt;     &lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u0441\u0435 \u0441\u0442\u0438\u043b\u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d\u044b \u0432 <code>web\/style.css<\/code><\/p>\n<p>  <\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0448\u0430\u0433 \u2014 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d \u0432 \u0432\u0438\u0434\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u043f\u0440\u043e\u043a\u0438\u043d\u0443\u0442\u044c \u0435\u0433\u043e \u0432 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u043f\u044f\u0442\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 App \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0442\u0443\u0434\u0430 \u043d\u0443\u0436\u043d\u044b\u0435 \u043f\u043e\u043b\u044f.<\/p>\n<p>  <\/p>\n<pre><code class=\"go\">type App struct {     inputBox     js.Value     resultBox    js.Value     userTMPL  string     errorTMPL string     search    chan Search }  a := App{   inputBox:     box.createInputBox(),   resultBox:    box.createResultBox(),   userTMPL:  getTMPL(\"user.mustache\"),   errorTMPL: getTMPL(\"error.mustache\"),   search:    make(chan Search), }<\/code><\/pre>\n<p>  <\/p>\n<p><code>userTMPL<\/code> \u2014 \u0448\u0430\u0431\u043b\u043e\u043d \u0432\u044b\u0432\u043e\u0434\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435 <code>user.mustache<\/code>. <code>errorTMPL<\/code> \u2014 \u0448\u0430\u0431\u043b\u043e\u043d \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0448\u0438\u0431\u043e\u043a <code>error.mustache<\/code><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0438\u0437 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043e\u0431\u044b\u0447\u043d\u044b\u0439 Get-\u0437\u0430\u043f\u0440\u043e\u0441<\/p>\n<p>  <\/p>\n<pre><code class=\"go\">func getTMPL(name string) string {     resp, err := http.Get(\"tmpl\/\" + name)     if err != nil {         log.Fatal(err)     }     defer resp.Body.Close()     b, err := ioutil.ReadAll(resp.Body)     if err != nil {         log.Fatal(err)     }     return string(b) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0428\u0430\u0431\u043b\u043e\u043d \u0435\u0441\u0442\u044c, \u0434\u0430\u043d\u043d\u044b\u0435 \u0435\u0441\u0442\u044c \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c HTML-\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/p>\n<p>  <\/p>\n<pre><code class=\"go\">func (a *App) listResults() {     var tmpl string     for {         search := &lt;-a.search         switch search.Result.ID {         case 0:             \/\/ TMPL for Error page             tmpl = a.errorTMPL         default:             tmpl = a.userTMPL         }         data, _ := mustache.Render(tmpl, search)         \/\/ Output the resultBox to a page         a.resultBox.Set(\"innerHTML\", data)     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0433\u043e\u0440\u0443\u0442\u0438\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043a\u0430\u043d\u0430\u043b\u0430 &lt;-a.search \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 HTML. \u0423\u0441\u043b\u043e\u0432\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0435\u043c, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0432 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 GitHub API \u0435\u0441\u0442\u044c ID-\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f search.Result.ID \u0442\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u0439, \u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043e\u0448\u0438\u0431\u043a\u0438.<br \/>  <code>data, _ := mustache.Render(tmpl, search)<\/code> \u2014 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 HTML, \u0430 <code>a.resultBox.Set(\"innerHTML\", data)<\/code> \u0432\u044b\u0432\u043e\u0434\u0438\u0442 HTML \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443<\/p>\n<p>  <\/p>\n<h2 id=\"debounce\">Debounce<\/h2>\n<p>  <\/p>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442! \u041d\u043e \u0435\u0441\u0442\u044c \u043e\u0434\u043d\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u2014 \u0435\u0441\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441 \u043a GitHub API, \u043f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u0435 \u043c\u044b \u0431\u044b\u0441\u0442\u0440\u043e \u0443\u043f\u0440\u0435\u043c\u0441\u044f \u0432 \u043b\u0438\u043c\u0438\u0442\u044b.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/9c2\/020\/f20\/9c2020f205bbbbaeae6734360cf7bfe9.gif\" alt=\"image\"><\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u2014 Debounce. \u042d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u0432\u044b\u0437\u043e\u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043d\u0430 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f. \u0422\u043e \u0435\u0441\u0442\u044c \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442 \u043a\u043d\u043e\u043f\u043a\u0443 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0442\u043b\u043e\u0436\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u043a GitHub API \u043d\u0430 X \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0435\u0441\u043b\u0438 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0435\u0449\u0435 \u043e\u0434\u043d\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u2014 \u0437\u0430\u043f\u0440\u043e\u0441 \u043e\u0442\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0435\u0449\u0435 \u043d\u0430 X \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434.<\/p>\n<p>  <\/p>\n<p>Debounce \u0432 Go \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u0430\u043d\u0430\u043b\u043e\u0432. \u0420\u0430\u0431\u043e\u0447\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0432\u0437\u044f\u043b \u0438\u0437 \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/drailing.net\/2018\/01\/debounce-function-for-golang\/\">debounce function for golang<\/a><\/p>\n<p>  <\/p>\n<pre><code class=\"go\">func debounce(interval time.Duration, input chan string, cb func(arg string)) {     var item string     timer := time.NewTimer(interval)     for {         select {         case item = &lt;-input:             timer.Reset(interval)         case &lt;-timer.C:             if item != \"\" {                 cb(item)             }         }     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u043f\u0438\u0448\u0435\u043c \u043c\u0435\u0442\u043e\u0434 <code>(a *App) userHandler()<\/code> \u0441 \u0443\u0447\u0435\u0442\u043e\u043c Debounce:<\/p>\n<p>  <\/p>\n<pre><code class=\"go\">func (a *App) userHandler() {     spammyChan := make(chan string, 10)     go debounce(1000*time.Millisecond, spammyChan, func(arg string) {         \/\/ Get Data with github api         go a.getUserCard(arg)     })     a.inputBox.Call(\"addEventListener\", \"keyup\", js.NewCallback(func(args []js.Value) {         e := args[0]         user := e.Get(\"target\").Get(\"value\").String()         spammyChan &lt;- user         println(user)     })) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043e\u0431\u044b\u0442\u0438\u0435 <code>keyup<\/code> \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0432\u0441\u0435\u0433\u0434\u0430, \u043d\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u0440\u0435\u0437 1000ms \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f.<\/p>\n<p>  <\/p>\n<h2 id=\"poliruem\">\u041f\u043e\u043b\u0438\u0440\u0443\u0435\u043c<\/h2>\n<p>  <\/p>\n<p>\u0418 \u043d\u0430\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u043a \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u043c \u043d\u0430\u0448 UX, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 &#171;Loading&#8230;&#187; \u0438 \u043e\u0447\u0438\u0441\u0442\u043a\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0443\u0441\u0442\u043e\u0433\u043e <code>input<\/code><\/p>\n<p>  <\/p>\n<pre><code class=\"go\">func (a *App) loadingResults() {     a.resultBox.Set(\"innerHTML\", \"&lt;b&gt;Loading...&lt;\/b&gt;\") }  func (a *App) clearResults() {     a.resultBox.Set(\"innerHTML\", \"\") }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043c\u0435\u0442\u043e\u0434\u0430 <code>(a *App) userHandler()<\/code> \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"go\">func (a *App) userHandler() {     spammyChan := make(chan string, 10)     go debounce(1000*time.Millisecond, spammyChan, func(arg string) {         \/\/ Get Data with github api         go a.getUserCard(arg)     })     a.inputBox.Call(\"addEventListener\", \"keyup\", js.NewCallback(func(args []js.Value) {         \/\/ Placeholder \"Loading...\"         a.loadingResults()          e := args[0]         \/\/ Get the value of an element         user := e.Get(\"target\").Get(\"value\").String()         \/\/ Clear the results block         if user == \"\" {             a.clearResults()         }         spammyChan &lt;- user         println(user)     })) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0413\u043e\u0442\u043e\u0432\u043e! \u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u0438\u0441\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u043e GitHub \u0431\u0435\u0437 \u0435\u0434\u0438\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u0438 \u043d\u0430 JS. \u041f\u043e \u043c\u043e\u0435\u043c\u0443 \u044d\u0442\u043e \u043a\u0440\u0443\u0442\u043e.<\/p>\n<p>  <\/p>\n<h2 id=\"vyvod\">\u0412\u044b\u0432\u043e\u0434<\/h2>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0438\u0441\u0430\u0442\u044c Web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0435\u0435 \u0441 DOM \u043d\u0430 wasm \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043d\u043e \u0441\u0442\u043e\u0438\u0442 \u043b\u0438 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u2014 \u0432\u043e\u043f\u0440\u043e\u0441. \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043f\u043e\u043a\u0430 \u043d\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u043a\u0430\u043a \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434, \u0432\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0435 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u0425\u0440\u043e\u043c\u0435 \u043f\u0430\u0434\u0430\u043b\u043e \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439 \u0447\u0435\u0440\u0435\u0437 \u0440\u0430\u0437, \u0432 FF \u0441 \u044d\u0442\u0438\u043c \u043b\u0443\u0447\u0448\u0435), \u0432-\u0442\u0440\u0435\u0442\u044c\u0438\u0445 \u0432\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 DOM \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 JS API, \u0447\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 (\u043f\u0440\u0430\u0432\u0434\u0430 \u0437\u0430\u043c\u0435\u0440\u044b \u043d\u0435 \u0434\u0435\u043b\u0430\u043b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u0435 \u0441\u0443\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u043e)<\/p>\n<p>  <\/p>\n<p>\u041a\u0441\u0442\u0430\u0442\u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u044d\u0442\u043e <a href=\"https:\/\/github.com\/stdiopt\/gowasm-experiments\">\u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0439 \u0432 canvas<\/a> \u0438 \u0432\u044b\u0432\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0442\u044f\u0436\u0435\u043b\u044b\u0445 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e wasm \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u044d\u0442\u0438\u0445 \u0437\u0430\u0434\u0430\u0447. \u0425\u043e\u0442\u044f\u2026 \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u043a\u0430\u0436\u0435\u0442.<\/p>\n<p>  <\/p>\n<h2 id=\"sborka-i-zapusk\">\u0421\u0431\u043e\u0440\u043a\u0430 \u0438 \u0437\u0430\u043f\u0443\u0441\u043a<\/h2>\n<p>  <\/p>\n<h4 id=\"kloniruem-repozitoriy\">\u041a\u043b\u043e\u043d\u0438\u0440\u0443\u0435\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439<\/h4>\n<p>  <\/p>\n<pre><code class=\"bash\">cd work_dir<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"bash\">git clone https:\/\/github.com\/maxchagin\/gowasm-example .\/gowasm-example<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"bash\">cd gowasm-example<\/code><\/pre>\n<p>  <\/p>\n<h4 id=\"sborka\">\u0421\u0431\u043e\u0440\u043a\u0430<\/h4>\n<p>  <\/p>\n<pre><code class=\"bash\">GOARCH=wasm GOOS=js go build -o web\/test.wasm main.go<\/code><\/pre>\n<p>  <\/p>\n<h4 id=\"zapusk-servera\">\u0417\u0430\u043f\u0443\u0441\u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0430<\/h4>\n<p>  <\/p>\n<pre><code class=\"bash\">go run server.go<\/code><\/pre>\n<p>  <\/p>\n<h4 id=\"prosmotr\">\u041f\u0440\u043e\u0441\u043c\u043e\u0442\u0440<\/h4>\n<p>  <\/p>\n<pre><code class=\"bash\">http:\/\/localhost:8080\/web\/wasm_exec.html<\/code><\/pre>\n<p>  <\/p>\n<p><a href=\"https:\/\/github.com\/maxchagin\/gowasm-example\">\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043d\u0430 github<\/a><br \/>  <a href=\"http:\/\/wasm.lovefrontend.ru\/web\/wasm_exec.html\">\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0434\u0435\u043c\u043e \u043d\u0430 lovefrontend.ru<\/a><\/p>\n<\/div>\n<p>        <script class=\"js-mediator-script\">!function(e){function t(t,n){if(!(n in e)){for(var r,a=e.document,i=a.scripts,o=i.length;o--;)if(-1!==i[o].src.indexOf(t)){r=i[o];break}if(!r){r=a.createElement(\"script\"),r.type=\"text\/javascript\",r.async=!0,r.defer=!0,r.src=t,r.charset=\"UTF-8\";var d=function(){var e=a.getElementsByTagName(\"script\")[0];e.parentNode.insertBefore(r,e)};\"[object Opera]\"==e.opera?a.addEventListener?a.addEventListener(\"DOMContentLoaded\",d,!1):e.attachEvent(\"onload\",d):d()}}}t(\"\/\/mediator.mail.ru\/script\/2820404\/\",\"_mediator\")}(window);<\/script>     <br \/> \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\/post\/369785\/\"> https:\/\/habr.com\/post\/369785\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div data-io-article-url=\"https:\/\/habr.com\/post\/369785\/\" class=\"post__text post__text-html js-mediator-article\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/7c8\/ee1\/568\/7c8ee156890a802bdb318b9abc7e3555.png\" alt=\"image\"> <\/p>\n<p>  <\/p>\n<p>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! 24 \u0430\u0432\u0433\u0443\u0441\u0442\u0430 2018 \u0432\u044b\u0448\u043b\u0430 \u0432\u0435\u0440\u0441\u0438\u044f <a href=\"https:\/\/blog.golang.org\/go1.11\">Go 1.11<\/a> \u0441 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 WebAssembly (Wasm). \u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f \u0438 \u0443 \u043c\u0435\u043d\u044f \u0441\u0440\u0430\u0437\u0443 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u043e \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u041d\u0430\u043f\u0438\u0441\u0430\u0442\u044c &#171;Hello World&#187; \u0441\u043a\u0443\u0447\u043d\u043e (\u0438 \u043e\u043d \u043a\u0441\u0442\u0430\u0442\u0438 \u0435\u0441\u0442\u044c \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438), \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u0442\u0440\u0435\u043d\u0434 \u043f\u0440\u043e\u0448\u0435\u0434\u0448\u0435\u0433\u043e \u043b\u0435\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u0438 \u0438\u0437 \u0441\u0435\u0440\u0438\u0438 &#171;\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0438\u0441\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u043e GitHub &lt;\u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u043b\u044e\u0431\u0438\u043c\u044b\u0439 JS-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a&gt;&#187;<\/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-289046","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/289046","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=289046"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/289046\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=289046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=289046"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=289046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}