{"id":467656,"date":"2025-07-18T23:52:18","date_gmt":"2025-07-18T23:52:18","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=467656"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=467656","title":{"rendered":"\u0411\u044b\u0441\u0442\u0440\u044b\u0439 \u0441\u0442\u0430\u0440\u0442: \u043f\u0438\u0448\u0435\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n
<\/figure>\n

\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440. \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041c\u0430\u0440\u0430\u0442 \u0418\u0441\u0430\u0435\u0432. \u0412\u00a0\u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043a\u0440\u0430\u0442\u043a\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u044e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u0441\u0430\u043c\u043e\u043f\u0438\u0441\u043d\u043e\u0433\u043e \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0438 \u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0434\u043b\u044f\u00a0\u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u2011\u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u0430, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u0434\u043b\u044f\u00a0\u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041f\u043e\u0434\u0447\u0435\u0440\u043a\u043d\u0443: \u0441\u0442\u0430\u0442\u044c\u044f \u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438 \u043d\u0435\u00a0\u043e\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u0442 enterprise\u2011\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443.<\/p>\n

\u0427\u0442\u043e\u0431\u044b \u043c\u043e\u0439 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u00a0\u0431\u044b\u043b \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043d\u044b\u043c, \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u043a\u0430\u0436\u0443 \u043a\u043e\u0434 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041c\u043e\u0436\u0435\u0442\u0435 \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u044f\u043c\u043e \u0432\u00a0\u043a\u043e\u043d\u0441\u043e\u043b\u044c, \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0438 \u043f\u043e\u00a0\u043c\u0435\u0440\u0435 \u0447\u0442\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0438 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c.<\/p>\n

\n\u041a\u043e\u0434 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430<\/summary>\n
\n
let reconcileApp = () => {}; function html(tag, props = {}, children = []) {   return {     tag,     props,     children,     type: \"element\",     domRef: undefined,   }; } function primitive(value) {   return {     type: \"primitive\",     value,   }; } class Component {   type = \"component\";   rendered;   constructor(props = {}) {     this.props = props;   }   setState(nextState) {     this.state = nextState;     reconcileApp();   }   render() {}   onMount() {}   onUnmount() {} } function mount(node, rootDOMElement) {   switch (node.type) {     case \"element\": {       const { props, tag } = node;       node.domRef = document.createElement(tag);       patchDOMElement(props, node.domRef);       rootDOMElement.appendChild(node.domRef);       node.children.forEach((childNode) => mount(childNode, node.domRef));       break;     }     case \"component\":       node.rendered = node.render();       node.onMount();       mount(node.rendered, rootDOMElement);       break;     case \"primitive\":       node.domRef = document.createTextNode(node.value);       rootDOMElement.appendChild(node.domRef);       break;     default:       throw Error(\"\u041d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u044b\u0439 \u0443\u0437\u0435\u043b: \", node.type);   } } function unmount(node) {   switch (node.type) {     case \"element\": {       node.domRef.remove();       node.children.forEach((childNode) => unmount(childNode));       break;     }     case \"component\":       node.onUnmount();       unmount(node.rendered);       break;     case \"primitive\":       node.domRef.remove();       break;     default:       throw Error(\"\u041d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u044b\u0439 \u0443\u0437\u0435\u043b: \", node.type);   } } function patchDOMElement(props, element) {   const attributes = Object.keys(props);   for (attr of attributes) {     element[attr] = props[attr];   } } function isEqualNodes(node1, node2) {   if (node1.type !== node2.type) {     return false;   }   switch (node1.type) {     case \"element\":       return node1.tag === node2.tag;     case \"component\":       return (         Object.getPrototypeOf(node1) === Object.getPrototypeOf(node2) &&         node1.props.key === node2.props.key       );     case \"primitive\":       return node1.value === node2.value;     default:       return false;   } } function reconcile(prevNode, nextNode, parentDOMElement) {   if (!prevNode && nextNode) {     mount(nextNode, parentDOMElement);     return nextNode;   } else if (prevNode && !nextNode) {     unmount(prevNode);     return;   } else if (!prevNode && !nextNode) {     return;   } else if (prevNode && nextNode) {     const isEqual = isEqualNodes(prevNode, nextNode);     if (isEqual) {       if (prevNode.type === \"element\") {         const { props, children: nextChildren } = nextNode;         const { domRef, children: prevChildren } = prevNode;         prevNode.props = props;         patchDOMElement(props, domRef);         const length = Math.max(prevChildren.length, nextChildren.length);         for (let i = 0; i < length; i++) {           prevChildren[i] = reconcile(             prevChildren[i],             nextChildren[i],             prevNode.domRef           );         }         return prevNode;       } else if (prevNode.type === \"component\") {         prevNode.props = nextNode.props;         prevNode.rendered = reconcile(           prevNode.rendered,           prevNode.render(),           parentDOMElement         );         return prevNode;       } else if (prevNode.type === \"primitive\") {         return prevNode;       } else {         throw Error(\"\u0423\u043f\u0441!\");       }     } else {       unmount(prevNode);       mount(nextNode, parentDOMElement);       return nextNode;     }   } } function createApp(App, root) {   let vdom = new App();   mount(vdom, root);   reconcileApp = () => {     vdom = reconcile(vdom, vdom, root);   }; }<\/code><\/pre>\n<\/div>\n<\/details>\n
\n\u041a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/summary>\n
\n
class Input extends Component {   state = { value: \"\" };   constructor(props) {     super(props);   }   render() {     return html(\"div\", {}, [       html(\"input\", {         oninput: (event) => {           this.setState({             ...this.state,             value: event.target.value,           });         },         value: this.state.value,       }),       html(         \"button\",         {           onclick: () => {             if (this.state.value) {               this.props.onAdd(this.state.value);               this.setState({                 ...this.state,                 value: \"\",               });             }           },           disabled: !this.state.value,         },         [primitive(\"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c\")]       ),     ]);   } } class Item extends Component {   constructor(props) {     super(props);   }   render() {     return html(\"li\", {}, [       primitive(this.props.name),       html(\"button\", { onclick: this.props.onRemove }, [primitive(\"\u0423\u0434\u0430\u043b\u0438\u0442\u044c\")]),     ]);   } }  class List extends Component {   constructor(props) {     super(props);   }   render() {     return html(       \"ul\",       {},       this.props.list.map((item) => {         return new Item({           name: item,           key: item,           onRemove: () => this.props.onRemove(item),         });       })     );   } }  class ToDoApp extends Component {   state = { list: [] };   render() {     return html(\"div\", {}, [       new Input({         onAdd: (item) => {           this.setState({             list: [...this.state.list, item],           });         },       }),       new List({         list: this.state.list,         onRemove: (item) => {           this.setState({             list: this.state.list.filter((i) => i !== item),           });         },       }),     ]);   } } createApp(ToDoApp, document.body);<\/code><\/pre>\n<\/div>\n<\/details>\n
\u0418\u0437 \u0447\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a<\/h2>\n