{"id":298078,"date":"2020-02-02T15:00:14","date_gmt":"2020-02-02T15:00:14","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=298078"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2020-02-02T15:00:14","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=298078","title":{"rendered":"\u041f\u0435\u0440\u0435\u0435\u0437\u0434 \u043e\u0442 jQuery \u043a Svelte, \u0431\u0435\u0437 \u0431\u043e\u043b\u0438"},"content":{"rendered":"\n<div class=\"post__text post__text-html\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/486646\/\">\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442.<br \/>  \u042f \u0431\u044d\u043a\u044d\u043d\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0438 \u0444\u0440\u043e\u043d\u0442\u044d\u043d\u0434 \u0437\u0430\u0434\u0430\u0447\u0438 \u0440\u0435\u0448\u0430\u044e \u043a\u0430\u043a \u0443\u043c\u0435\u044e, \u0442\u043e \u0435\u0441\u0442\u044c \u043d\u0430 jQuery, \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0432 2015, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u0441\u0435\u0439\u0447\u0430\u0441. \u041d\u043e \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 Vue \u0438 React \u044d\u0442\u043e \u0443\u0436\u0435 \u043d\u0435 \u043a\u0430\u043c\u0438\u043b\u044c\u0444\u043e. \u0418\u0437 \u043b\u044e\u0431\u0432\u0438 \u043a \u043e\u0441\u043e\u0431\u043e\u043c\u0443 \u043f\u0443\u0442\u0438 \u044f \u0440\u0435\u0448\u0438\u043b \u043e\u0441\u0432\u0430\u0438\u0432\u0430\u0442\u044c \u043d\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u0439 \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u0430\u043c\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 Angular\/React\/Vue, \u044f \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/ru.svelte.dev\/\" rel=\"nofollow\">Svelte<\/a>.<br \/>  \u0421\u0434\u0435\u043b\u0430\u0432 \u043f\u0430\u0440\u0443 \u0443\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u0439 \u0438\u0437 \u0443\u0447\u0435\u0431\u043d\u0438\u043a\u0430, \u044f \u0440\u0435\u0448\u0438\u043b \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044f \u0432\u0437\u044f\u043b \u043e\u0434\u043d\u043e \u0438\u0437 \u0441\u0432\u043e\u0438\u0445 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0445 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0445 \u0437\u0430\u0434\u0430\u043d\u0438\u0439. \u041f\u043e \u0437\u0430\u0434\u0430\u043d\u0438\u044e \u043d\u0430\u0434\u043e \u0431\u044b\u043b\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0441\u043f\u0438\u0441\u043a\u0430 \u0437\u0430\u0434\u0430\u0447 \u0438 \u043e\u0434\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430, CRUD \u043d\u0435 \u043d\u0443\u0436\u0435\u043d, \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430 \u043a\u0430\u043a SPA, \u0438 \u0432\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 DOM \u0432\u0435\u0434\u0451\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 jQuery, \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u043d\u044b jQuery \u043d\u0430 Svelte \u044d\u0442\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u043a\u0430\u043d\u0434\u0438\u0434\u0430\u0442.<br \/>  \u041d\u0438\u0436\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u0441\u0430\u043c\u044b\u0445 \u043f\u0435\u0440\u0432\u044b\u0445 \u043f\u0440\u0435\u043f\u044f\u0442\u0441\u0442\u0432\u0438\u044f\u0445 \u043d\u0430 \u044d\u0442\u043e\u043c \u043f\u0443\u0442\u0438 \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u043e \u0442\u043e\u043c \u043a\u0430\u043a \u0438\u0445 \u043f\u0440\u0435\u043e\u0434\u043e\u043b\u0435\u0442\u044c.<br \/>  <a href=\"https:\/\/ru.svelte.dev\/tutorial\" rel=\"nofollow\">\u0423\u0447\u0435\u0431\u043d\u0438\u043a \u043f\u043e Svelte<\/a> \u043e\u0447\u0435\u043d\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0439 \u0438 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u044b\u0439, \u043d\u043e \u043a\u0430\u043a \u0432\u043d\u0435\u0434\u0440\u0438\u0442\u044c Svelte \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0432\u0435\u0434\u044c Svelte \u044d\u0442\u043e \u043d\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043a\u0430\u043a jQuery, \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440, \u0442\u043e \u0435\u0441\u0442\u044c \u043a\u043e\u0434 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432 Svelte \u043d\u0430\u0434\u043e \u043a\u0430\u043a\u0438\u043c \u0442\u043e \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043e\u0442\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 JS.<br \/>  \u0414\u0440\u0443\u0433\u0438\u043c \u043a\u0430\u043c\u043d\u0435\u043c \u043f\u0440\u0435\u0442\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u0431\u044b\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <\/p>\n<pre><code class=\"javascript\">$<\/code><\/pre>\n<p>, \u0432 Svelte \u044d\u0442\u043e \u0437\u0430\u0440\u0435\u0437\u0435\u0440\u0432\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u0438\u043c\u0432\u043e\u043b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 \u043a\u043e\u0434\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d Svelte \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043e\u0448\u0438\u0431\u043a\u0435:   <\/p>\n<pre><code class=\"javascript\"> [!] (plugin svelte) ValidationError: $ is an illegal variable name <\/code><\/pre>\n<p>  <a name=\"habracut\"><\/a><\/p>\n<h2>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 `$`<\/h2>\n<p>  \u041a\u043e\u043d\u0435\u0447\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441 \u043a\u0430\u043a\u043e\u0439 \u0442\u0430\u043a\u043e\u0439 `$`, \u0435\u0441\u043b\u0438 \u043c\u044b jQuery \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043c\u0435\u043d\u044f\u0435\u043c \u043d\u0430 Svelte?<br \/>  \u0414\u0430 \u0432\u043e\u043f\u0440\u043e\u0441 \u0440\u0435\u0437\u043e\u043d\u043d\u044b\u0439, \u043d\u043e \u0435\u0441\u043b\u0438 \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c, \u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441\u0442\u0430\u043d\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u043d\u0430 \u2014 \u043d\u0435 \u043d\u0430\u0434\u043e \u043a\u0443\u0448\u0430\u0442\u044c \u0441\u043b\u043e\u043d\u0430 \u0446\u0435\u043b\u0438\u043a\u043e\u043c, \u043e\u043f\u044b\u0442\u043d\u044b\u0435 \u043b\u044e\u0434\u0438 \u0441\u043b\u043e\u043d\u0430 \u043a\u0443\u0448\u0430\u044e\u0442 \u043f\u043e \u0447\u0430\u0441\u0442\u044f\u043c. \u0412 \u0441\u043c\u044b\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f jQuery \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e Svelte, \u0431\u0443\u0434\u0435\u0442 \u0441\u0435\u0440\u0438\u0435\u0439 \u0430\u0442\u043e\u043c\u0430\u0440\u043d\u044b\u0445 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433\u043e\u0432, \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u043d\u043e \u0432\u0441\u0435\u0433\u0434\u0430 \u0438 \u00ab\u0441\u0438\u0441\u0442\u0435\u043c\u0430\u00bb \u0432 \u0446\u0435\u043b\u043e\u043c \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432 \u0440\u0430\u0431\u043e\u0442\u043e\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438.<br \/>  \u041f\u043b\u0430\u043d \u0442\u0430\u043a\u043e\u0439: \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043a\u0443\u0441\u043e\u0447\u0435\u043a, \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c, \u0447\u0438\u043d\u0438\u043c, \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u0438 \u0442\u0430\u043a \u043f\u043e\u043a\u0430 \u043d\u0435 \u0441\u043a\u0443\u0448\u0430\u0435\u043c \u0432\u0441\u0435\u0433\u043e \u0441\u043b\u043e\u043d\u0430 \u0431\u0435\u0437 \u043e\u0441\u0442\u0430\u0442\u043a\u0430.<br \/>  \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 `$` \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043a\u043e\u0434\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 Svelte, \u0443 \u043c\u0435\u043d\u044f \u0432\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430 SPA \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u0430 \u0432 \u0444\u0430\u0439\u043b \u00abbusiness-process.js\u00bb, \u0442\u0430\u043c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0440\u0435\u0448\u0430\u0442\u044c \u043d\u0435 \u043d\u0430\u0434\u043e, \u043d\u043e \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u0438\u0437 \u00abbusiness-process.js\u00bb \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 App.svelte \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<br \/>  \u041f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433\u0430 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f App.svelte \u0441 \u0442\u0430\u043a\u0438\u043c \u043a\u043e\u0434\u043e\u043c:  <\/p>\n<pre><code class=\"javascript\"> &lt;script&gt;     jQuery(function ($) {          function loadStartScreen() {         loadPaging(0, settings.capacity);         loadPage(0, settings.capacity);         }          loadStartScreen();          async function search(sample) {             $('#paging').empty();             $.ajax({                 type: &quot;GET&quot;,                 url: `\/api\/v1\/task\/search\/${sample}\/`,                 dataType: &quot;json&quot;,                 success: renderTasks,                 error: function (jqXHR, textStatus, errorThrown) {                 },                 timeout: 500,             });         }          $(&quot;#search&quot;).submit(async function (event) {             event.preventDefault();             const sample = $(&quot;#sample&quot;).val();              if (sample) {                 search(sample);             }             if (!sample) {                 loadStartScreen();             }         });     }); &lt;\/script&gt;  &lt;div class=&quot;container&quot;&gt;     &lt;h1&gt;\u0422\u0440\u0435\u043a\u0435\u0440 \u0440\u0430\u0431\u043e\u0447\u0438\u0445 \u0437\u0430\u0434\u0430\u043d\u0438\u0439&lt;\/h1&gt;      &lt;form class=&quot;form-horizontal&quot; id=&quot;search&quot;&gt;         &lt;div class=&quot;form-group&quot;&gt;             &lt;label class=&quot;control-label col-sm-2&quot; for=&quot;sample&quot;&gt;             \u041f\u043e\u0438\u0441\u043a             &lt;\/label&gt;             &lt;div class=&quot;col-sm-10&quot;&gt;                 &lt;input id=&quot;sample&quot; class=&quot;form-control &quot; type=&quot;search&quot;                  placeholder=&quot;\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043d\u0430\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438&quot;                   autofocus autocomplete=&quot;on&quot; \/&gt;             &lt;\/div&gt;         &lt;\/div&gt;     &lt;\/form&gt;     &lt;div id=&quot;taskList&quot;&gt;     &lt;\/div&gt;     &lt;div id=&quot;paging&quot;&gt;     &lt;\/div&gt; <\/code><\/pre>\n<p>  \u041a\u043e\u0434 \u0440\u0430\u0431\u043e\u0447\u0438\u0439, \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e Svelte \u0435\u0449\u0451 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u043d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 Svelte \u0442\u043e\u043b\u044c\u043a\u043e \u0433\u0435\u043d\u0435\u0440\u0438\u0442 HTML \u043a\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 <\/p>\n<pre><code class=\"xml\">&lt;body&gt;<\/code><\/pre>\n<p>  \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f `$` \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u0432 \u0432\u044b\u0437\u043e\u0432\u0435 <\/p>\n<pre><code class=\"javascript\">jQuery(function ($) {}); <\/code><\/pre>\n<p> \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u0430 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u0438\u0439 \u043d\u0435\u0442.<br \/>  \u0421\u0432\u044f\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e sample \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c value \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 input \u0441 id=\u00absample\u00bb:  <\/p>\n<pre><code class=\"javascript\">                 &lt;input id=&quot;sample&quot; class=&quot;form-control &quot; type=&quot;search&quot;                  placeholder=&quot;\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043d\u0430\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438&quot;                  autofocus autocomplete=&quot;on&quot;                  bind:value={sample}                  \/&gt; <\/code><\/pre>\n<p>  \u041f\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044e submit \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 form \u0441 id=\u00absearch\u00bb \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u0434:  <\/p>\n<pre><code class=\"javascript\">         $(&quot;#search&quot;).submit(async function (event) {             event.preventDefault();              if (sample) {                 search(sample);             }             if (!sample) {                 loadStartScreen();             }         }); <\/code><\/pre>\n<p>  \u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u043e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0435 Svelte, \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c:  <\/p>\n<pre><code class=\"javascript\"> &lt;script&gt;     async function svelteSearch(event) {         event.preventDefault();         if (sample) {             search(sample);         }         if (!sample) {             loadStartScreen();         }     } &lt;\/script&gt; &lt;form class=&quot;form-horizontal&quot; id=&quot;search&quot; on:submit=&quot;{svelteSearch}&quot;&gt; &lt;\/form&gt; <\/code><\/pre>\n<p>  \u041a\u043e\u0434 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u043d\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f search() \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0430 \u0432 \u0437\u043e\u043d\u0435 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 jQuery(function ($) {}); \u0438 \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u043c scope \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043d\u0435 \u0432\u0438\u0434\u043d\u043e. \u0412\u044b\u043d\u043e\u0441\u0438\u043c search() \u0432 \u043e\u0434\u0438\u043d scope \u0441 svelteSearch(event):  <\/p>\n<pre><code class=\"javascript\"> &lt;script&gt;     function loadStartScreen() {         loadPaging(0, settings.capacity);         loadPage(0, settings.capacity);     }      let sample = '';      jQuery(function ($) {         loadStartScreen();     });     async function search(sample) {         $('#paging').empty();         $.ajax({             type: &quot;GET&quot;,             url: `\/api\/v1\/task\/search\/${sample}\/`,             dataType: &quot;json&quot;,             success: renderTasks,             error: function (jqXHR, textStatus, errorThrown) {             },             timeout: 500,         });     }     async function svelteSearch(event) {         event.preventDefault();         if (sample) {             search(sample);         }         if (!sample) {             loadStartScreen();         }     } &lt;\/script&gt; <\/code><\/pre>\n<p>  \u0422\u0430\u043a\u043e\u0439 \u043a\u043e\u0434 \u043d\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f:  <\/p>\n<pre><code class=\"javascript\"> [!] (plugin svelte) ValidationError: $ is an illegal variable name <\/code><\/pre>\n<p>  \u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c? \u0413\u0443\u0433\u043b\u0438\u0442\u044c! \u00absvelte how to import jquery\u00bb: <a href=\"https:\/\/stackoverflow.com\/a\/58883964\/3066487\" rel=\"nofollow\">How do I use jQuery in Svelte<\/a><br \/>  \u041e\u0442\u0432\u0435\u0442 \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u043d\u044b\u0439 \u043a\u0430\u043a \u00ab\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439\u00bb \u043c\u043d\u0435 \u043d\u0435 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u0441\u044f, \u0447\u0442\u043e \u0431\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u044e\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 (\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0439 *.js), \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c import *, \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0432 rollup.config.js \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c external:  <\/p>\n<pre><code class=\"javascript\"> export default { external []}; <\/code><\/pre>\n<p>  \u0412\u0442\u043e\u0440\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441 window.$ \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044c\u0448\u0435 \u0442\u0435\u043b\u043e\u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0439 \u0438 \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u043c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f jQuery, \u0442\u043e \u044d\u0442\u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 \u0434\u043b\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0438 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u043e \u0441 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043b\u043e\u0436\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0442\u043e\u043c.<br \/>  \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u043a\u043e\u043f\u0438-\u043f\u0430\u0441\u0442 \u0441\u043e \u0441\u0442\u0435\u043a-\u043e\u0432\u0435\u0440-\u0444\u043b\u043e\u0443:  <\/p>\n<pre><code class=\"javascript\"> &lt;script&gt;     function loadStartScreen() {         loadPaging(0, settings.capacity);         loadPage(0, settings.capacity);     }     jQuery(function ($) {         loadStartScreen();     });      let sample = '';      async function search(sample) {         window.$('#paging').empty();         window.$.ajax({             type: &quot;GET&quot;,             url: `\/api\/v1\/task\/search\/${sample}\/`,             dataType: &quot;json&quot;,             success: renderTasks,             error: function (jqXHR, textStatus, errorThrown) {             },             timeout: 500,         });     }     async function svelteSearch(event) {         event.preventDefault();         if (sample) {             search(sample);         }         if (!sample) {             loadStartScreen();         }     } &lt;\/script&gt;  &lt;div class=&quot;container&quot;&gt;     &lt;h1&gt;\u0422\u0440\u0435\u043a\u0435\u0440 \u0440\u0430\u0431\u043e\u0447\u0438\u0445 \u0437\u0430\u0434\u0430\u043d\u0438\u0439&lt;\/h1&gt;     &lt;form class=&quot;form-horizontal&quot; id=&quot;search&quot;     on:submit=&quot;{svelteSearch}&quot;&gt;         &lt;div class=&quot;form-group&quot;&gt;             &lt;label class=&quot;control-label col-sm-2&quot; for=&quot;sample&quot;&gt;             \u041f\u043e\u0438\u0441\u043a             &lt;\/label&gt;             &lt;div class=&quot;col-sm-10&quot;&gt;                 &lt;input id=&quot;sample&quot; class=&quot;form-control &quot; type=&quot;search&quot;                  placeholder=&quot;\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043d\u0430\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438&quot;                  autofocus autocomplete=&quot;on&quot;                  bind:value={sample}                  \/&gt;             &lt;\/div&gt;         &lt;\/div&gt;     &lt;\/form&gt; \/\/ ..skip.. &lt;\/div&gt; <\/code><\/pre>\n<p>  \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442:  <\/p>\n<pre><code class=\"javascript\">     jQuery(function ($) {         loadStartScreen();     }); <\/code><\/pre>\n<p>  \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443:  <\/p>\n<pre><code class=\"xml\"> &lt;svelte:window on:load = {loadStartScreen} \/&gt; <\/code><\/pre>\n<p>  \u0413\u043e\u0442\u043e\u0432\u043e.<br \/>  \u0412 <a href=\"https:\/\/v2.svelte.dev\/guide\" rel=\"nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Svelte<\/a>, \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438:  <\/p>\n<blockquote><p>&lt;svelte:document&gt;<br \/>  The &lt;svelte:document&gt; tag, just like &lt;svelte:window&gt;, gives you a convenient way to declaratively add event listeners to the document object. This is useful for listening to events that don&#8217;t fire on window, such as mouseenter and mouseleave.  <\/p><\/blockquote>\n<p>  \u041d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0438\u043c\u0435\u0435\u043c:  <\/p>\n<pre><code class=\"javascript\"> [!] (plugin svelte) ParseError: Valid &lt;svelte:...&gt; tag names are svelte:head, svelte:options, svelte:window, svelte:body, svelte:self or svelte:component <\/code><\/pre>\n<p>  \u0422\u043e \u0435\u0441\u0442\u044c <a href=\"https:\/\/github.com\/sveltejs\/svelte\/issues\/3310\" rel=\"nofollow\">\u0442\u0435\u0433 \u0432\u044b\u043f\u0438\u043b\u0438\u043b\u0438 \u0438\u0437 \u043a\u043e\u0434\u0430<\/a>, \u043d\u043e \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0437\u0430\u0431\u044b\u043b\u0438, \u043a \u043c\u043e\u0435\u043c\u0443 \u0438\u0437\u0443\u043c\u043b\u0435\u043d\u0438\u044e Svelte \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043d\u0435 \u0431\u043e\u0433\u0438, \u0430 \u043b\u044e\u0434\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0442\u043e\u0436\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0447\u0442\u043e \u0442\u043e \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0442\u043e\u043c \u0438 \u0437\u0430\u0431\u044b\u0442\u044c.<br \/>  \u041a\u0430\u043a \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c jQuery \u0432 Svelte \u043a\u043e\u0434 \u043c\u0430\u043b\u043e\u0439 \u043a\u0440\u043e\u0432\u044c\u044e \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u043b.<\/p>\n<h2>\u041a\u0430\u043a \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b Svelte \u0432 JS \u043a\u043e\u0434.<\/h2>\n<p>  \u0412\u044b\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u043f\u0430\u043f\u043a\u0443 \u043f\u0443\u0441\u0442\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043a\u0430\u043a <a href=\"https:\/\/ru.svelte.dev\/blog\/svelte-for-new-developers\" rel=\"nofollow\">\u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0432 \u0431\u043b\u043e\u0433\u0435 Svelte<\/a> (\u043f\u043e \u043f\u0443\u0442\u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c Node.js). \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043c \u0441\u043a\u0430\u0447\u0430\u043d\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<br \/>  \u0424\u0430\u0439\u043b\u044b \u0438\u0437 \u00abpublic\u00bb \u043f\u0435\u0440\u0435\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c \u0442\u0443\u0434\u0430 \u0433\u0434\u0435 \u0443 \u043d\u0430\u0441 \u043b\u0435\u0436\u0430\u0442 \u0444\u0430\u0439\u043b\u044b \u0434\u043b\u044f \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u043c (\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f), \u0443 \u043c\u0435\u043d\u044f \u044d\u0442\u043e \u00abpublic\/assets\/Site\u00bb, \u0441\u0442\u0438\u043b\u0438 \u0438\u0437 \u00abglobal.css\u00bb \u043c\u043d\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b, \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u044f \u043d\u0435 \u043f\u0435\u0440\u0435\u043d\u0451\u0441.<br \/>  \u0424\u0430\u0439\u043b \u00abpublic\/index.html\u00bb, \u044f \u043f\u0435\u0440\u0435\u043b\u043e\u0436\u0438\u043b \u0442\u0443\u0434\u0430 \u0433\u0434\u0435 \u0441\u0435\u0440\u0432\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u0431\u0440\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f view: \u00abview\/Site\/index.html\u00bb.<br \/>  \u0424\u0430\u0439\u043b\u044b \u0438\u0437 \u00absrc\u00bb \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0444\u0440\u043e\u043d\u0442\u044d\u043d\u0434\u0430 \u2014 \u00absrc\/frontend\u00bb.<br \/>  \u0424\u0430\u0439\u043b\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0444\u0440\u043e\u043d\u0442\u044d\u043d\u0434\u0430:  <\/p>\n<ul>\n<li>rollup.config.js<\/li>\n<li>package-lock.json<\/li>\n<li>package.json<\/li>\n<\/ul>\n<p>  \u044f \u043f\u0435\u0440\u0435\u043b\u043e\u0436\u0438\u043b \u0432 \u043a\u043e\u0440\u0435\u043d\u044c, \u0442\u0430\u043c \u0438\u0445 \u043f\u043e\u0434\u0445\u0432\u0430\u0442\u0438\u043b\u0430 IDE \u0438 \u043e\u0431\u043e \u0432\u0441\u0451 \u043f\u043e\u0437\u0430\u0431\u043e\u0442\u0438\u043b\u0430\u0441\u044c (\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438).<br \/>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432 Svelte \u0432 JS.<br \/>  \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c rollup.config.js \u0438 \u043c\u0435\u043d\u044f\u0435\u043c \u043f\u0443\u0442\u0438 \u043a \u0444\u0430\u0439\u043b\u0430\u043c:  <\/p>\n<pre><code class=\"javascript\"> export default { \tinput: 'src\/frontend\/main.js', \toutput: { \t\tsourcemap: true, \t\tformat: 'iife', \t\tname: 'app', \t\tfile: 'public\/assets\/Site\/bundle.js' \t}, \tplugins: [ \t\tsvelte({ \t\t\tdev: !production, \t\t\tcss: css =&gt; { \t\t\t\tcss.write('public\/assets\/Site\/bundle.css'); \t\t\t} \t\t}), <\/code><\/pre>\n<p>  \u0412\u043e\u0442 \u0438 \u0432\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0435\u0439 Svelte \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442.<br \/>  \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u0445 \u0444\u0440\u043e\u043d\u0442\u044d\u043d\u0434\u0430 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043d\u0430 \u043b\u0435\u0442\u0443:  <\/p>\n<pre><code class=\"dos\">npm install npm run dev <\/code><\/pre>\n<p>  <\/p>\n<h4>\u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435<\/h4>\n<p>  \u041e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f (\u0432 \u043c\u043e\u0451\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u00abview\/Site\/index.html\u00bb):  <\/p>\n<ul>\n<li> \u0412\u0441\u0451 \u0447\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u0433\u0430 body \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043c \u0432 App.svelte<\/li>\n<li>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432<br \/> \n<pre><code class=\"xml\"> &lt;head&gt;   &lt;link rel='stylesheet' href='\/assets\/Site\/bundle.css'&gt; &lt;\/head&gt; <\/code><\/pre>\n<p>  <\/li>\n<li>\u041f\u043e\u0441\u043b\u0435 \u0442\u0435\u0433\u0430 body \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u00ab\u0441\u0441\u044b\u043b\u043a\u0443\u00bb \u043d\u0430 \u0444\u0430\u0439\u043b \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438:<br \/> \n<pre><code class=\"xml\"> &lt;body&gt; &lt;\/body&gt; &lt;script src='\/assets\/Site\/bundle.js'&gt;&lt;\/script&gt; <\/code><\/pre>\n<p>  <\/li>\n<\/ul>\n<p>  <a href=\"https:\/\/github.com\/SbWereWolf\/activeprofi.git\" rel=\"nofollow\">\u041a\u043e\u0434 \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>.<br \/>  \u0414\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0442\u043a\u0430\u0437\u0430 \u043e\u0442 jQuery \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0435\u0449\u0451 \u0434\u0430\u043b\u0435\u043a\u043e, \u043d\u043e \u0441\u0442\u0430\u0442\u044c\u044f \u0431\u044b\u043b\u0430 \u043d\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c.<br \/>  \u041d\u0430 \u0425\u0430\u0431\u0440\u0435 \u0443\u0436\u0435 \u0431\u044b\u043b\u0438 \u0441\u0442\u0430\u0442\u044c\u0438 \u043e \u0442\u043e\u043c \u043a\u0430\u043a \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e Svelte, \u043d\u043e \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0432\u0435\u0449\u0438 \u0435\u0449\u0451 \u043d\u0438 \u043a\u0442\u043e \u043d\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u043b \ud83d\ude42<br \/>  \u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435.<\/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\/post\/486646\/\"> https:\/\/habr.com\/ru\/post\/486646\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/486646\/\">\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442.<br \/>  \u042f \u0431\u044d\u043a\u044d\u043d\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0438 \u0444\u0440\u043e\u043d\u0442\u044d\u043d\u0434 \u0437\u0430\u0434\u0430\u0447\u0438 \u0440\u0435\u0448\u0430\u044e \u043a\u0430\u043a \u0443\u043c\u0435\u044e, \u0442\u043e \u0435\u0441\u0442\u044c \u043d\u0430 jQuery, \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0432 2015, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u0441\u0435\u0439\u0447\u0430\u0441. \u041d\u043e \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 Vue \u0438 React \u044d\u0442\u043e \u0443\u0436\u0435 \u043d\u0435 \u043a\u0430\u043c\u0438\u043b\u044c\u0444\u043e. \u0418\u0437 \u043b\u044e\u0431\u0432\u0438 \u043a \u043e\u0441\u043e\u0431\u043e\u043c\u0443 \u043f\u0443\u0442\u0438 \u044f \u0440\u0435\u0448\u0438\u043b \u043e\u0441\u0432\u0430\u0438\u0432\u0430\u0442\u044c \u043d\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u0439 \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u0430\u043c\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 Angular\/React\/Vue, \u044f \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/ru.svelte.dev\/\" rel=\"nofollow\">Svelte<\/a>.<br \/>  \u0421\u0434\u0435\u043b\u0430\u0432 \u043f\u0430\u0440\u0443 \u0443\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u0439 \u0438\u0437 \u0443\u0447\u0435\u0431\u043d\u0438\u043a\u0430, \u044f \u0440\u0435\u0448\u0438\u043b \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044f \u0432\u0437\u044f\u043b \u043e\u0434\u043d\u043e \u0438\u0437 \u0441\u0432\u043e\u0438\u0445 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0445 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0445 \u0437\u0430\u0434\u0430\u043d\u0438\u0439. \u041f\u043e \u0437\u0430\u0434\u0430\u043d\u0438\u044e \u043d\u0430\u0434\u043e \u0431\u044b\u043b\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0441\u043f\u0438\u0441\u043a\u0430 \u0437\u0430\u0434\u0430\u0447 \u0438 \u043e\u0434\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430, CRUD \u043d\u0435 \u043d\u0443\u0436\u0435\u043d, \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430 \u043a\u0430\u043a SPA, \u0438 \u0432\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 DOM \u0432\u0435\u0434\u0451\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 jQuery, \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u043d\u044b jQuery \u043d\u0430 Svelte \u044d\u0442\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u043a\u0430\u043d\u0434\u0438\u0434\u0430\u0442.<br \/>  \u041d\u0438\u0436\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u0441\u0430\u043c\u044b\u0445 \u043f\u0435\u0440\u0432\u044b\u0445 \u043f\u0440\u0435\u043f\u044f\u0442\u0441\u0442\u0432\u0438\u044f\u0445 \u043d\u0430 \u044d\u0442\u043e\u043c \u043f\u0443\u0442\u0438 \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u043e \u0442\u043e\u043c \u043a\u0430\u043a \u0438\u0445 \u043f\u0440\u0435\u043e\u0434\u043e\u043b\u0435\u0442\u044c.<br \/>  <a href=\"https:\/\/ru.svelte.dev\/tutorial\" rel=\"nofollow\">\u0423\u0447\u0435\u0431\u043d\u0438\u043a \u043f\u043e Svelte<\/a> \u043e\u0447\u0435\u043d\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0439 \u0438 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u044b\u0439, \u043d\u043e \u043a\u0430\u043a \u0432\u043d\u0435\u0434\u0440\u0438\u0442\u044c Svelte \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0432\u0435\u0434\u044c Svelte \u044d\u0442\u043e \u043d\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043a\u0430\u043a jQuery, \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440, \u0442\u043e \u0435\u0441\u0442\u044c \u043a\u043e\u0434 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432 Svelte \u043d\u0430\u0434\u043e \u043a\u0430\u043a\u0438\u043c \u0442\u043e \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043e\u0442\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 JS.<br \/>  \u0414\u0440\u0443\u0433\u0438\u043c \u043a\u0430\u043c\u043d\u0435\u043c \u043f\u0440\u0435\u0442\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u0431\u044b\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <\/p>\n<pre><code class=\"javascript\">$<\/code><\/pre>\n<p>, \u0432 Svelte \u044d\u0442\u043e \u0437\u0430\u0440\u0435\u0437\u0435\u0440\u0432\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u0438\u043c\u0432\u043e\u043b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 \u043a\u043e\u0434\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d Svelte \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043e\u0448\u0438\u0431\u043a\u0435:   <\/p>\n<pre><code class=\"javascript\"> [!] (plugin svelte) ValidationError: $ is an illegal variable name <\/code><\/pre>\n<p>  <\/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-298078","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/298078","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=298078"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/298078\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=298078"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=298078"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=298078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}