{"id":339202,"date":"2022-10-02T03:00:12","date_gmt":"2022-10-02T03:00:12","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=339202"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=339202","title":{"rendered":"<span>\u0421\u043e\u0437\u0434\u0430\u0451\u043c \u0441\u0432\u043e\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043d\u0430 Javascript \u0433\u043e\u043b\u044b\u043c\u0438 \u0440\u0443\u043a\u0430\u043c\u0438. \u0427\u0430\u0441\u0442\u044c 0: \u041a\u043b\u0430\u0441\u0441\u044b \u0438 \u043c\u043e\u0434\u0443\u043b\u0438<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<h2>\u0412\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435<\/h2>\n<p>\u041d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e JS-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0442\u043e\u043c\u0443 \u043f\u0440\u043e\u0447\u0435\u0435. \u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0448\u044c \u043a\u0440\u0443\u043f\u043d\u044b\u0439 \u0438 \u043d\u0430\u0434\u0451\u0436\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u0438 \u043f\u0438\u0448\u0435\u0448\u044c \u0441\u0432\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u041d\u043e, \u0432\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u0443 \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u043a\u043e\u0434\u0430. \u041a\u0430\u0436\u0434\u044b\u0439 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0441\u0432\u043e\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0438 \u0441\u0432\u043e\u0438 \u0444\u0438\u0447\u0438, \u043f\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447, \u043d\u0430\u043f\u043e\u0434\u043e\u0431\u0438\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0443, \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u0445\u0443\u043a\u043e\u0432, \u0441\u0441\u044b\u043b\u043e\u043a, \u0434\u0430\u043d\u043d\u044b\u0445. \u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438. \u0418 \u0440\u0430\u0437\u043c\u0435\u0440 \u0432\u0441\u0435\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043f\u043e\u0440\u043e\u0439 \u0434\u043e\u0445\u043e\u0434\u0438\u0442 \u0430\u0436 \u0434\u043e \u0433\u0438\u0433\u0430\u0431\u0430\u0439\u0442\u043e\u0432. \u0412 \u0438\u0442\u043e\u0433\u0435, \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439, <s>\u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439<\/s>, \u043b\u0443\u0447\u0448\u0438\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a.<\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u044b \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0430\u0433\u0438, \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u042f \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439, \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<details class=\"spoiler\">\n<summary>\u0414\u0438\u0441\u043a\u043b\u0435\u0439\u043c\u0435\u0440<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b. \u0425\u043e\u0442\u044f \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u0431\u044b\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043f\u043e\u0434 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 Chrome \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438, \u0430\u0432\u0442\u043e\u0440 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 API, \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0435\u0439 ECMAScript 5. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0430\u0442\u044c\u0438 \u043a\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 API \u043d\u0435 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b\u0439 \u0441 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c IE (Internet Explorer). <\/p>\n<\/div>\n<\/details>\n<h2>\u0421 \u0447\u0435\u0433\u043e \u043d\u0430\u0447\u043d\u0451\u043c.<\/h2>\n<p>\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0435\u0448\u0438\u043c, \u0438\u0437 \u0447\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a. \u041c\u043e\u0436\u043d\u043e \u0442\u0443\u043f\u043e \u043f\u0438\u0441\u0430\u0442\u044c  \u0432\u0441\u0451 \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b. \u0412 \u0438\u0442\u043e\u0433\u0435, \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u044c \u0441 \u0444\u0430\u0439\u043b\u043e\u043c, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u0438\u0437 100 \u0442\u044b\u0441\u044f\u0447 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u0432\u0441\u0451 \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b, \u043a\u0430\u0436\u0434\u044b\u0439 \u0444\u0430\u0439\u043b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432 \u0432\u0438\u0434\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f, \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043e\u0434\u0438\u043d \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0441\u0451 \u043f\u043e\u0434\u0442\u044f\u043d\u0435\u0442. \u041e\u043a\u0435\u0439, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0436\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e. \u041d\u0430\u043f\u0438\u0448\u0435\u043c <em>index.html<\/em> \u0441 \u043d\u0430\u0448\u0438\u043c \u0433\u043b\u0430\u0432\u043d\u044b\u043c \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u043c: &#171;<em>widgets-all.js<\/em>&#171;. \u0412 \u0442\u044d\u0433\u0435 <code>&lt;body><\/code> \u0437\u0430\u0434\u0430\u0434\u0438\u043c <code>&lt;div><\/code> \u0441 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c <strong>root<\/strong>. \u0414\u0430\u043d\u043d\u044b\u0439 <code>&lt;div><\/code> \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0410 \u0447\u0435\u0440\u0435\u0437 \u0442\u044d\u0433 <code>&lt;style><\/code> \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e, \u043b\u0435\u0432\u043e\u0433\u043e \u0443\u0433\u043b\u0430.<\/p>\n<pre><code class=\"xml\">&lt;!DOCTYPE html> &lt;html>   &lt;head>     &lt;title>Main GUI&lt;\/title>     &lt;meta charset=\"UTF-8\">     &lt;style>       #root {         position: \"absolute\";         left: \"0px\";         top: \"0px\";       }     &lt;\/style>     &lt;script type=\"text\/javascript\" src=\".\/widgets-all.js\">     &lt;\/script>   &lt;\/head>   &lt;body>     &lt;div id=\"root\">     &lt;\/div>   &lt;\/body> &lt;\/html><\/code><\/pre>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448 &#171;widgets-all.js&#187; \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u043b \u043c\u043e\u0434\u0443\u043b\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e. \u0418 \u0432\u043e\u0442 \u0442\u0443\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u041f\u0415\u0420\u0412\u0410\u042f \u041f\u0420\u041e\u0411\u041b\u0415\u041c\u0410. \u0415\u0441\u043b\u0438 \u043c\u044b \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0442\u044d\u0433\u0438 <code>&lt;script><\/code> \u0438 \u0432\u043d\u0435\u0434\u0440\u044f\u0435\u043c \u0438\u0445 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442, \u0442\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442 \u0438\u0445 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u044f\u0432\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 &#171;<em>async&#187;<\/em> \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <strong>false<\/strong>. \u0410 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0441\u043a\u0440\u0438\u043f\u0442 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u043f\u043e\u0437\u0436\u0435, \u0447\u0435\u043c \u044d\u0442\u043e\u0433\u043e \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0438\u0437-\u0437\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430 &#171;varialbeName is not a function&#187;. \u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u044d\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 &#8212; <code>document.write(htmlStr)<\/code>. <\/p>\n<p>\u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434<\/p>\n<pre><code class=\"javascript\">\/\/\u0424\u0430\u0439\u043b widgets-all.js  \/\/\u0417\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c HTMLParser \u043f\u0440\u0435\u0440\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \/\/\u0414\u0430\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0430\u0432\u044b\u043c\u0438 \u0431\u0440\u0430\u0442\u044c\u044f\u043c\u0438 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0442\u044d\u0433\u0430. \/\/\u0421\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0441\u0430\u043c \u0442\u044d\u0433 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043b\u0438\u0431\u043e \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043f\u043e id (\u0435\u0441\u043b\u0438 \u0435\u0433\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u043c\u0443) \/\/\u043b\u0438\u0431\u043e \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e document.currentScript.  document.write('&lt;script type=\"text\/javascript\" src=\".\/Module1.js\">&lt;\/script>'); document.write('&lt;script type=\"text\/javascript\" src=\".\/Widgets.js\">&lt;\/script>');<\/code><\/pre>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0448\u0435\u0433\u043e &#171;widgets-all.js&#187; \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0434\u0432\u0430 \u0442\u044d\u0433\u0430 <code>&lt;script><\/code>. \u0415\u0441\u043b\u0438 \u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u0441\u0430\u043c\u043e\u0433\u043e &#171;widgets-all.js&#187; \u0431\u044b\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0442\u044d\u0433\u0438 <code>&lt;script><\/code>, \u0442\u043e \u043e\u043d\u0438 \u043d\u0435 \u0437\u0430\u0442\u0440\u0443\u0442\u0441\u044f, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0435\u0449\u0451 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d. \u041a\u043e\u0433\u0434\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d, \u0442\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c <strong>document.write<\/strong> <strong>\u043d\u0435\u043b\u044c\u0437\u044f<\/strong>, \u0438\u043d\u0430\u0447\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0442\u0435\u0440\u0435\u0442\u044c \u0432\u0435\u0441\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0421\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 &#8212; \u043a\u043e\u0441\u0442\u044b\u043b\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0431\u0443\u0434\u0443\u0442 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0442\u0430\u0432\u043a\u0443 \u0438 \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0445 \u0442\u044d\u0433\u043e\u0432 &lt;script>. \u041d\u043e \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440.<\/p>\n<h2>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044f.<\/h2>\n<p>\u0418\u0442\u0430\u043a, \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u043c \u0441\u043a\u0435\u043b\u0435\u0442 \u043e\u0434\u0438\u043d\u043e\u0447\u043d\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f. \u041c\u043e\u0434\u0443\u043b\u044c \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u043e\u0436\u0435\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u0438, \u0438 \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0434\u0430\u0432\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0437\u0430\u043a\u0440\u044b\u0442\u043e\u043c\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0443. \u0417\u0430\u043a\u0440\u044b\u0442\u043e\u0441\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439. \u041d\u0438\u0436\u0435 \u0434\u0430\u043d \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c<\/p>\n<pre><code class=\"javascript\">\/\/define module1 at global scope (as window property) var module1 = (function(){   var module1 = null; \/\/local scope.   module1 = {};   return module1; \/\/assign to global name local object. }());<\/code><\/pre>\n<p>\u0418 \u0442\u0443\u0442, \u0440\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u0412\u0422\u041e\u0420\u0410\u042f \u041f\u0420\u041e\u0411\u041b\u0415\u041c\u0410. \u041d\u0410\u0418\u041c\u0415\u041d\u041e\u0412\u0410\u041d\u0418\u042f \u041c\u041e\u0413\u0423\u0422 \u0411\u042b\u0422\u042c \u041d\u0415 \u0423\u041d\u0418\u041a\u0410\u041b\u042c\u041d\u042b\u041c\u0418. \u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043b\u0443\u0447\u0430\u0439, \u044d\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u0441\u0432\u043e\u0435\u0439 \u0436\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438\u043c\u0435\u043d\u0430 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u043d\u0435 \u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0443\u0447\u0451\u0442\u0430 \u0438\u043c\u0435\u043d\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432.<\/p>\n<pre><code class=\"javascript\">var module1 = (function(){   var m = null; \/\/local scope. Rename var to distinguish global name.    \/\/defined above at someone else.   if(typeof module1 != \"undefined\")      var _____module1 = module1; \/\/save original value.      m = {     resolveConflict: function(){       window.module1 = _____module1; \/\/reset to original value in global scope.       return this; \/\/return new value.     }   };   return m; \/\/assign to global name local object. }());<\/code><\/pre>\n<p>\u041c\u044b \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043b\u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e. \u0415\u0441\u043b\u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0443\u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0430, \u0442\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0435\u0451 \u0441\u0442\u0430\u0440\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e &#171;_____module1&#187;. \u0410 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 <em>resolveConflict<\/em> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0435\u0451 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442. \u0410 \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u043e\u0442\u0435\u0440\u044f\u0442\u044c \u0435\u0451 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0435\u0433\u043e \u044d\u0442\u043e\u0439 \u0436\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439.<\/p>\n<p>\u041d\u043e \u043f\u043e\u043c\u0438\u043c\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438\u043c\u0451\u043d, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0435\u0449\u0451 \u043e\u0434\u043d\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u041d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u043a\u0440\u0438\u043f\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043d\u0430\u0448\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u043b\u0441\u044f \u0442\u043e\u0433\u0434\u0430 \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u0443\u0436\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d. \u0421\u0435\u0439\u0447\u0430\u0441 \u0436\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u0442\u044d\u0433\u043e\u0432 (\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432) \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435. <\/p>\n<p>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>document.readyState<\/code>. <\/p>\n<ul>\n<li>\n<p><code>\"loading\"<\/code> &#8212; \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f. \u041d\u0435 \u0432\u0441\u0435 \u0442\u044d\u0433\u0438 \u0431\u044b\u043b\u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043d\u044b.<\/p>\n<\/li>\n<li>\n<p><code>\"interactive\"<\/code> &#8212; \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0430\u043d\u0430\u043b\u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0451\u043d. \u041a \u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u043c\u0435\u043d\u0442\u0443, \u0432\u0441\u0435 \u0442\u044d\u0433\u0438 \u0431\u044b\u043b\u0438 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u043d\u044b \u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0432 DOM. \u041e\u0434\u043d\u0430\u043a\u043e, \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 &lt;iframe> \u0438 &lt;img>, &lt;script> \u043f\u043e src \u0435\u0449\u0451 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043e.<\/p>\n<\/li>\n<li>\n<p><code>\"complete\"<\/code> &#8212; \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u043a\u0440\u0438\u043f\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u043b\u0441\u044f \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 <strong>&#171;interactive&#187; <\/strong>\u0438\u043b\u0438 <strong>&#171;complete&#187;<\/strong>.<\/p>\n<p>\u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0439\u0442\u0438 \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u043f\u0443\u0442\u0451\u043c \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0442\u044d\u0433\u0430 <code>&lt;body><\/code>, \u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0441 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u043c\u0438 \u043a\u043b\u0430\u0441\u0442\u044c \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <strong>root<\/strong>. <\/p>\n<p>\u041d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u043a\u0440\u0438\u043f\u0442 \u0432 \u0442\u044d\u0433\u0435 <code>&lt;head><\/code> \u043f\u0435\u0440\u0435\u0434 <code>&lt;body><\/code>, \u0442\u043e \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0441 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u043c, \u0435\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 &#171;<strong>interactive<\/strong>&#187; \u0438\u043b\u0438 &#171;<strong>complete<\/strong>&#171;. <\/p>\n<p>\u041d\u0438\u0436\u0435 \u0434\u0430\u043d \u043a\u043e\u0434, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c.<\/p>\n<pre><code class=\"javascript\">\/\/\u0424\u0430\u0439\u043b Widgets.js \/\/\u042d\u0442\u043e\u0442 \u043c\u043e\u0434\u0443\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u0435 \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438. \/\/\u0412 \u043d\u0451\u043c \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f resolveConflict  \/\/(\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043e\u0434\u043d\u043e\u0438\u043c\u0451\u043d\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f)  var Widgets = (function(){    \/\/\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0438\u043c\u0451\u043d.   \/\/\u0412\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e resolveConflict()   if(typeof Widgets != \"undefined\")     var _____Widgets  = Widgets;      var m = {     utils: {       module1: module1 \/\/global name defined previously at Module1.js script.     }   };    var isBoundReady = false; \/\/\u0417\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d \u043b\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a   var isReady = false; \/\/\u0417\u0430\u0433\u0440\u0443\u0436\u0435\u043d \u043b\u0438 DOM.   var readyList = []; \/\/\u0421\u043f\u0438\u0441\u043e\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u0439 f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0432\u044b\u0437\u0432\u0430\u043d\u044b, \u043a\u043e\u0433\u0434\u0430 DOM \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d.    var userAgent = navigator.userAgent.toLowerCase(); \/\/name of current browser    \/\/browser names   var browser = { version: (userAgent.match(\/.+(?:rv|it|ra|ie)[\\\/: ]([\\d.]+)\/) || [])[1], safari: \/webkit\/.test(userAgent), chrome: \/chrome\/.test(userAgent), opera: \/opera\/.test(userAgent), msie: \/msie\/.test(userAgent) &amp;&amp; !\/opera\/.test(userAgent), mozilla: \/mozilla\/.test(userAgent) &amp;&amp; !\/(compatible|webkit)\/.test(userAgent)   };      \/\/private handler   function ready(){     if(isReady) \/\/DOM loaded only once.       return;            isReady = true; \/\/DOM is loaded.        \/\/exec each f on readyList       for(var i = 0; i &lt; readyList.length; i++){         readyList[i]();       }        readyList = null; \/\/clear list.        \/\/and remove event handler.       if(browser.mozilla || browser.opera || browser.chrome)         document.removeEventListener(\"DOMContentLoaded\", ready, false);        \/\/for IE browser       var s = document.getElementById('__ie_init');       if(s)         s.remove(); \/\/with onreadystatechange hndlr.   }; \/\/end ready()    \/\/registrate ready handler.   function bindReady(){     if(isBoundReady) \/\/execute only once.       return;          isBoundReady = true; \/\/flag that handler registrated.      if (browser.mozilla || browser.opera || browser.chrome ){       document.addEventListener(\"DOMContentLoaded\", ready, false );     }      \/\/ If IE is used, use the excellent hack by Matthias Miller     \/\/ http:\/\/www.outofhanwell.com\/blog\/index.php?title=the_window_onload_problem_revisited     else if (browser.msie ) {        \/\/ Again use document.write to synchronous add &lt;script>       document.write(\"&lt;scr\" + \"ipt id=__ie_init defer=true \" +          \"src=\/\/:>&lt;\\\/script>\");        \/\/ Use the defer script hack       var script = document.getElementById(\"__ie_init\");        if ( script ) {          script.onreadystatechange = function() {           if ( this.readyState != \"complete\" ) return;           ready();         };       }            } else if (browser.safari ){          \/\/ Continually check to see if the document.readyState is valid         timers.safariTimer = setInterval(function(){           if ( document.readyState == \"loaded\"              || document.readyState == \"complete\"             || document.readyState == \"interactive\") {             clearInterval( timers.safariTimer );             timers.safariTimer = null;             ready();           }         }, 10);     }    }; \/\/end bindReady()    \/\/public function   \/\/Executes f only when document has been loaded or parsed   m.onReady = function(f){     if(typeof f !== 'function')       throw new TypeError('onReady(): Argument f is not a function');      bindReady(); \/\/registrate handler.     if(isReady){       f.apply(this, f.arguments); \/\/call f with its arguments.     }     else {       \/\/append f.        \/\/anonymous function is wrapper to preserve context and arguments.       readyList.push(function(){         return f.apply(this, f.arguments);       });     }   }; \/\/end onReady()    m.resolveConflict = function(){     module1.resolveConflict();\/\/restore original value of global name module1     window.Widgets = _____Widgets; \/\/original value of Widgets     return this; \/\/new value of Widgets   }      return m; }());<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043e\u0442\u043a\u0440\u044b\u0442\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043c\u043e\u0434\u0443\u043b\u044f <em>Widgets.onReady<\/em> \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d\u0430, \u043a\u043e\u0433\u0434\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0442\u0435\u0441\u0442 \u0432 \u0444\u0430\u0439\u043b index.html. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0434\u0432\u0430 \u0442\u044d\u0433\u0430 <code>&lt;script><\/code>, \u043e\u0434\u0438\u043d \u043f\u0435\u0440\u0435\u0434 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c, \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u043e\u0441\u043b\u0435 \u043d\u0435\u0433\u043e. \u041f\u0435\u0440\u0432\u044b\u0439 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u043c\u0435\u043d\u0430, \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0435 \u0441 \u0438\u043c\u0435\u043d\u0430\u043c\u0438 \u043c\u043e\u0434\u0443\u043b\u0435\u0439. \u0412\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a.<\/p>\n<pre><code class=\"xml\">&lt;head>   ...   &lt;!--\u0417\u0430\u0440\u0430\u043d\u0435\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0441\u0442\u0430\u0440\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0438\u043c\u0451\u043d \u043c\u043e\u0434\u0443\u043b\u0435\u0439-->   &lt;script type=\"text\/javascript\">     var Widgets = 1111, module1 = 2222;   &lt;\/script>   &lt;script type=\"text\/javascript\" src=\".\/widgets-all.js\"> &lt;!--framework\/libs-->   &lt;\/script>   &lt;script type=\"text\/javascript\"> &lt;!--application-->     Widgets.onReady(function(){       console.log(document.readyState); \/\/ => interactive or complete.       var lib = Widgets.resolveConflict();       console.log(Widgets);       console.log(module1);       window.lib = lib;       console.log(\"%o\", lib);     });   &lt;\/script> &lt;\/head><\/code><\/pre>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435, \u0443 \u043d\u0430\u0441 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u044b\u0432\u043e\u0434:<\/p>\n<pre><code>interactve 1111 2222 {   resolveConflict: function(){...},   onReady: function(f){...},   utils: { module1: {...} },   ...other properties inherited from Object.prototype }<\/code><\/pre>\n<h2>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0442\u0438\u043f\u043e\u0432.<\/h2>\n<p>\u0420\u0430\u0437\u043e\u0431\u0440\u0430\u0432\u0448\u0438\u0441\u044c \u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 \u0438 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0438\u043c\u0451\u043d \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c \u043e \u0441\u0430\u043c\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445 \u043c\u043e\u0434\u0443\u043b\u044f. \u0427\u0442\u043e \u0435\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442? \u041a\u0430\u043a \u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c? \u041a\u0430\u043a \u0441 \u043d\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c? \u0427\u0442\u043e \u043e\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442?<\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u0430\u043a \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043b\u0430\u0441\u0441\u0430, \u0430 \u043a\u043b\u0430\u0441\u0441 &#8212; \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0435\u0433\u043e \u0441\u0445\u0435\u043c\u0443 (\u0447\u0435\u0440\u0442\u0451\u0436). \u041a\u043b\u0430\u0441\u0441\u044b \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u043e\u0432, \u0435\u0441\u043b\u0438 \u043d\u0435 \u0431\u0440\u0430\u0442\u044c \u0432 \u0440\u0430\u0441\u0447\u0451\u0442 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b (ES6). \u0411\u0443\u0434\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441 \u0432\u0440\u0443\u0447\u043d\u0443\u044e. \u0421\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u044b \u043a\u043b\u0430\u0441\u0441\u0430 \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u044b\u0437\u043e\u0432\u043e\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u0447\u0435\u0440\u0435\u0437 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 &#171;<strong>new<\/strong>&#171;.<\/p>\n<p>\u0425\u043e\u0440\u043e\u0448\u043e, \u043d\u043e \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u0441\u0430\u043c\u043e\u043c\u0443 \u043a\u043b\u0430\u0441\u0441\u0443, \u0430 \u0447\u0442\u043e \u043a \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c\u0443 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0443? \u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, <em>\u0438\u043c\u044f \u043a\u043b\u0430\u0441\u0441\u0430<\/em> &#8212; \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043a\u043b\u0430\u0441\u0441\u0430, \u0430 \u043d\u0435 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u043c\u044f \u043a\u043b\u0430\u0441\u0441\u0430 <em>\u0427\u0435\u043b\u043e\u0432\u0435\u043a<\/em> &#8212; &#171;<strong>\u0427\u0435\u043b\u043e\u0432\u0435\u043a<\/strong>&#187; \u043e\u0431\u0449\u0435\u0435 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \u043b\u044e\u0434\u0435\u0439, \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0438\u043c\u044f (\u0414\u0436\u043e\u043d, \u0421\u043c\u0438\u0442, \u0411\u0438\u043b\u043b\u0438). \u0418 \u0433\u0434\u0435 \u0438 \u043a\u0430\u043a \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043b\u0430\u0441\u0441\u0430?<\/p>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043b\u0430\u0441\u0441\u0430 &#8212; \u043e\u0431\u044a\u0435\u043a\u0442. \u042d\u0442\u043e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d, \u0434\u043b\u044f \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u0430. \u0425\u0440\u0430\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043d\u0435 \u043a\u0430\u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430, \u0430 \u043a\u0430\u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0441\u0430\u043c\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430-\u043c\u043e\u0434\u0443\u043b\u044f. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c, \u043a\u0430\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442:<\/p>\n<ul>\n<li>\n<p><code>className<\/code> &#8212; \u0438\u043c\u044f \u043a\u043b\u0430\u0441\u0441\u0430<\/p>\n<\/li>\n<li>\n<p><code>callConstructor<\/code> &#8212; \u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u043a\u043b\u0430\u0441\u0441\u0430<\/p>\n<\/li>\n<li>\n<p><code>callParent<\/code> &#8212; \u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430<\/p>\n<\/li>\n<li>\n<p><code>beforeCreate<\/code> &#8212; \u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0434 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u043a\u043b\u0430\u0441\u0441\u0430, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b, \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440, \u0447\u0438\u0442\u0430\u044f <code>constructorParameters<\/code>.<\/p>\n<\/li>\n<li>\n<p><code>noDefaultConstructor<\/code> &#8212; \u0444\u043b\u0430\u0433, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0437\u0430\u043f\u0440\u0435\u0449\u0435\u043d\u043e \u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u0422.\u0435. \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0431\u0435\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p><code>constructorParameters<\/code> &#8212; \u043e\u0431\u044a\u0435\u043a\u0442, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430.  \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 &#8212; \u0438\u043c\u0435\u043d\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432. \u041a\u0430\u0436\u0434\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438:<\/p>\n<ul>\n<li>\n<p><strong>required<\/strong> &#8212; \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u0435\u043d \u043b\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440.<\/p>\n<\/li>\n<li>\n<p><strong>type<\/strong> &#8212; \u0442\u0438\u043f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0432 \u0432\u0438\u0434\u0435 \u0441\u0442\u0440\u043e\u043a\u0438.<\/p>\n<\/li>\n<li>\n<p><strong>oridnal<\/strong> &#8212; \u043f\u043e\u0437\u0438\u0446\u0438\u044f \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430.<\/p>\n<\/li>\n<li>\n<p><strong>getter<\/strong> &#8212; \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c. \u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0442\u0438\u043f, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u0432 <code>type<\/code>, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><code>count<\/code> &#8212; \u0447\u0438\u0441\u043b\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430.<\/p>\n<\/li>\n<li>\n<p><code>getCount<\/code> &#8212; \u043c\u0435\u0442\u043e\u0434, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0439 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>count<\/code>.<\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u043f\u0438\u0441\u0430\u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043b\u0430\u0441\u0441\u0430, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u043e\u0431\u044a\u0435\u043a\u0442, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u043a\u043b\u0430\u0441\u0441, \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u044b. \u041d\u043e \u043f\u0435\u0440\u0435\u0434 \u044d\u0442\u0438\u043c, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0440\u0435\u0448\u0438\u0442\u044c \u0442\u0440\u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u0430: \u0431\u0443\u0434\u0443\u0442 \u043b\u0438 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c\u0441\u044f \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u0438\u043c\u0435\u043d\u0430 \u0432 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043b\u0430\u0441\u0441\u0430\u0445? \u041d\u0430\u0434\u043e \u043b\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0441\u0430\u043c\u043e\u043c\u0443 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u0438\u043b\u0438 \u0436\u0435 \u043f\u0443\u0441\u0442\u044c \u044d\u0442\u0438\u043c \u0437\u0430\u0439\u043c\u0451\u0442\u0441\u044f \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a (\u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430)? \u0415\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043c\u0435\u0442\u043e\u0434, \u0434\u043e\u043b\u0436\u043d\u044b \u043b\u0438 \u043c\u044b \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0441\u0442\u0430\u0440\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f, \u0438\u043b\u0438 \u043c\u044b \u0435\u0433\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u0442\u0438\u0440\u0430\u0435\u043c?<\/p>\n<p>\u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0438\u0437 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u043b\u043e\u0433\u0438\u043a\u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430, \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u0441\u044f \u043c\u0435\u0442\u043e\u0434 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f. \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438.<\/p>\n<p>\u041e\u043a\u0435\u0439, \u043f\u043e\u0439\u0434\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c. \u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0438\u043c\u0451\u043d \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043c\u0435\u0442\u043e\u0434\u043e\u0432.<\/p>\n<pre><code class=\"javascript\">\/\/\u0424\u0430\u0439\u043b Widgets.js \/\/\u0412 \u0442\u0435\u043b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u043e\u0434\u0443\u043b\u044f. \/\/1. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438.  var protoprops = ['toString', 'toJSON', 'valueOf', 'constructor',                   'hasOwnProperty', 'isPrototypeOf', 'propertyIsEnumerable',                   'toLocaleString'];  \/\/\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043c\u0435\u0442\u043e\u0434 extend, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438\u0437 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \/\/Defined at ECMAScript 5. \/\/Not worked at IE. Object.defineProperty(Object.prototype, \"extend\", {   value: function(t){     for(var i = 0; i &lt; arguments.length; i++){       var source = arguments[i];       for(var p in source)         if(!(p in this))           this[p] = source[p];       for(var j = 0; j &lt; protoprops.length; j++){ \/\/IE         p = protoprops[j];         if(source.hasOwnProperty(p)) this[p] = source[p]; \/\/Object.prototype props at some IE treat as ownProperties.       }     }     return this;   }, writable: false, configurable: false, enumerable: false });  \/\/\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u0438\u043c\u0435\u043d\u0438 \u0442\u0438\u043f\u0430 (\u043a\u043b\u0430\u0441\u0441\u0430). function classof(o){   return Object.prototype.toString.call(o).slice(8, -1); }  Function.prototype.getName = function(){   if('name' in this) return this.name;   return this.name = this.toString().match(  \/function\\s*([^(]*)\\(\/ )[1]; \/\/pattern: function fName( where fName is first group };  Function.prototype.setName = function(className){   Object.defineProperty(this, \"name\", {value: className, configurable: false, writable: false, enumerable: false}); };  \/\/\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0438\u043c\u044f \u0442\u0438\u043f\u0430 \u0438\u043b\u0438 \u043a\u043b\u0430\u0441\u0441\u0430 \u0434\u043b\u044f \u043e. \/\/\u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 type. \/\/\u0414\u043b\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0438\u043c\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430. \/\/\u0414\u043b\u044f \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0430\u0442\u0442\u0440\u0438\u0431\u0443\u0442\u0430 \"class\". function type(o){   var t, c, n;   if(o === null) return \"null\";   if(o === undefined) return \"undefined\";   if(o !== o) return \"NaN\";    \/\/primitives and functions   if((t = typeof o) !== 'object') return t;    \/\/base objects.   if((c = classof(o)) !== 'Object') return c;    if(o.constructor &amp;&amp; typeof o.constructor === \"function\"     &amp;&amp; (n = o.constructor.getName())   )      return n;    \/\/extract className from classObject of instance o.   if(o.self &amp;&amp; o.self.className &amp;&amp; typeof o.self.className === 'string')     return o.self.className;      return \"Object\"; \/\/common type. };  \/\/\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442 instance \u043f\u043e\u0434\u043a\u043b\u0430\u0441\u0441\u043e\u043c \u043a\u043b\u0430\u0441\u0441\u0430 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c className \/\/\u0438\u043b\u0438 \u0441\u0430\u043c instance \u043a\u043b\u0430\u0441\u0441 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c className. \/\/\u0415\u0441\u043b\u0438 instance \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432 - \u0438\u0434\u0451\u0442 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043f\u043e \u0442\u0438\u043f\u0443. \/\/\u0415\u0441\u043b\u0438 instance \u043f\u043e\u0442\u043e\u043c\u043e\u043a \u0438\u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442 \u043a\u043b\u0430\u0441\u0441\u0430 className => true. function isSubClassOf(instance, className){   if(instance == null || instance == undefined) \/\/null or undefined is not a class     return false;   if(typeof className !== 'string')     throw new TypeError('Argument className must be String!');   if(typeof instance !== 'object' &amp;&amp; typeof instance === className)     return true;   else if(typeof instance === 'string' &amp;&amp; className === 'cssStyle')     return true;      var cls = instance.self || instance; \/\/if not instance => assume as classObject   while(cls){     if(cls.className &amp;&amp; cls.className === className)       return true;     cls = cls &amp;&amp; cls.callParent &amp;&amp; cls.callParent.prototype &amp;&amp; cls.callParent.prototype.self;   }    return false; };  \/\/\u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u044b \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430. \/\/\u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u043e \u0434\u043b\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b\u0445 (\u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445) \u0442\u0438\u043f\u043e\u0432. \/\/\u041c\u0435\u0442\u043e\u0434 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \/\/\u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0443\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f, \u0430 \u0437\u0430\u0442\u0435\u043c \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439. \/\/cls - \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043b\u0430\u0441\u0441. \/\/props - \u043c\u0435\u0442\u043e\u0434\u044b \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 (\u043e\u0431\u044a\u0435\u043a\u0442\u0430-\u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430) function overrides(cls, props){   if(!cls || !cls.callParent || !props) \/\/no props or superclass or noclass => nothing overrided     return;   var props = Object.keys(cls.callParent.prototype); \/\/parent props    \/\/through enumerable and own props   for(var i = 0; i &lt; props.length; i++){     var prop = props[i];     if(prop in funs){ \/\/defined at subclass too.       var oldp = cls.callParent.prototype[prop]; \/\/save old property value.       var newp = funs[prop]; \/\/new method\/prop that must be copied.       var t = undefined;       if((t = typeof newp) !== typeof newp)         continue;       else if(t === 'function'){ \/\/matched by type and type is fun => override.         cls.callConstructor.prototype[prop] = function()         {            \/\/calls parent then overriden version.           \/\/When you use recursion           \/\/this method also calls parent m() recursively           oldp.apply(this, arguments);           newp.apply(this, arguments);         }; \/\/end f.       } \/\/end else        \/\/check type by covariance.       else if(isSubClassOf(newp, type(oldp))){         cls.callConstructor.prototype[prop] = newp; \/\/reset to new value.       }       \/\/matched primitive.       else if(t !== 'object'){         cls.callConstructor.prototype[prop] = newp; \/\/reset to new value.       }     } \/\/endif   }\/\/end for }<\/code><\/pre>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <strong>type<\/strong> \u043c\u044b \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u043c\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u0438\u043b\u0438 \u0438\u043c\u044f \u043a\u043b\u0430\u0441\u0441\u0430 \u0438\u0437 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043a\u043b\u0430\u0441\u0441\u0430. \u041a\u0430\u0436\u0434\u044b\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 \u0438\u043c\u0435\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u0430\u043c\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0432 \u0432\u0438\u0434\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>self<\/code>. \u0422\u0430\u043a\u0436\u0435 \u0431\u044b\u043b\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f <strong>isSubClassOf<\/strong>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u043c \u043a\u043b\u0430\u0441\u0441\u0430, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u043c \u043f\u043e \u0438\u043c\u0435\u043d\u0438. \u041e\u0431\u044a\u0435\u043a\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u043c \u043a\u043b\u0430\u0441\u0441\u0430 A, \u0435\u0441\u043b\u0438 \u043e\u043d \u043b\u0438\u0431\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0441\u0430\u043c\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 A, \u043b\u0438\u0431\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u0435\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432. \u0415\u0441\u043b\u0438 \u044d\u0442\u043e \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432, \u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442,  \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u043b\u0438 \u0435\u0433\u043e \u0442\u0438\u043f \u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u043c \u0442\u0438\u043f\u043e\u043c. \u042d\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <strong>overrides<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u044b \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430, \u0435\u0441\u043b\u0438 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0435\u0441\u043b\u0438<\/p>\n<ol>\n<li>\n<p>\u041e\u043d\u0438 \u0443\u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u043a\u043b\u0430\u0441\u0441\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041e\u043d\u0438 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0442 \u043f\u043e \u0442\u0438\u043f\u0443 \u0438 \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c.<\/p>\n<\/li>\n<li>\n<p>\u041e\u043d\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430. \u0422.\u0435. \u043e\u043d\u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b \u043f\u043e \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u043e\u043c\u0443 \u0442\u0438\u043f\u0443.<\/p>\n<\/li>\n<\/ol>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432 &#8212; <em>defineClass<\/em><\/p>\n<pre><code class=\"javascript\">\/\/\u0424\u0430\u0439\u043b Widgets.js \/\/\u0412\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438...  \/\/\u0412\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432. \/\/\u041f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 (superCtor) \/\/\u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u043d\u043e\u0432\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 (ctor) \/\/\u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 (before) \/\/\u043c\u0435\u0442\u043e\u0434\u044b \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u043a\u043b\u0430\u0441\u0441\u0430 (methods) \/\/\u043c\u0435\u0442\u043e\u0434\u044b \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0441\u0430\u043c\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 (statics) \/\/\u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u043a\u043b\u0430\u0441\u0441\u0430 (paramsDesc) function defineClass(superCtor, ctor, before, methods, statics, paramsDesc){   var c = {};   if(superCtor &amp;&amp; ctor){ \/\/if no constructor => return null.      ctor.prototype = Object.create(superCtor.prototype); \/\/inherit superclass prototype     c.callParent = superCtor; \/\/save superClass constructor function.   }   if(ctor){     ctor.prototype.constructor = ctor;     ctor.prototype.self = c;      if(methods)       ctor.prototype.extend(methods);     if(statics)       c.extend(statics);          c.callConstructor = ctor;     c.className = type(ctor.prototype);      if(!before)       before = (superCtor &amp;&amp; superCtor.prototype &amp;&amp; superCtor.prototype.self &amp;&amp; superCtor.prototype.self.beforeCreate);      \/\/copy beforeCreate into classObject.     if(before &amp;&amp; typeof before === 'function')       Object.defineProperty(c, \"beforeCreate\", {writable: false, enumerable: false, configurable: false,         value: before       });      \/\/inherit static properties from superclass.     if(superCtor &amp;&amp; superCtor.prototype &amp;&amp; superCtor.prototype.self)       c.extend(superCtor.prototype.self);      \/\/define .ctor params description.     c.constructorParameters = null;     c.constructorParameters = {}; \/\/do not copy object from parent. define new with props from parent.      \/\/copy from superclass into ctor.constructorParameters     if(superCtor &amp;&amp; superCtor.prototype &amp;&amp; superCtor.prototype.self &amp;&amp; superCtor.prototype.self.constructorParameters)       c.constructorParameters.extend(superCtor.prototype.self.constructorParameters);          \/\/and add own parameters.     if(paramsDesc)       c.constructorParameters.extend(paramsDesc); \/\/just attach props to new object from parent and paramDesc.      \/\/override properties and methods of parent with owns.     overrides(c, methods);     return c;   }   else return null; \/\/no ctor => no class object. };<\/code><\/pre>\n<p>\u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u043a\u043b\u0430\u0441\u0441\u0430, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u044b \u0441\u0430\u043c\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 (\u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e callConstructor \u0438\u043b\u0438 beforeCreate). \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0436\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u043a\u043b\u0430\u0441\u0441\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432\u044b\u0437\u043e\u0432\u0430 \u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 &#8212; <em>callParent<\/em>.<\/p>\n<pre><code class=\"javascript\">\/\/\u0424\u0430\u0439\u043b Widgets.js  \/\/\u041f\u0443\u0431\u043b\u0438\u0447\u043d\u0430\u044f (\u043e\u0442\u043a\u0440\u044b\u0442\u0430\u044f) \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u043a\u043b\u0430\u0441\u0441\u0430 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c className. \/\/\u0410\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430-\u0441\u043b\u043e\u0432\u0430\u0440\u044f args. \/\/\u0424\u0443\u043d\u043a\u0446\u0438\u044f beforeCreate(), \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u0430\u044f \u043d\u0438\u0436\u0435, \u043f\u0430\u0440\u0441\u0438\u0442 args \/\/\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u043a\u043b\u0430\u0441\u0441\u0430. Widgets.create = function(className, args){   if(typeof className !== 'string') \/\/name is not a string     throw new TypeError('Expected className as String!');   else if(!args || typeof args !== 'object') \/\/only keyword arguments are available for object creation.     throw new TypeError('Expected named-args (keyword arguments = kwargs) for constructor arguments!');    var rootObj = this;   className = className.split('.');    for(var i = 0; i &lt; className.length; i++)     if(className[i] in rootObj)       rootObj = rootObj[className[i]];    var classObj = rootObj; \/\/found ctor   if(!classObj.beforeCreate){     return new classObj.callConstructor(args);   }   else {     return classObj.beforeCreate(args, classObj);   } };  \/\/\u0412\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0438 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043a \u0442\u0438\u043f\u0430\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430. \/\/\u0410 \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u043a\u043b\u0430\u0441\u0441\u0430. function beforeCreate(){   var kwargs = Object.keys(arguments[0]); \/\/one single argument is object.   var classObject = arguments[1]; \/\/Class&lt;T>    \/\/\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0431\u0435\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e).   if(kwargs.length === 0 &amp;&amp; classObject.noDefaultConstructor)     throw new TypeError('Cannot call constructor with no-args as default constructor was prohibited and now illegal!');    else if(kwargs.length === 0) \/\/no-args => constructor without args.     return new classObject.callConstructor();    \/\/process each argument.   var args = new Array(kwargs.length);    \/\/\u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430.   for(var i = 0; i &lt; kwargs.length; i++){     var paramName = kwargs[i];      \/\/\u0418\u043c\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e \u0434\u043b\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430.     if(!classObject.constructorParameters || !classObject.constructorParameters[paramName])       throw new TypeError('Property ' + paramName + ' is not defined for class ' + classObject.className + '!');      \/\/\u0414\u0435\u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0440 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0438 \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.     var paramDesc = classObject.constructorParameters[paramName];     var paramValue = arguments[0][paramName];      \/\/\u0414\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u0442\u0438\u043b\u0435\u0432\u044b\u0445 \u0441\u0442\u0440\u043e\u043a \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043f\u043e\u043a\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0442\u043a\u0443 if     \/\/\u0421\u0442\u0438\u043b\u0435\u0432\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u0442\u0438\u043f cssStyle     \/\/\u0414\u0430\u043d\u043d\u043e\u0435 \u043d\u0430\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0438\u043f\u0430 \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u0442\u043d\u043e \u0442\u0438\u043f\u0443 string.     if(paramDesc.type === \"cssStyle\"){ \/\/\u0421\u0442\u0438\u043b\u0435\u0432\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430.              \/\/\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0435\u0441\u0442\u044c \u043b\u0438 getter \u0434\u043b\u044f \u0441\u0442\u0440\u043e\u043a\u0438 \u0432 cssStyleValidators       if(typeof cssStyleValidators[paramName] !== 'function')         throw new TypeError('Cannot find getter for cssStyle property: \"' + paramName + '\"!');              \/\/\u0415\u0441\u043b\u0438 \u043d\u0430\u0448\u043b\u0438 getter, \u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u043c \u0441\u0442\u0440\u043e\u043a\u0443 \u043a \u0432\u0438\u0434\u0443 \"styleProperty\": \"styleValue\";       paramValue = \"\" + paramName + \":\" + cssStyleValidators[paramName](paramValue);     }      \/\/\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432.     if(paramDesc.required &amp;&amp;        (         (paramValue =  (paramDesc.getter &amp;&amp; typeof paramDesc.getter === 'function' &amp;&amp; paramDesc.getter(paramValue)) || paramValue) !== paramValue  \/\/NaN || !isSubClassOf(paramValue, paramDesc.type) \/\/then is null => false.       )         )       throw new TypeError('Expected required parameter ' + paramName + ' with type ' + paramDesc.type + ' but actual ' + type(paramValue));      \/\/\u0415\u0441\u043b\u0438 \u044d\u0442\u043e \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0438 \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0435 \u043e\u043f\u0443\u0449\u0435\u043d\u043e (\u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043e)     \/\/\u0442\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0435\u0433\u043e.     else if(!paramDesc.required &amp;&amp; paramValue &amp;&amp;        ( (paramValue =  (paramDesc.getter &amp;&amp; typeof paramDesc.getter === 'function' &amp;&amp; paramDesc.getter(paramValue)) || paramValue) !== paramValue  \/\/NaN || !isSubClassOf(paramValue, paramDesc.type) \/\/then is null => false.       )     )       throw new TypeError('Expected non-required parameter ' + paramName + ' with type ' + paramDesc.type + ' but actual ' + type(paramValue));       \/\/\u0414\u043b\u044f \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0441 \u0442\u0438\u043f\u043e\u043c string, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043d\u0435 \u0437\u0430\u0434\u0430\u043d\u044b, \u0442\u043e \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0443\u0441\u0442\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438.     else if( (paramValue === null || paramValue === undefined) &amp;&amp; !paramDesc.required &amp;&amp; paramDesc.type === 'string')       paramValue = '';      \/\/\u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043d\u0430 null \u0438 undefined \u0443\u0436\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u044b.     \/\/\u0424\u0443\u043d\u043a\u0446\u0438\u044f isSubClassOf \u0432\u0435\u0440\u043d\u0451\u0442 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435, \u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0432\u044b\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 - null.     args[paramDesc.ordinal] = paramValue;   }    \/\/check omitted required parameters. ifPresent => error.   var missingParams = [];   kwargs = Object.keys(classObject.constructorParameters);   for(i = 0; i &lt; kwargs.length; i++){     paramDesc = classObject.constructorParameters[kwargs[i]];     if(paramDesc.required &amp;&amp; (paramDesc.ordinal >= args.length || args[paramDesc.ordinal] === undefined))       missingParams.push(kwargs[i]);   }    if(missingParams.length > 0)     throw new TypeError('Parameters ' + missingParams.toString() + ' are required and cannot be omitted or undefined!');     var instance = Object.create(classObject.callConstructor.prototype);   classObject.callConstructor.apply(instance, args);   return instance; };   \/\/\u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 instance. \/\/\u0427\u0435\u0440\u0435\u0437 \u0435\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 ctor (\u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e instance \u0431\u044b\u043b \u0441\u043e\u0437\u0434\u0430\u043d) \/\/\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u043a\u043b\u0430\u0441\u0441\u0430 (classObject)  \/\/\u0423 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043a\u043b\u0430\u0441\u0441\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438 \u0434\u0435\u043b\u0430\u0435\u043c \u043a\u043e\u0441\u0432\u0435\u043d\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430, \/\/\u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0435\u043c\u0443 \u043c\u0430\u0441\u0441\u0438\u0432 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 args. function callParent(instance, ctor, args){   if(ctor.prototype.self &amp;&amp; ctor.prototype.self.callParent &amp;&amp; typeof ctor.prototype.self.callParent === 'function'){     ctor.prototype.self.callParent.apply(instance, args); \/\/call parent if defined through self property. Self is a class object (Class&lt;T>)   } };<\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044e <em>beforeCreate<\/em>, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u0443\u044e \u0432\u044b\u0448\u0435, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u043e\u0431\u0449\u0438\u0439 \u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u043a\u043b\u0430\u0441\u0441\u0430 \u0434\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <em>defineClass<\/em>. \u0410 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <em>callParent<\/em>, \u043c\u043e\u0436\u043d\u043e \u0438\u043d\u0438\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0437\u043e\u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u043f\u0440\u044f\u043c\u043e\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f. \u0422\u0435\u043f\u0435\u0440\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c  \u043a\u043b\u0430\u0441\u0441\u044b \u0438 \u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u044b. \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0434\u0432\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430, \u0434\u043b\u044f \u0434\u0432\u0443\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043b\u0430\u0441\u0441 <em>Container<\/em> \u0438 \u0435\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043b\u0430\u0441\u0441 <em>Panel<\/em> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c.<\/p>\n<pre><code class=\"javascript\">\/\/\u0424\u0430\u0439\u043b Widgets.js \/\/\u0424\u0443\u043d\u043a\u0446\u0438\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u044b \u043a\u043b\u0430\u0441\u0441\u043e\u0432.  \/\/Container. function Container(width, height, background){    callParent(this, Container, arguments); \/\/check super and call super.ctor(args)    this.self.count += 1; \/\/count of containers (with subclasses instances)   this.root = document.createElement('div'); \/\/content.   if(!background)     background = '#CCFFFF';   this.background = background;    \/\/\u041f\u043e\u043a\u0430 \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0441\u0442\u0440\u043e\u043a\u0443 \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0432\u0440\u0443\u0447\u043d\u0443\u044e.   var css_style_str = \"\";   if(width)     css_style_str += 'width: ' width + 'px;';   if(height)     css_style_str += 'height: ' + height + 'px;';   if(css_style_str !== \"\"){     this.root.style = css_style_str;     this.root.style.setProperty('background-color', this.background);   }   else     this.root.style = \"width:0;height:0;\";    this.root.style.setProperty('position', 'relative'); };  \/\/Panel function Panel(width, height, background, title){   callParent(this, Panel, arguments); \/\/check super and call super.ctor(args)   this.title = (title) ? title : '';      \/\/create Title with backgrounds   this.titleBar = document.createElement('div');   this.root.appendChild(this.titleBar);    this.titleBar.style = \"position:relative; width:100%; height: 15%; top: 0; left: 0;\";   this.titleBar.style.setProperty('background-color', 'black');   this.titleBar.style.setProperty('color', 'white');   var span = document.createElement('span');   span.appendChild(document.createTextNode(this.title));   this.titleBar.appendChild(span);    var btn_close = document.createElement('button');   btn_close.appendChild(document.createTextNode('X'));   btn_close.type = 'reset';    var c_root = this.root;   btn_close.addEventListener('click', function(e){     c_root.remove();   }, false);   this.titleBar.appendChild(btn_close);   btn_close.style = \"position: absolute; top: 0; right: 0; width: 10%; height: 100%\"; };  \/\/define classes at namespace panels. Widgets.panels = {   Container: defineClass(null, Container, beforeCreate, {     getWidth: function(){return this.width;},     getHeight: function(){return this.height;},     setWidth: function(w){this.root.style.setProperty('width', w); this.width = w;},     setHeight: function(h){this.root.style.setProperty('height', h); this.height = h;}   }, {     \/\/properties of .self object.     count: 0,     getCount: function(){       return this.count; \/\/this is classObject. => self.getCount()     }   }, {     \/\/.ctor parameters     width: {type: 'number', required: true, getter: Number, ordinal: 0},     height: {type: 'number', required: true, getter: Number, ordinal: 1},     background: {type: 'string', required: false, ordinal: 2},   }),      Panel: defineClass(Container, Panel, beforeCreate, {     getTitle: function(){return this.title;},     setTitle: function(txt){this.titleBar.children[0].textContent = txt; this.title = txt;}   }, \/*no own statics. All inherited from parent*\/ null, {     \/\/ .ctor parameters     title: {type: 'string', required: false, ordinal: 3}   })    };<\/code><\/pre>\n<p>\u0414\u0430\u043d\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b \u0432 <em>panels<\/em> \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f <em>Widgets<\/em>. \u0424\u0443\u043d\u043a\u0446\u0438\u044f <em>create<\/em> \u0438\u0449\u0435\u0442 \u043a\u043b\u0430\u0441\u0441\u044b \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 Widgets, \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u0442 \u0438\u0437 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043a\u043b\u0430\u0441\u0441\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <em>beforeCreate<\/em> \u0438 <em>callConstructor<\/em>. \u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c <em>beforeCreate<\/em>, \u0442\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u043d\u0430, \u0438\u043d\u0430\u0447\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 (callConstructor). \u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u044b \u043a\u043b\u0430\u0441\u0441\u043e\u0432.<\/p>\n<pre><code class=\"javascript\">&lt;!--index.html--> &lt;script type=\"text\/javascript\" src=\".\/widgets-all.js\">&lt;\/script> &lt;script type=\"text\/javascript\">   Widgets.onReady(function(){     ...     var r = document.getElementById('root');     var p1 = Widgets.create('panels.Panel', {width: 200, height: 200, title: 'My Panel'});     var p2 = Widgets.create('panels.Panel', {width: 400, height: 300});     r.appendChild(p1.root);     r.appendChild(p2.root);   }); &lt;\/script><\/code><\/pre>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432 \u0432\u0435\u0431-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u044b\u0432\u043e\u0434. (\u0411\u0440\u0430\u0443\u0437\u0435\u0440 Chrome).<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/536\/2ba\/1e5\/5362ba1e57be750c9875957dbbd395ce.png\" width=\"1104\" height=\"819\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/536\/2ba\/1e5\/5362ba1e57be750c9875957dbbd395ce.png\"\/><figcaption><\/figcaption><\/figure>\n<h2>\u0427\u0442\u043e \u0434\u0430\u043b\u044c\u0448\u0435?<\/h2>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b. \u041c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0442\u043a\u0440\u044b\u0442\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043d\u0430\u043f\u043e\u0434\u043e\u0431\u0438\u0435 \u0442\u043e\u0439, \u0447\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u043d\u0438\u0436\u0435.<\/p>\n<pre><code class=\"javascript\">\/\/\u0424\u0430\u0439\u043b Widgets.js  var aliases = {}; \/\/\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u043f\u0441\u0435\u0432\u0434\u043e\u043d\u0438\u043c\u044b.  \/\/define - \u043e\u0442\u043a\u0440\u044b\u0442\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \/\/\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u043b\u0430\u0441\u0441 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c className \u0438 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438\/\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \/\/config, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438\/\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u0441\u0430\u043c\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 - statics. \/\/config \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0442\u0440\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0440\u0435\u0437\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u043f\u043e\u0434 \/\/\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 (\u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430, \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430, \u043f\u0441\u0435\u0432\u0434\u043e\u043d\u0438\u043c\u0430) Widgets.define = function(className, config, statics){   var names = className.split('.');   var rootObj = this;    \/\/traverse down through global object.   \/\/define nearest available namespace.   for(var i = 0; i &lt; names.length - 1; i++){     if(!(names[i] in rootObj))       rootObj[names[i]] = {};     else if('callConstructor' in rootObj[names[i]]) \/\/already defined       throw new TypeError('Cannot define class with the same name \"' + className + '\"');          rootObj = rootObj[names[i]];   }    if(rootObj[names[i]]) \/\/at namespace className is defined.     throw new TypeError('Cannot define class with the same name \"' + className + '\"');    var methods = {}; \/\/\u041c\u0435\u0442\u043e\u0434\u044b \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \u043a\u043b\u0430\u0441\u0441\u0430.   var parentClassObj = Object; \/\/\u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043b\u0430\u0441\u0441.   var parentCtr = Object; \/\/\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440.   var ctr = null; \/\/\u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430.   var options = Object.keys(config);   var alias = null; \/\/\u041f\u0441\u0435\u0432\u0434\u043e\u043d\u0438\u043c \u0434\u043b\u044f \u0438\u043c\u0435\u043d\u0438 \u043a\u043b\u0430\u0441\u0441\u0430.    \/\/for each properties at config.   for(var j = 0; j &lt; options.length; j++){     var option = options[j]; \/\/\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0441\u043f\u0435\u0446. \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c.      \/\/\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 'extend' => \u0438\u043c\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430.     \/\/\u0415\u0441\u043b\u0438 \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u043d\u0435\u0442 (\u043b\u0438\u0431\u043e \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 \u043d\u0435 \u0437\u0430\u0434\u0430\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f callConstructor)     \/\/\u0432\u044b\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435.     if(option === 'extend'){       parentClassObj = propertyAt(this, config[option]);       if(!parentClassObj || typeof parentClassObj !== 'object' || !parentClassObj.callConstructor || typeof parentClassObj.callConstructor !== 'function')         throw TypeError('Cannot find constructor of parent class \"' + config[option] + '\"');          parentCtr = parentClassObj.callConstructor;     }      \/\/\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 'constructor' => \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430.     else if(option === 'constructor'){       ctr = config[option];       if(!ctr || typeof ctr !== 'function')         throw new TypeError('Constructor property is not a function!');     }      \/\/\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 'alias' => \u0441\u0442\u0440\u043e\u043a\u0430, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0430\u044f \u043f\u0441\u0435\u0432\u0434\u043e\u043d\u0438\u043c (\u043a\u0440\u0430\u0442\u043a\u043e\u0435 \u0438\u043c\u044f \u0434\u043b\u044f \u043a\u043b\u0430\u0441\u0441\u0430).     else if(option === 'alias'){       if(typeof config[option] !== 'string')         throw TypeError('Alias property is not a string!');              alias = config[option];     }     else       methods[option] = config[option];   }    if(!ctr)     var ctr2 = function(){       callParent(this, ctr2, arguments);      };   else     var ctr2 = function(){       callParent(this, ctr2, arguments);       if(ctr2.c)         ctr2.c.apply(this, arguments);      };    ctr2.setName(names[i]);    \/\/ctr2 - \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 ctr. ctr2 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f.   \/\/\u0421\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0432 \u0441\u0432\u043e\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043d\u0435 \u043d\u0430\u0434\u043e.   rootObj[names[i]] = defineClass(parentCtr, ctr2, null, methods, statics);   if(ctr)     ctr2.c = ctr; \/\/\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u0430 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e ctr2.        if(alias)     aliases[alias] = rootObj[names[i]]; }<\/code><\/pre>\n<p>\u0412\u0441\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b, \u0430 \u0442\u043e\u0447\u043d\u0435\u0435 \u0438\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u044b (\u043c\u0435\u0442\u0430-\u0434\u0430\u043d\u043d\u044b\u0435) \u0445\u0440\u0430\u043d\u0438\u043c \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0435 Widgets. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0430\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 create\/define \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b \u0438\u0437 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0432 Widgets, \u043b\u0438\u0431\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 Widgets. \u041a\u0430\u0436\u0434\u044b\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c. \u0410 \u0447\u0435\u0440\u0435\u0437 defineClass &#8212; \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u043b\u0430\u0441\u0441, \u043f\u0435\u0440\u0435\u0434\u0430\u0432 \u0435\u043c\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u044b \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \u0438 \u0441\u0430\u043c\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e-\u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0438\u0445 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c.<\/p>\n<p>\u0412\u0441\u0451 \u044d\u0442\u043e \u0438\u043c\u0435\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f:<\/p>\n<ol>\n<li>\n<p>\u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0447\u0451\u0442\u043a\u043e\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0412 \u043a\u0430\u0436\u0434\u043e\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u0435 \u043f\u043e \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u044f\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u043e\u0431\u0449\u0435\u0433\u043e \u043f\u0440\u0435\u0434\u043a\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a A(p1, p2) -> B(p1, p2, p3) -> C(p1..p3, own4, own5) \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0442\u0440\u0438 \u043a\u043b\u0430\u0441\u0441\u0430, \u0433\u0434\u0435 \u0410 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u0412, \u0438 \u0421 &#8212; \u043f\u043e\u0442\u043e\u043c\u043e\u043a \u0412. \u0412 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0410, \u043f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435, \u0421 &#8212; \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0410, \u0438 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \u0412.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0440\u043e\u043a\u0430 \u0441\u043e \u0441\u0442\u0438\u043b\u0435\u043c \u0438 \u043e\u0431\u044b\u043a\u043d\u043e\u0432\u0435\u043d\u043d\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u043f\u043e \u0442\u0438\u043f\u0443 \u043d\u0435\u0440\u0430\u0437\u043b\u0438\u0447\u0438\u043c\u044b, \u043e\u0434\u043d\u0430\u043a\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0438\u043c\u0435\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0439 \u0442\u0438\u043f, \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u043e\u0442 \u0441\u0442\u0440\u043e\u043a\u0438. \u0418 \u0442\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0442\u0430\u043a\u0438\u0445 \u0441\u0442\u0440\u043e\u043a, \u0434\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430n\u0440\u0438\u0431\u0443\u0442\u0430 <strong>style<\/strong>.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043a\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u044c getters\/setters \u0432\u0440\u0443\u0447\u043d\u0443\u044e, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043b\u043e\u0433\u0438\u043a\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u043d\u043e\u0439. <\/p>\n<\/li>\n<li>\n<p>\u041d\u0435\u0442 \u043a\u0440\u043e\u0441\u0441-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0441\u0442\u0438.  \u0421\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u0441 IE \u043d\u0438\u043a\u0430\u043a\u0430\u044f.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 &#8212; \u043f\u0430\u043d\u0435\u043b\u0438, \u043e \u0442\u043e\u043c \u043a\u0430\u043a \u0440\u0435\u0448\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0441 getters\/setters, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0431 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 (\u043f\u0430\u043d\u0435\u043b\u0438) &#8212; layouts. <\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/div>\n<p> <!----> <!----><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\/ru\/post\/690852\/\"> https:\/\/habr.com\/ru\/post\/690852\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<h2>\u0412\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435<\/h2>\n<p>\u041d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e JS-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0442\u043e\u043c\u0443 \u043f\u0440\u043e\u0447\u0435\u0435. \u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0448\u044c \u043a\u0440\u0443\u043f\u043d\u044b\u0439 \u0438 \u043d\u0430\u0434\u0451\u0436\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u0438 \u043f\u0438\u0448\u0435\u0448\u044c \u0441\u0432\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u041d\u043e, \u0432\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u0443 \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u043a\u043e\u0434\u0430. \u041a\u0430\u0436\u0434\u044b\u0439 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0441\u0432\u043e\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0438 \u0441\u0432\u043e\u0438 \u0444\u0438\u0447\u0438, \u043f\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447, \u043d\u0430\u043f\u043e\u0434\u043e\u0431\u0438\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0443, \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u0445\u0443\u043a\u043e\u0432, \u0441\u0441\u044b\u043b\u043e\u043a, \u0434\u0430\u043d\u043d\u044b\u0445. \u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438. \u0418 \u0440\u0430\u0437\u043c\u0435\u0440 \u0432\u0441\u0435\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043f\u043e\u0440\u043e\u0439 \u0434\u043e\u0445\u043e\u0434\u0438\u0442 \u0430\u0436 \u0434\u043e \u0433\u0438\u0433\u0430\u0431\u0430\u0439\u0442\u043e\u0432. \u0412 \u0438\u0442\u043e\u0433\u0435, \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439, <s>\u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439<\/s>, \u043b\u0443\u0447\u0448\u0438\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a.<\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u044b \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0430\u0433\u0438, \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u042f \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439, \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<details class=\"spoiler\">\n<summary>\u0414\u0438\u0441\u043a\u043b\u0435\u0439\u043c\u0435\u0440<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b. \u0425\u043e\u0442\u044f \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u0431\u044b\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043f\u043e\u0434 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 Chrome \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438, \u0430\u0432\u0442\u043e\u0440 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 API, \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0435\u0439 ECMAScript 5. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0430\u0442\u044c\u0438 \u043a\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 API \u043d\u0435 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b\u0439 \u0441 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c IE (Internet Explorer). <\/p>\n<\/div>\n<\/details>\n<h2>\u0421 \u0447\u0435\u0433\u043e \u043d\u0430\u0447\u043d\u0451\u043c.<\/h2>\n<p>\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0435\u0448\u0438\u043c, \u0438\u0437 \u0447\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a. \u041c\u043e\u0436\u043d\u043e \u0442\u0443\u043f\u043e \u043f\u0438\u0441\u0430\u0442\u044c  \u0432\u0441\u0451 \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b. \u0412 \u0438\u0442\u043e\u0433\u0435, \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u044c \u0441 \u0444\u0430\u0439\u043b\u043e\u043c, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u0438\u0437 100 \u0442\u044b\u0441\u044f\u0447 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u0432\u0441\u0451 \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b, \u043a\u0430\u0436\u0434\u044b\u0439 \u0444\u0430\u0439\u043b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432 \u0432\u0438\u0434\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f, \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043e\u0434\u0438\u043d \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0441\u0451 \u043f\u043e\u0434\u0442\u044f\u043d\u0435\u0442. \u041e\u043a\u0435\u0439, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0436\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e. \u041d\u0430\u043f\u0438\u0448\u0435\u043c <em>index.html<\/em> \u0441 \u043d\u0430\u0448\u0438\u043c \u0433\u043b\u0430\u0432\u043d\u044b\u043c \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u043c: &#171;<em>widgets-all.js<\/em>&#171;. \u0412 \u0442\u044d\u0433\u0435 <code>&lt;body><\/code> \u0437\u0430\u0434\u0430\u0434\u0438\u043c <code>&lt;div><\/code> \u0441 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c <strong>root<\/strong>. \u0414\u0430\u043d\u043d\u044b\u0439 <code>&lt;div><\/code> \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0410 \u0447\u0435\u0440\u0435\u0437 \u0442\u044d\u0433 <code>&lt;style><\/code> \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e, \u043b\u0435\u0432\u043e\u0433\u043e \u0443\u0433\u043b\u0430.<\/p>\n<pre><code class=\"xml\">&lt;!DOCTYPE html> &lt;html>   &lt;head>     &lt;title>Main GUI&lt;\/title>     &lt;meta charset=\"UTF-8\">     &lt;style>       #root {         position: \"absolute\";         left: \"0px\";         top: \"0px\";       }     &lt;\/style>     &lt;script type=\"text\/javascript\" src=\".\/widgets-all.js\">     &lt;\/script>   &lt;\/head>   &lt;body>     &lt;div id=\"root\">     &lt;\/div>   &lt;\/body> &lt;\/html><\/code><\/pre>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448 &#171;widgets-all.js&#187; \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u043b \u043c\u043e\u0434\u0443\u043b\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e. \u0418 \u0432\u043e\u0442 \u0442\u0443\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u041f\u0415\u0420\u0412\u0410\u042f \u041f\u0420\u041e\u0411\u041b\u0415\u041c\u0410. \u0415\u0441\u043b\u0438 \u043c\u044b \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0442\u044d\u0433\u0438 <code>&lt;script><\/code> \u0438 \u0432\u043d\u0435\u0434\u0440\u044f\u0435\u043c \u0438\u0445 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442, \u0442\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442 \u0438\u0445 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u044f\u0432\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 &#171;<em>async&#187;<\/em> \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <strong>false<\/strong>. \u0410 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0441\u043a\u0440\u0438\u043f\u0442 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u043f\u043e\u0437\u0436\u0435, \u0447\u0435\u043c \u044d\u0442\u043e\u0433\u043e \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0438\u0437-\u0437\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430 &#171;varialbeName is not a function&#187;. \u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u044d\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 &#8212; <code>document.write(htmlStr)<\/code>. <\/p>\n<p>\u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434<\/p>\n<pre><code class=\"javascript\">\/\/\u0424\u0430\u0439\u043b widgets-all.js  \/\/\u0417\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c HTMLParser \u043f\u0440\u0435\u0440\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \/\/\u0414\u0430\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0430\u0432\u044b\u043c\u0438 \u0431\u0440\u0430\u0442\u044c\u044f\u043c\u0438 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0442\u044d\u0433\u0430. \/\/\u0421\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0441\u0430\u043c \u0442\u044d\u0433 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043b\u0438\u0431\u043e \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043f\u043e id (\u0435\u0441\u043b\u0438 \u0435\u0433\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u043c\u0443) \/\/\u043b\u0438\u0431\u043e \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e document.currentScript.  document.write('&lt;script type=\"text\/javascript\" src=\".\/Module1.js\">&lt;\/script>'); document.write('&lt;script type=\"text\/javascript\" src=\".\/Widgets.js\">&lt;\/script>');<\/code><\/pre>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0448\u0435\u0433\u043e &#171;widgets-all.js&#187; \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0434\u0432\u0430 \u0442\u044d\u0433\u0430 <code>&lt;script><\/code>. \u0415\u0441\u043b\u0438 \u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u0441\u0430\u043c\u043e\u0433\u043e &#171;widgets-all.js&#187; \u0431\u044b\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0442\u044d\u0433\u0438 <code>&lt;script><\/code>, \u0442\u043e \u043e\u043d\u0438 \u043d\u0435 \u0437\u0430\u0442\u0440\u0443\u0442\u0441\u044f, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0435\u0449\u0451 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d. \u041a\u043e\u0433\u0434\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d, \u0442\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c <strong>document.write<\/strong> <strong>\u043d\u0435\u043b\u044c\u0437\u044f<\/strong>, \u0438\u043d\u0430\u0447\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0442\u0435\u0440\u0435\u0442\u044c \u0432\u0435\u0441\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0421\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 &#8212; \u043a\u043e\u0441\u0442\u044b\u043b\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0431\u0443\u0434\u0443\u0442 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0442\u0430\u0432\u043a\u0443 \u0438 \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0445 \u0442\u044d\u0433\u043e\u0432 &lt;script>. \u041d\u043e \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440.<\/p>\n<h2>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044f.<\/h2>\n<p>\u0418\u0442\u0430\u043a, \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u043c \u0441\u043a\u0435\u043b\u0435\u0442 \u043e\u0434\u0438\u043d\u043e\u0447\u043d\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f. \u041c\u043e\u0434\u0443\u043b\u044c \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u043e\u0436\u0435\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u0438, \u0438 \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0434\u0430\u0432\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0437\u0430\u043a\u0440\u044b\u0442\u043e\u043c\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0443. \u0417\u0430\u043a\u0440\u044b\u0442\u043e\u0441\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439. \u041d\u0438\u0436\u0435 \u0434\u0430\u043d \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c<\/p>\n<pre><code class=\"javascript\">\/\/define module1 at global scope (as window property) var module1 = (function(){   var module1 = null; \/\/local scope.   module1 = {};   return module1; \/\/assign to global name local object. }());<\/code><\/pre>\n<p>\u0418 \u0442\u0443\u0442, \u0440\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u0412\u0422\u041e\u0420\u0410\u042f \u041f\u0420\u041e\u0411\u041b\u0415\u041c\u0410. \u041d\u0410\u0418\u041c\u0415\u041d\u041e\u0412\u0410\u041d\u0418\u042f \u041c\u041e\u0413\u0423\u0422 \u0411\u042b\u0422\u042c \u041d\u0415 \u0423\u041d\u0418\u041a\u0410\u041b\u042c\u041d\u042b\u041c\u0418. \u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043b\u0443\u0447\u0430\u0439, \u044d\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u0441\u0432\u043e\u0435\u0439 \u0436\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438\u043c\u0435\u043d\u0430 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u043d\u0435 \u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0443\u0447\u0451\u0442\u0430 \u0438\u043c\u0435\u043d\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432.<\/p>\n<pre><code class=\"javascript\">var module1 = (function(){   var m = null; \/\/local scope. Rename var to distinguish global name.    \/\/defined above at someone else.   if(typeof module1 != \"undefined\")      var _____module1 = module1; \/\/save original value.      m = {     resolveConflict: function(){       window.module1 = _____module1; \/\/reset to original value in global scope.       return this; \/\/return new value.     }   };   return m; \/\/assign to global name local object. }());<\/code><\/pre>\n<p>\u041c\u044b \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043b\u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e. \u0415\u0441\u043b\u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0443\u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0430, \u0442\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0435\u0451 \u0441\u0442\u0430\u0440\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e &#171;_____module1&#187;. \u0410 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 <em>resolveConflict<\/em> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0435\u0451 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442. \u0410 \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u043e\u0442\u0435\u0440\u044f\u0442\u044c \u0435\u0451 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0435\u0433\u043e \u044d\u0442\u043e\u0439 \u0436\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439.<\/p>\n<p>\u041d\u043e \u043f\u043e\u043c\u0438\u043c\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438\u043c\u0451\u043d, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0435\u0449\u0451 \u043e\u0434\u043d\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u041d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u043a\u0440\u0438\u043f\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043d\u0430\u0448\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u043b\u0441\u044f \u0442\u043e\u0433\u0434\u0430 \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u0443\u0436\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d. \u0421\u0435\u0439\u0447\u0430\u0441 \u0436\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u0442\u044d\u0433\u043e\u0432 (\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432) \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435. <\/p>\n<p>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>document.readyState<\/code>. <\/p>\n<ul>\n<li>\n<p><code>\"loading\"<\/code> &#8212; \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f. \u041d\u0435 \u0432\u0441\u0435 \u0442\u044d\u0433\u0438 \u0431\u044b\u043b\u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043d\u044b.<\/p>\n<\/li>\n<li>\n<p><code>\"interactive\"<\/code> &#8212; \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0430\u043d\u0430\u043b\u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0451\u043d. \u041a \u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u043c\u0435\u043d\u0442\u0443, \u0432\u0441\u0435 \u0442\u044d\u0433\u0438 \u0431\u044b\u043b\u0438 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u043d\u044b \u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0432 DOM. \u041e\u0434\u043d\u0430\u043a\u043e, \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 &lt;iframe> \u0438 &lt;img>, &lt;script> \u043f\u043e src \u0435\u0449\u0451 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043e.<\/p>\n<\/li>\n<li>\n<p><code>\"complete\"<\/code> &#8212; \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u043a\u0440\u0438\u043f\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u043b\u0441\u044f \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 <strong>&#171;interactive&#187; <\/strong>\u0438\u043b\u0438 <strong>&#171;complete&#187;<\/strong>.<\/p>\n<p>\u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0439\u0442\u0438 \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u043f\u0443\u0442\u0451\u043c \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0442\u044d\u0433\u0430 <code>&lt;body><\/code>, \u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0441 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u043c\u0438 \u043a\u043b\u0430\u0441\u0442\u044c \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <strong>root<\/strong>. <\/p>\n<p>\u041d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u043a\u0440\u0438\u043f\u0442 \u0432 \u0442\u044d\u0433\u0435 <code>&lt;head><\/code> \u043f\u0435\u0440\u0435\u0434 <code>&lt;body><\/code>, \u0442\u043e \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0441 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u043c, \u0435\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 &#171;<strong>interactive<\/strong>&#187; \u0438\u043b\u0438 &#171;<strong>complete<\/strong>&#171;. <\/p>\n<p>\u041d\u0438\u0436\u0435 \u0434\u0430\u043d \u043a\u043e\u0434, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c.<\/p>\n<pre><code class=\"javascript\">\/\/\u0424\u0430\u0439\u043b Widgets.js \/\/\u042d\u0442\u043e\u0442 \u043c\u043e\u0434\u0443\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u0435 \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438. \/\/\u0412 \u043d\u0451\u043c \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f resolveConflict  \/\/(\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043e\u0434\u043d\u043e\u0438\u043c\u0451\u043d\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f)  var Widgets = (function(){    \/\/\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0438\u043c\u0451\u043d.   \/\/\u0412\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e resolveConflict()   if(typeof Widgets != \"undefined\")     var _____Widgets  = Widgets;      var m = {     utils: {       module1: module1 \/\/global name defined previously at Module1.js script.     }   };    var isBoundReady = false; \/\/\u0417\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d \u043b\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a   var isReady = false; \/\/\u0417\u0430\u0433\u0440\u0443\u0436\u0435\u043d \u043b\u0438 DOM.   var readyList = []; \/\/\u0421\u043f\u0438\u0441\u043e\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u0439 f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0432\u044b\u0437\u0432\u0430\u043d\u044b, \u043a\u043e\u0433\u0434\u0430 DOM \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d.    var userAgent = navigator.userAgent.toLowerCase(); \/\/name of current browser    \/\/browser names   var browser = { version: (userAgent.match(\/.+(?:rv|it|ra|ie)[\\\/: ]([\\d.]+)\/) || [])[1], safari: \/webkit\/.test(userAgent), chrome: \/chrome\/.test(userAgent), opera: \/opera\/.test(userAgent), msie: \/msie\/.test(userAgent) &amp;&amp; !\/opera\/.test(userAgent), mozilla: \/mozilla\/.test(userAgent) &amp;&amp; !\/(compatible|webkit)\/.test(userAgent)   };      \/\/private handler   function ready(){     if(isReady) \/\/DOM loaded only once.       return;            isReady = true; \/\/DOM is loaded.        \/\/exec each f on readyList       for(var i = 0; i &lt; readyList.length; i++){         readyList[i]();       }        readyList = null; \/\/clear list.        \/\/and remove event handler.       if(browser.mozilla || browser.opera || browser.chrome)         document.removeEventListener(\"DOMContentLoaded\", ready, false);        \/\/for IE browser       var s = document.getElementById('__ie_init');       if(s)         s.remove(); \/\/with onreadystatechange hndlr.   }; \/\/end ready()    \/\/registrate ready handler.   function bindReady(){     if(isBoundReady) \/\/execute only once.       return;          isBoundReady = true; \/\/flag that handler registrated.      if (browser.mozilla || browser.opera || browser.chrome ){       document.addEventListener(\"DOMContentLoaded\", ready, false );     }      \/\/ If IE is used, use the excellent hack by Matthias Miller     \/\/ http:\/\/www.outofhanwell.com\/blog\/index.php?title=the_window_onload_problem_revisited     else if (browser.msie ) {        \/\/ Again use document.write to synchronous add &lt;script>       document.write(\"&lt;scr\" + \"ipt id=__ie_init defer=true \" +          \"src=\/\/:>&lt;\\\/script>\");        \/\/ Use the defer script hack       var script = document.getElementById(\"__ie_init\");        if ( script ) {          script.onreadystatechange = function() {           if ( this.readyState != \"complete\" ) return;           ready();         };       }            } else if (browser.safari ){          \/\/ Continually check to see if the document.readyState is valid         timers.safariTimer = setInterval(function(){           if ( document.readyState == \"loaded\"              || document.readyState == \"complete\"             || document.readyState == \"interactive\") {             clearInterval( timers.safariTimer );             timers.safariTimer = null;             ready();           }         }, 10);     }    }; \/\/end bindReady()    \/\/public function   \/\/Executes f only when document has been loaded or parsed   m.onReady = function(f){     if(typeof f !== 'function')       throw new TypeError('onReady(): Argument f is not a function');      bindReady(); \/\/registrate handler.     if(isReady){       f.apply(this, f.arguments); \/\/call f with its arguments.     }     else {       \/\/append f.        \/\/anonymous function is wrapper to preserve context and arguments.      <\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\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-339202","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/339202","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=339202"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/339202\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=339202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=339202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=339202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}