{"id":287422,"date":"2018-08-16T14:08:55","date_gmt":"2018-08-16T10:08:55","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=287422"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=287422","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 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f VanillaJS"},"content":{"rendered":"\n
\n

\u0417\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439\u0442\u0435. \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0410\u043b\u0435\u043a\u0441\u0430\u043d\u0434\u0440 \u0438 \u044f Vanilla ES5.1 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 2018 \u0433\u043e\u0434\u0443.<\/p>\n

<\/p>\n

\u0414\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0442\u0432\u0435\u0442\u043e\u043c \u043d\u0430 \u0441\u0442\u0430\u0442\u044c\u044e-\u043e\u0442\u0432\u0435\u0442 \u00ab\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\u00bb<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0430 \u043d\u0430\u043c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c SvelteJS.<\/p>\n

<\/p>\n

\u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u043e\u0434\u0438\u043d \u0438\u0437 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432, \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u043a\u0440\u043e\u043c\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0422\u0435\u043c \u0431\u043e\u043b\u0435\u0435, \u0447\u0442\u043e \u0441\u0430\u043c GitHub<\/strong> \u0437\u0430\u044f\u0432\u0438\u043b, \u0447\u0442\u043e \u043e\u043d\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0431\u0435\u0437 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432<\/a>.<\/p>\n

<\/p>\n

\u0414\u0435\u043b\u0430\u0442\u044c \u0431\u0443\u0434\u0435\u043c \u0432\u0441\u0451 \u0442\u043e\u0442 \u0436\u0435 \u0438\u043d\u043f\u0443\u0442, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0449\u0438\u0439 \u043f\u043b\u0430\u0448\u043a\u0443 GitHub-\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f:<\/p>\n

<\/p>\n

<\/p>\n

<\/a> <\/p>\n

Disclaimer<\/b><\/p>\n
\n

\u0414\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u0442 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0434\u0436\u0430\u0432\u0430\u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0438 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<\/div>\n<\/div>\n

<\/p>\n

\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430<\/h2>\n

<\/p>\n

\u0427\u0442\u043e-\u043b\u0438\u0431\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0438 \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c index.html<\/strong> \u0441\u043e \u0432\u0441\u0435\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0439 \u0432\u0451\u0440\u0441\u0442\u043a\u043e\u0439:<\/p>\n

<\/p>\n

index.html<\/b><\/p>\n
\n
<!doctype html> <html> <head>     <meta charset='utf-8'>     <title>GitHub users<\/title>      <link rel='stylesheet' type='text\/css' href='index.css'> <\/head> <body>  <div id='root'><\/div>  <div id='templates' style='display:none;'>     <div data-template-id='username_input'>         <input type='text' data-onedit='onNameEdit' placeholder='GitHub username'>     <\/div>      <div data-template-id='usercard' class='x-user-card'>         <div class='background'><\/div>         <div class='avatar-container'>             <a class='avatar' data-href='userUrl'>                 <img data-src='avatarImageUrl'>             <\/a>         <\/div>         <div class='name' data-text='userName'><\/div>         <div class='content'>             <a class='block' data-href='reposUrl'>                 <b data-text='reposCount'><\/b>                 <span>Repos<\/span>             <\/a>             <a class='block' data-href='gistsUrl'>                 <b data-text='gistsCount'><\/b>                 <span>Gists<\/span>             <\/a>             <a class='block' data-href='followersUrl'>                 <b data-text='followersCount'><\/b>                 <span>Followers<\/span>             <\/a>         <\/div>     <\/div>      <div data-template-id='error'><b data-text='status'><\/b>: <span data-text='text'><\/span><\/div>     <div data-template-id='loading'>Loading...<\/div> <\/div>  <\/body> <\/html><\/code><\/pre>\n<\/div>\n<\/div>\n
  <\/p>\n
\u0415\u0441\u043b\u0438 \u043a\u043e\u043c\u0443-\u043d\u0438\u0431\u0443\u0434\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0435\u043d CSS<\/a>, \u0435\u0433\u043e \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>.<\/p>\n
  <\/p>\n
\u0421\u0442\u0438\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0441\u0430\u043c\u044b\u0435 \u043e\u0431\u044b\u0447\u043d\u044b\u0435, \u043d\u0438\u043a\u0430\u043a\u0438\u0445 css-modules \u0438 \u043f\u0440\u043e\u0447\u0435\u0433\u043e scope’\u0438\u043d\u0433\u0430. \u041c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u043c\u0438\u0441\u044f \u0441 x-<\/strong> \u0438 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u043c, \u0447\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0442\u0430\u043a\u0438\u0445 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. \u041b\u044e\u0431\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u043f\u0438\u0448\u0435\u043c \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0438\u0445.<\/p>\n
  <\/p>\n
\u041f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430<\/h2>\n
  <\/p>\n
\u0412\u0441\u0451, \u0447\u0442\u043e \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043e\u0442 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u2014 debounced-\u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0435\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0430 \u0442\u0430\u043a \u0436\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u0432\u043e\u0434\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u043e \u043d\u0435\u043c\u0443 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u043d\u0434\u0438\u043a\u0430\u0446\u0438\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n
  <\/p>\n
in_package('GitHubUsers', function() {  this.provide('UserNameInput', UserNameInput); function UserNameInput(options) {     var onNameInput = options.onNameInput,         onNameChange = options.onNameChange;      var element = GitHubUsers.Dom.instantiateTemplate('username_input');      var debouncedChange = GitHubUsers.Util.delay(1000, function() {         onNameChange(this.value);     });      GitHubUsers.Dom.binding(element, {         onNameEdit: function() {             onNameInput(this.value);              debouncedChange.apply(this, arguments);         }     });      this.getElement = function() { return element; }; }  });<\/code><\/pre>\n
  <\/p>\n
\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0437\u0430\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u0442\u0438\u043b\u0438\u0442\u0430\u0440\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043f\u0440\u043e\u0439\u0434\u0451\u043c\u0441\u044f \u043f\u043e \u043d\u0438\u043c:<\/p>\n
  <\/p>\n
\u0422\u0430\u043a \u043a\u0430\u043a \u0443 \u043d\u0430\u0441 \u043d\u0435\u0442 webpack<\/code>, \u043d\u0435\u0442 CommonJS<\/code>, \u043d\u0435\u0442 RequireJS<\/code>, \u043c\u044b \u0432\u0441\u0451 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/p>\n
  <\/p>\n
packages.js<\/b><\/p>\n
\n
window.in_package = function(path, fun) {     path = path.split('.');      var obj = path.reduce(function(acc, p) {         var o = acc[p];          if (!o) {             o = {};             acc[p] = o;         }          return o;     }, window);      fun.call({         provide: function(name, value) {             obj[name] = value;         }     }); };<\/code><\/pre>\n<\/div>\n<\/div>\n
  <\/p>\n
\u0424\u0443\u043d\u043a\u0446\u0438\u044f instantiateTemplate()<\/code> \u0432\u044b\u0434\u0430\u0451\u0442 \u043d\u0430\u043c \u0433\u043b\u0443\u0431\u043e\u043a\u0443\u044e \u043a\u043e\u043f\u0438\u044e DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 consumeTemplates()<\/code> \u0438\u0437 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 #templates<\/code> \u0432 \u043d\u0430\u0448\u0435\u043c index.html<\/code>.<\/p>\n
  <\/p>\n
templates.js<\/b><\/p>\n
\n
in_package('GitHubUsers.Dom', function() {  var templatesMap = new Map();  this.provide('consumeTemplates', function(containerEl) {     var templates = containerEl.querySelectorAll('[data-template-id]');      for (var i = 0; i < templates.length; i++) {         var templateEl = templates[i],             templateId = templateEl.getAttribute('data-template-id');          templatesMap.set(templateId, templateEl);          templateEl.parentNode.removeChild(templateEl);     }      if (containerEl.parentNode) containerEl.parentNode.removeChild(containerEl); });  this.provide('instantiateTemplate', function(templateId) {     var templateEl = templatesMap.get(templateId);      return templateEl.cloneNode(true); });  });<\/code><\/pre>\n<\/div>\n<\/div>\n
  <\/p>\n
\u0424\u0443\u043d\u043a\u0446\u0438\u044f Dom.binding()<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043e\u043f\u0446\u0438\u0438, \u0438\u0449\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0435 data-\u0430\u0442\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0438 \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u0435\u0442 \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u043d\u0443\u0436\u043d\u044b\u0435 \u043d\u0430\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0430\u0442\u0442\u0440\u0438\u0431\u0443\u0442\u0430 data-element<\/code> \u043e\u043d\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0435 \u043a \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0443 \u0441\u043e \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u043d\u0430 \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0434\u043b\u044f \u0430\u0442\u0442\u0440\u0438\u0431\u0443\u0442\u0430 data-onedit<\/code> \u043d\u0430\u0432\u0435\u0448\u0438\u0432\u0430\u0435\u0442 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 keyup<\/code> \u0438 change<\/code> \u0441 \u0445\u044d\u043d\u0434\u043b\u0435\u0440\u043e\u043c \u0438\u0437 \u043e\u043f\u0446\u0438\u0439.<\/p>\n
  <\/p>\n
binding.js<\/b><\/p>\n
\n
in_package('GitHubUsers.Dom', function() {  this.provide('binding', function(element, options) {     options = options || {};      var binding = {};      handleAttribute('data-element', function(el, name) {         binding[name] = el;     });      handleAttribute('data-text', function(el, key) {         var text = options[key];         if (typeof text !== 'string' && typeof text !== 'number') return;          el.innerText = text;     });      handleAttribute('data-src', function(el, key) {         var src = options[key];         if (typeof src !== 'string') return;          el.src = src;     });      handleAttribute('data-href', function(el, key) {         var href = options[key];         if (typeof href !== 'string') return;          el.href = href;     });      handleAttribute('data-onedit', function(el, key) {         var handler = options[key];         if (typeof handler !== 'function') return;          el.addEventListener('keyup', handler);         el.addEventListener('change', handler);     });      function handleAttribute(attribute, fun) {         var elements = element.querySelectorAll('[' + attribute + ']');         for (var i = 0; i < elements.length; i++) {             var el = elements[i],                 attributeValue = el.getAttribute(attribute);              fun(el, attributeValue);         }     }      return binding; });  });<\/code><\/pre>\n<\/div>\n<\/div>\n
  <\/p>\n
\u041d\u0443 \u0438 delay<\/code> \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u043d\u0443\u0436\u043d\u044b\u043c \u043d\u0430\u043c \u0432\u0438\u0434\u043e\u043c debounce’\u0430:<\/p>\n
  <\/p>\n
debounce.js<\/b><\/p>\n
\n
in_package('GitHubUsers.Util', function() {  this.provide('delay', function(timeout, fun) {     var timeoutId = 0;      return function() {         var that = this,             args = arguments;          if (timeoutId) clearTimeout(timeoutId);          timeoutId = setTimeout(function() {             timeoutId = 0;              fun.apply(that, args);         }, timeout);     }; });  });<\/code><\/pre>\n<\/div>\n<\/div>\n
  <\/p>\n
\u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/h2>\n
  <\/p>\n
\u0423 \u043d\u0435\u0451 \u043d\u0435\u0442 \u043b\u043e\u0433\u0438\u043a\u0438, \u0442\u043e\u043b\u044c\u043a\u043e \u0448\u0430\u0431\u043b\u043e\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u043c\u0438:<\/p>\n
  <\/p>\n
in_package('GitHubUsers', function() {  this.provide('UserCard', UserCard); function UserCard() {     var element = GitHubUsers.Dom.instantiateTemplate('usercard');      this.getElement = function() { return element; };      this.setData = function(data) {         GitHubUsers.Dom.binding(element, data);     }; }  });<\/code><\/pre>\n
  <\/p>\n
\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0442\u043e\u043b\u044c\u043a\u043e querySelectorAll<\/code> \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043c\u0435\u043d\u044f\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e, \u043d\u043e \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u043c\u044b \u043c\u0438\u0440\u0438\u043c\u0441\u044f \u0441 \u044d\u0442\u0438\u043c. \u0415\u0441\u043b\u0438 \u0432\u0434\u0440\u0443\u0433 \u0432\u044b\u044f\u0441\u043d\u0438\u0442\u0441\u044f, \u0447\u0442\u043e \u0438\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u0443 \u043d\u0430\u0441 \u0432\u0441\u0451 \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442 \u2014 \u0431\u0443\u0434\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0441\u043e\u0445\u0440\u0430\u043d\u0451\u043d\u043d\u044b\u0435 data-element<\/code>. \u0418\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0434\u0440\u0443\u0433\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0431\u0438\u043d\u0434\u0438\u043d\u0433\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0430\u043c\u0430 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0434\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. \u0418\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442 \u043e\u043f\u0446\u0438\u0439 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u043f\u043e\u0442\u043e\u043a \u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439, \u0447\u0442\u043e\u0431\u044b \u0431\u0438\u043d\u0434\u0438\u043d\u0433 \u043c\u043e\u0433 \u0437\u0430 \u043d\u0438\u043c\u0438 \u0441\u043b\u0435\u0434\u0438\u0442\u044c.<\/p>\n
  <\/p>\n
\u0418\u043d\u0434\u0438\u043a\u0430\u0446\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \/ \u043e\u0448\u0438\u0431\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/h2>\n
  <\/p>\n
\u041c\u044b \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u043c, \u0447\u0442\u043e \u044d\u0442\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u0430\u043a \u0436\u0435 \u0431\u0443\u0434\u0443\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u0443\u0434\u0443\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0438 \u0448\u0430\u043d\u0441\u044b, \u0447\u0442\u043e \u0443 \u043d\u0438\u0445 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0441\u0432\u043e\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u043a\u0440\u0430\u0439\u043d\u0435 \u043c\u0430\u043b\u044b (\u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f), \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u043d\u0438\u0445 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u043c\u0438 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n
  <\/p>\n
\u0417\u0430\u043f\u0440\u043e\u0441 \u0434\u0430\u043d\u043d\u044b\u0445<\/h2>\n
  <\/p>\n
\u0421\u0434\u0435\u043b\u0430\u0435\u043c \u043a\u043b\u0430\u0441\u0441 \u0441 \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0447\u0435\u0433\u043e \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u0434\u043c\u0435\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043c\u043e\u043a\u043e\u043c\/\u0434\u0440\u0443\u0433\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439:<\/p>\n
  <\/p>\n
in_package('GitHubUsers', function() {  this.provide('GitHubApi', GitHubApi); function GitHubApi() {     this.getUser = function(options, callback) {         var url = 'https:\/\/api.github.com\/users\/' + options.userName;          return GitHubUsers.Http.doRequest(url, function(error, data) {             if (error) {                 if (error.type === 'not200') {                     if (error.status === 404) callback(null, null);                     else callback({ status: error.status, message: data && data.message });                 } else {                     callback(error);                 }                 return;             }              \/\/ TODO: validate `data` against schema             callback(null, data);         });     }; }  });<\/code><\/pre>\n
  <\/p>\n
\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0431\u0451\u0440\u0442\u043a\u0430 \u043d\u0430\u0434 XMLHttpRequest<\/strong>. \u041c\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c fetch<\/code> \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u0435\u0440\u044b\u0432\u0430\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u0430 \u0442\u0430\u043a \u0436\u0435 \u043d\u0435 \u0445\u043e\u0442\u0438\u043c \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u043f\u0440\u043e\u043c\u0438\u0441\u0430\u043c\u0438 \u043f\u043e \u0442\u043e\u0439 \u0436\u0435 \u043f\u0440\u0438\u0447\u0438\u043d\u0435.<\/p>\n
  <\/p>\n
ajax.js<\/b><\/p>\n
\n
in_package('GitHubUsers.Http', function() {  this.provide('doRequest', function(options, callback) {     var url;      if (typeof options === \"string\") {         url = options;         options = {};     } else {         if (!options) options = {};         url = options.url;     }      var method = options.method || \"GET\",         headers = options.headers || [],         body = options.body,         dataType = options.dataType || \"json\",         timeout = options.timeout || 10000;      var old_callback = callback;     callback = function() {         callback = function(){}; \/\/ ignore all non-first calls         old_callback.apply(this, arguments);     };      var isAborted = false;      var request = new XMLHttpRequest();      \/\/ force timeout     var timeoutId = setTimeout(function() {         timeoutId = 0;         if (!isAborted) { request.abort(); isAborted = true; }         callback({msg: \"fetch_timeout\", request: request, opts: options});     }, timeout);      request.addEventListener(\"load\", function() {         var error = null;          if (request.status !== 200) {             error = { type: 'not200', status: request.status };         }          if (typeof request.responseText === \"string\") {             if (dataType !== \"json\") {                 callback(error, request.responseText);                 return;             }              var parsed;              try {                 parsed = JSON.parse(request.responseText);             } catch (e) {                 callback(e);                 return;             }              if (parsed) {                 callback(error, parsed);             } else {                 callback({msg: \"bad response\", request: request});             }         } else {             callback({msg: \"no response text\", request: request});         }     });     request.addEventListener(\"error\", function() {         callback({msg: \"request_error\", request: request});     });      request.open(method, url, true \/*async*\/);      request.timeout = timeout;     request.responseType = \"\";      headers.forEach(function(header) {         try {             request.setRequestHeader(header[0], header[1]);         } catch (e) {}     });      try {         if (body) request.send(body);         else request.send();     } catch (e) {         callback({exception: e, type: 'send'});     }      return {         cancel: function() {             if (!isAborted) { request.abort(); isAborted = true; }              if (timeoutId) { clearTimeout(timeoutId); timeoutId = 0; }         }     }; });  });<\/code><\/pre>\n<\/div>\n<\/div>\n
  <\/p>\n
\u0418\u0442\u043e\u0433\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/h2>\n
  <\/p>\n
app.js<\/b><\/p>\n
\n
in_package('GitHubUsers', function() {  this.provide('App', App); function App(options) {     var api = options.api;      var element = document.createElement('div');      \/\/ Create needed components     var userNameInput = new GitHubUsers.UserNameInput({         onNameInput: onNameInput,         onNameChange: onNameChange     });      var userCard = new GitHubUsers.UserCard();      var errorElement = GitHubUsers.Dom.instantiateTemplate('error');      var displayElements = [         { type: 'loading', element: GitHubUsers.Dom.instantiateTemplate('loading') },         { type: 'error', element: errorElement },         { type: 'userCard', element: userCard.getElement() }     ];      \/\/ Append elements to DOM     element.appendChild(userNameInput.getElement());     userNameInput.getElement().style.marginBottom = '1em'; \/\/ HACK      displayElements.forEach(function(x) {         var el = x.element;         el.style.display = 'none';         element.appendChild(el);     });      var contentElements = new GitHubUsers.DomUtil.DisplayOneOf({ items: displayElements });      \/\/ User name processing     var activeRequest = null;      function onNameInput(name) {         name = name.trim();          \/\/ Instant display of `loading` or current request result         if (activeRequest && activeRequest.name === name) {             activeRequest.activateState();         } else if (name) {             contentElements.showByType('loading');         } else {             contentElements.showByType(null);         }     }      function onNameChange(name) {         name = name.trim();          \/\/ Cancel old request         if (activeRequest && activeRequest.name !== name) {             activeRequest.request.cancel();             activeRequest = null;         } else if (activeRequest) { \/\/ same name             return;         }          if (!name) return;          \/\/ Do new request         activeRequest = {             name: name,             request: api.getUser({ userName: name }, onUserData),              \/\/ method for `onNameInput`             activateState: function() {                 contentElements.showByType('loading');             }         };          activeRequest.activateState();          function onUserData(error, data) {             if (error) {                 activeRequest = null;                 contentElements.showByType('error');                 GitHubUsers.Dom.binding(errorElement, {                     status: error.status,                     text: error.message                 });                 return;             }              if (!data) {                 activeRequest.activateState = function() {                     GitHubUsers.Dom.binding(errorElement, {                         status: 404,                         text: 'Not found'                     });                     contentElements.showByType('error');                 };                 activeRequest.activateState();                 return;             }              activeRequest.activateState = function() {                 userCard.setData({                     userName: data.name || data.login, \/\/ `data.name` can be `null`                     userUrl: data.html_url,                     avatarImageUrl: data.avatar_url + '&s=80',                      reposCount: data.public_repos,                     reposUrl: 'https:\/\/github.com\/' + data.login + '?tab=repositories',                      gistsCount: data.public_gists,                     gistsUrl: 'https:\/\/gist.github.com\/' + data.login,                      followersCount: data.followers,                     followersUrl: 'https:\/\/github.com\/' + data.login + '\/followers'                 });                  contentElements.showByType('userCard');             };              activeRequest.activateState();         }     }      this.getElement = function() { return element; }; }  });<\/code><\/pre>\n<\/div>\n<\/div>\n
  <\/p>\n
\u0423 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0441\u0435\u0445 \u043d\u0443\u0436\u043d\u044b\u0445 \u043d\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 \u2014 \u043b\u043e\u0433\u0438\u043a\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438\/\u043e\u0448\u0438\u0431\u043a\u0438\/\u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430. \u041d\u043e \u0432\u0441\u0451 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e, \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e \u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0432 \u043b\u044e\u0431\u043e\u043c \u043c\u0435\u0441\u0442\u0435, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f.<\/p>\n
  <\/p>\n
\u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0443\u0442\u0438\u043b\u0438\u0442\u043a\u0443 DisplayOneOf<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u0437 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0445, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u044f\u0447\u0435\u0442:<\/p>\n
  <\/p>\n
dom-util.js<\/b><\/p>\n
\n
in_package('GitHubUsers.DomUtil', function() {  this.provide('DisplayOneOf', function(options) {     var items = options.items;      var obj = {};      items.forEach(function(item) { obj[item.type] = item; });      var lastDisplayed = null;      this.showByType = function(type) {         if (lastDisplayed) {             lastDisplayed.element.style.display = 'none';         }          if (!type) {             lastDisplayed = null;             return;         }          lastDisplayed = obj[type];          lastDisplayed.element.style.display = '';     }; });  });<\/code><\/pre>\n<\/div>\n<\/div>\n
  <\/p>\n
\u0427\u0442\u043e\u0431\u044b \u0432 \u0438\u0442\u043e\u0433\u0435 \u044d\u0442\u043e \u0432\u0441\u0451 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0438 \u0431\u0440\u043e\u0441\u0438\u0442\u044c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 App<\/code> \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443:<\/p>\n
  <\/p>\n
function onReady() {     GitHubUsers.Dom.consumeTemplates(document.getElementById('templates'));      var rootEl = document.getElementById('root');      var app = new GitHubUsers.App({         api: new GitHubUsers.GitHubApi()     });      rootEl.appendChild(app.getElement()); }<\/code><\/pre>\n
  <\/p>\n
\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442?<\/h2>\n
  <\/p>\n
\u041a\u0430\u043a \u0432\u044b \u0441\u0430\u043c\u0438 \u0432\u0438\u0434\u0438\u0442\u0435, \u043c\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 \u043d\u0443 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430. \u041d\u0438\u043a\u0442\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430 \u043d\u0430\u0441 \u0432\u0441\u044e \u043c\u0430\u0433\u0438\u044e, \u043c\u044b \u0432\u0441\u0435\u0433\u043e \u0434\u043e\u0431\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u0441\u0430\u043c\u0438. \u041c\u044b \u0441\u0430\u043c\u0438 \u0442\u0432\u043e\u0440\u0438\u043c \u043c\u0430\u0433\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u0430, \u0435\u0441\u043b\u0438 \u043c\u044b \u0435\u0451 \u0445\u043e\u0442\u0438\u043c.<\/p>\n
  <\/p>\n
\u2192 \u0414\u0435\u043c\u043e<\/a> \u2192 \u041a\u043e\u0434<\/a><\/p>\n
  <\/p>\n
\u041f\u0438\u0448\u0438\u0442\u0435 \u0442\u0443\u043f\u043e\u0439 \u0438 \u0432\u0435\u0447\u043d\u044b\u0439 \u043a\u043e\u0434. \u041f\u0438\u0448\u0438\u0442\u0435 \u0431\u0435\u0437 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u043a\u0440\u0435\u043f\u0447\u0435 \u0441\u043f\u0438\u0442\u0435 \u0438 \u043d\u0435 \u0431\u043e\u0439\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0437\u0430\u0432\u0442\u0440\u0430 \u0432\u0435\u0441\u044c \u0432\u0430\u0448 \u043a\u043e\u0434 \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f deprecated \u0438\u043b\u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043e\u0434\u043d\u044b\u043c.<\/p>\n
  <\/p>\n
\u0427\u0442\u043e \u0434\u0430\u043b\u044c\u0448\u0435?<\/h2>\n
  <\/p>\n
\u042d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u0430\u043b, \u0447\u0442\u043e\u0431\u044b \u043f\u0438\u0441\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0430 VanillaJS<\/strong> \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435. \u042f \u0441\u0447\u0438\u0442\u0430\u044e, \u0447\u0442\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430 \u0432\u0430\u043d\u0438\u043b\u043b\u0435 \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0432\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442 \u0436\u0438\u0442\u044c \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0434\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c \u043b\u044e\u0431\u043e\u0439 \u0438\u0437 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438 \u0443 \u0432\u0430\u0441 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u0435\u0433\u043e \u0446\u0435\u043b\u0438\u043a\u043e\u043c.<\/p>\n
  <\/p>\n
\u041d\u043e \u0435\u0441\u043b\u0438 \u0431\u044b \u043e\u043d \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u0431\u044b\u043b \u0431\u043e\u043b\u044c\u0448\u0435, \u0432\u043e\u0442 \u0447\u0442\u043e \u043c\u044b \u0431\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0435\u0449\u0451:<\/p>\n
  <\/p>\n
HTML-\u0448\u0430\u0431\u043b\u043e\u043d\u044b \u043c\u044b \u0431\u044b \u0434\u0435\u043b\u0430\u043b\u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u043e\u0434\u0443\u043b\u0435\u0439\/\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041e\u043d\u0438 \u0431\u044b \u043b\u0435\u0436\u0430\u043b\u0438 \u0432 \u043f\u0430\u043f\u043a\u0430\u0445 \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 instantiateTemplate<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u043b \u0431\u044b \u0438\u043c\u044f \u043c\u043e\u0434\u0443\u043b\u044f \u043f\u043b\u044e\u0441 \u0438\u043c\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u0430, \u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435 \u0438\u043c\u044f.<\/p>\n
  <\/p>\n
\u0412 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0435\u0441\u044c CSS \u0443 \u043d\u0430\u0441 \u043b\u0435\u0436\u0438\u0442 \u0432 index.css<\/code>, \u0435\u0433\u043e, \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0442\u043e\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u043a\u043b\u0430\u0441\u0442\u044c \u0440\u044f\u0434\u043e\u043c \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n
  <\/p>\n
\u041d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0441\u0431\u043e\u0440\u043a\u0438 \u0431\u0430\u043d\u0434\u043b\u043e\u0432, \u043c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0432\u0441\u0435 \u0444\u0430\u0439\u043b\u044b \u0440\u0443\u043a\u0430\u043c\u0438 \u0432 index.html<\/code>, \u044d\u0442\u043e \u043d\u0435\u0445\u043e\u0440\u043e\u0448\u043e.<\/p>\n
  <\/p>\n
\u041d\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e \u0441\u043f\u0438\u0441\u043a\u0430\u043c \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u0445\u043e\u0434\u0438\u0442\u044c \u0432 \u0431\u0430\u043d\u0434\u043b\u044b \u0441\u043e\u0431\u0435\u0440\u0451\u0442 \u0432\u0435\u0441\u044c js, html, css \u044d\u0442\u0438\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u043d\u0430\u043c \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443 js’\u043d\u0438\u043a\u0443 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0431\u0430\u043d\u0434\u043b\u0430. \u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0442\u0443\u043f\u0435\u0435 \u0438 \u043f\u0440\u043e\u0449\u0435, \u0447\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c webpack<\/strong>, \u0430 \u0447\u0435\u0440\u0435\u0437 \u0433\u043e\u0434 \u0443\u0437\u043d\u0430\u0442\u044c, \u0447\u0442\u043e \u0442\u0430\u043c \u0443\u0436\u0435 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0434\u0440\u0443\u0433\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u0438.<\/p>\n
  <\/p>\n
\u0416\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043c\u0435\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u0444\u043b\u0430\u0433, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u043b \u0441\u0445\u0435\u043c\u0443 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f js\/html\/css \u0433\u0440\u043e\u043c\u0430\u0434\u043d\u044b\u043c \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0432 index.html<\/code>. \u0422\u043e\u0433\u0434\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0437\u0430\u0434\u0435\u0440\u0436\u0435\u043a \u043d\u0430 \u0441\u0431\u043e\u0440\u043a\u0443, \u0430 \u0432 Sources<\/strong> \u0432 \u0445\u0440\u043e\u043c\u0435 \u0443 \u0432\u0430\u0441 \u043a\u0430\u0436\u0434\u044b\u0439 \u0444\u0430\u0439\u043b \u0431\u0443\u0434\u0435\u0442 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435 \u0438 \u043d\u0438\u043a\u0430\u043a\u0438\u0435 sourcemap’\u044b \u043d\u0435 \u043d\u0443\u0436\u043d\u044b.<\/p>\n
  <\/p>\n
P.S.<\/h2>\n
  <\/p>\n
\u042d\u0442\u043e \u043b\u0438\u0448\u044c \u043e\u0434\u0438\u043d \u0438\u0437 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432, \u043a\u0430\u043a \u043e\u043d\u043e \u0432\u0441\u0451 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f VanillaJS<\/strong>. \u0412 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u0431\u044b\u043b\u043e \u0431\u044b \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u0443\u0441\u043b\u044b\u0448\u0430\u0442\u044c \u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n
  <\/p>\n
\u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435.<\/p>\n<\/div>\n