{"id":2532,"date":"2020-03-31T13:31:38","date_gmt":"2020-03-31T05:31:38","guid":{"rendered":"http:\/\/www.yuguoxy.com\/geekhome\/?p=2532"},"modified":"2026-08-18T12:35:26","modified_gmt":"2026-08-18T04:35:26","slug":"%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e7%9a%84%e5%8e%86%e5%8f%b2%e5%92%8c%e8%b6%8b%e5%8a%bf","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=2532","title":{"rendered":"\u524d\u7aef\u5f00\u53d1\u7684\u5386\u53f2\u548c\u8d8b\u52bf"},"content":{"rendered":"<section id=\"wenyan\" style=\"font-family: system-ui, 'Apple Color Emoji', 'Segoe UI', 'Segoe UI Symbol', 'Noto Sans', Roboto, sans-serif; line-height: 1.75; font-size: 16px; color: #000000; caret-color: #000000;\" data-provider=\"WenYan\">\n<p style=\"margin: 1em 0px;\">\u524d\u7aef\u662f\u9488\u5bf9\u6d4f\u89c8\u5668\u7684\u5f00\u53d1\uff0c\u4ee3\u7801\u5728\u6d4f\u89c8\u5668\u91cc\u8dd1\uff1b\u540e\u7aef\u9488\u5bf9\u670d\u52a1\u5668\uff0c\u4ee3\u7801\u5728\u670d\u52a1\u5668\u8dd1\u3002\u4e92\u8054\u7f51\u65e9\u671f\u4e8c\u8005\u5e76\u4e0d\u5206\u5bb6\uff1a\u524d\u7aef\u4ee3\u7801\u662f\u540e\u7aef\u7684\u4e00\u90e8\u5206\u3002\u540e\u6765 <strong style=\"color: #4870ac;\">Ajax<\/strong>\u3001\u524d\u7aef MVC \/ MVVM\u3001<strong style=\"color: #4870ac;\">SPA<\/strong> \u548c <strong style=\"color: #4870ac;\">Node<\/strong> \u628a\u8fd9\u4ef6\u4e8b\u62c6\u5f00\uff0c\u53c8\u91cd\u65b0\u63a5\u5230\u4e00\u8d77\u3002<\/p>\n<p style=\"margin: 1em 0px;\">\u8fd9\u6761\u7ebf\u53ef\u4ee5\u8bb0\u6210\uff1a\u524d\u540e\u7aef\u4e0d\u5206 \u2192 \u540e\u7aef MVC \u91cc\u524d\u7aef\u53ea\u662f\u6a21\u677f \u2192 Ajax \u8ba9\u524d\u7aef\u72ec\u7acb\u62ff\u6570\u636e \u2192 \u524d\u7aef\u81ea\u5df1\u4e5f\u6709 MVC\/MVVM \u2192 \u5355\u9875\u5e94\u7528 \u2192 REST \u63a5\u53e3\u901a\u4fe1 \u2192 Node \u8ba9\u524d\u7aef\u5de5\u7a0b\u5e08\u80fd\u5199\u540e\u7aef\uff0c\u8d70\u5411\u5168\u6808\u3002<\/p>\n<table style=\"display: table; text-align: left; overflow: auto; border-collapse: collapse; margin: 1.4em auto; max-width: 100%; table-layout: fixed; overflow-wrap: break-word; word-break: break-all;\" width=\"800\">\n<thead>\n<tr>\n<th style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top; text-align: center; font-weight: bold; color: #4870ac; background: #f7f7f7;\">\u9636\u6bb5<\/th>\n<th style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top; text-align: center; font-weight: bold; color: #4870ac; background: #f7f7f7;\">\u524d\u7aef\u89d2\u8272<\/th>\n<th style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top; text-align: center; font-weight: bold; color: #4870ac; background: #f7f7f7;\">\u5173\u952e\u6280\u672f<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u524d\u540e\u7aef\u4e00\u4f53<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u540e\u7aef\u8f93\u51fa\u7684 HTML \u4e00\u90e8\u5206<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u670d\u52a1\u7aef\u6e32\u67d3\u6574\u9875<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u540e\u7aef MVC<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u6a21\u677f\u5de5\u7a0b\u5e08\uff08\u53ea\u662f V\uff09<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">PHP \/ Laravel \u7b49<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">Ajax \/ Web 2.0<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u72ec\u7acb\u8bf7\u6c42\u6570\u636e\u3001\u505a\u4ea4\u4e92<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">Gmail\u3001Google \u5730\u56fe<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">SPA \/ \u5168\u6808<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">\u6d4f\u89c8\u5668\u91cc\u7684\u5e94\u7528 + \u53ef\u5199 Node<\/td>\n<td style=\"border: 1px solid #d9dfe4; padding: 9px 12px; font-size: 0.75em; line-height: 22px; vertical-align: top;\">Backbone\u3001Angular\u3001Vue\u3001Node<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u4e00\u3001\u4ec0\u4e48\u662f\u524d\u7aef\uff0c\u4ee5\u53ca\u524d\u540e\u7aef\u4e0d\u5206\u7684\u65f6\u4ee3<\/h2>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section>\u524d\u7aef\uff1a\u9488\u5bf9\u6d4f\u89c8\u5668\u7684\u5f00\u53d1\uff0c\u4ee3\u7801\u5728\u6d4f\u89c8\u5668\u8fd0\u884c<\/section>\n<\/li>\n<li>\n<section>\u540e\u7aef\uff1a\u9488\u5bf9\u670d\u52a1\u5668\u7684\u5f00\u53d1\uff0c\u4ee3\u7801\u5728\u670d\u52a1\u5668\u8fd0\u884c<\/section>\n<\/li>\n<\/ul>\n<p style=\"margin: 1em 0px;\"><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/03\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200331132701.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-2534\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/03\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200331132701.png\" alt=\"\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200331132701\" width=\"641\" height=\"301\"><\/a><\/p>\n<p style=\"margin: 1em 0px;\">\u4e92\u8054\u7f51\u53d1\u5c55\u65e9\u671f\uff0c\u524d\u540e\u7aef\u5f00\u53d1\u662f\u4e00\u4f53\u7684\uff0c\u524d\u7aef\u4ee3\u7801\u662f\u540e\u7aef\u4ee3\u7801\u7684\u4e00\u90e8\u5206\uff1a\u540e\u7aef\u6536\u5230\u6d4f\u89c8\u5668\u8bf7\u6c42\uff0c\u751f\u6210\u9759\u6001\u9875\u9762\uff0c\u518d\u53d1\u7ed9\u6d4f\u89c8\u5668\u3002<\/p>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u4e8c\u3001\u540e\u7aef MVC\uff1a\u524d\u7aef\u53ea\u662f V<\/h2>\n<p style=\"margin: 1em 0px;\">\u90a3\u65f6\u7f51\u7ad9\u5f00\u53d1\u91c7\u7528\u540e\u7aef MVC\uff1a<\/p>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section>Model\uff08\u6a21\u578b\u5c42\uff09\uff1a\u63d0\u4f9b \/ \u4fdd\u5b58\u6570\u636e<\/section>\n<\/li>\n<li>\n<section>Controller\uff08\u63a7\u5236\u5c42\uff09\uff1a\u6570\u636e\u5904\u7406\uff0c\u5b9e\u73b0\u4e1a\u52a1\u903b\u8f91<\/section>\n<\/li>\n<li>\n<section>View\uff08\u89c6\u56fe\u5c42\uff09\uff1a\u5c55\u793a\u6570\u636e\uff0c\u63d0\u4f9b\u7528\u6237\u754c\u9762<\/section>\n<\/li>\n<\/ul>\n<p style=\"margin: 1em 0px;\">\u524d\u7aef\u53ea\u662f\u540e\u7aef MVC \u7684 V\u3002\u4ee5 PHP \u6846\u67b6 Laravel \u4e3a\u4f8b\uff1a<\/p>\n<p style=\"margin: 1em 0px;\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/299571d8c2254b76a5cde9ce4623c9f0\" alt=\"\u524d\u7aef\u5f00\u53d1\u7684\u5386\u53f2\u548c\u8d8b\u52bf\"><\/p>\n<p style=\"margin: 1em 0px;\">\u90a3\u65f6\u7684\u524d\u7aef\u5de5\u7a0b\u5e08\u5b9e\u9645\u4e0a\u662f\u6a21\u677f\u5de5\u7a0b\u5e08\uff0c\u8d1f\u8d23\u5199\u9875\u9762\u6a21\u677f\u3002\u540e\u7aef\u8bfb\u53d6\u6a21\u677f\u3001\u66ff\u6362\u53d8\u91cf\u3001\u6e32\u67d3\u51fa\u9875\u9762\u3002\u5178\u578b PHP \u6a21\u677f\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">&lt;html&gt;\n &lt;head&gt;&lt;title&gt;Car {{ $car-&gt;id }}&lt;\/title&gt;&lt;\/head&gt;\n &lt;body&gt;\n &lt;h1&gt;Car {{ $car-&gt;id }}&lt;\/h1&gt;\n &lt;ul&gt;\n &lt;li&gt;Make: {{ $car-&gt;make }}&lt;\/li&gt;\n &lt;li&gt;Model: {{ $car-&gt;model }}&lt;\/li&gt;\n &lt;li&gt;Produced on: {{ $car-&gt;produced_on }}&lt;\/li&gt;\n &lt;\/ul&gt;\n &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u4e09\u3001Ajax \u4e0e Web 2.0<\/h2>\n<p style=\"margin: 1em 0px;\">Ajax \u6539\u53d8\u4e86\u4e00\u5207\u30022004 \u5e74 Gmail\u30012005 \u5e74 Google \u5730\u56fe\u4e4b\u540e\uff0c\u524d\u7aef\u4e0d\u518d\u53ea\u662f\u540e\u7aef\u6a21\u677f\uff0c\u53ef\u4ee5\u72ec\u7acb\u62ff\u5230\u5404\u79cd\u6570\u636e\u3002<\/p>\n<p style=\"margin: 1em 0px;\">Ajax \u4fc3\u6210\u4e86 Web 2.0\uff1a<\/p>\n<p style=\"margin: 1em 0px;\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/ab1a484d7694498789caffcaddc85454\" alt=\"\u524d\u7aef\u5f00\u53d1\u7684\u5386\u53f2\u548c\u8d8b\u52bf\"><\/p>\n<ul style=\"padding-left: 1rem; margin-left: 1rem; font-size: 0.9rem; list-style-type: disc;\">\n<li>\n<section>Web 1.0\uff1a\u9759\u6001\u7f51\u9875\uff0c\u7eaf\u5185\u5bb9\u5c55\u793a<\/section>\n<\/li>\n<li>\n<section>Web 2.0\uff1a\u52a8\u6001\u7f51\u9875\uff0c\u5bcc\u4ea4\u4e92\uff0c\u524d\u7aef\u6570\u636e\u5904\u7406<\/section>\n<\/li>\n<\/ul>\n<p style=\"margin: 1em 0px;\">\u4ece\u90a3\u65f6\u8d77\u524d\u7aef\u53d8\u590d\u6742\u4e86\uff0c\u5bf9\u5de5\u7a0b\u5e08\u7684\u8981\u6c42\u4e5f\u8d8a\u6765\u8d8a\u9ad8\u3002<\/p>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u56db\u3001\u524d\u7aef MVC\u3001Router \u4e0e MVVM<\/h2>\n<p style=\"margin: 1em 0px;\">\u524d\u7aef\u901a\u8fc7 Ajax \u62ff\u5230\u6570\u636e\uff0c\u4e5f\u5c31\u6709\u4e86\u4fdd\u5b58\u6570\u636e\u3001\u5904\u7406\u6570\u636e\u3001\u751f\u6210\u89c6\u56fe\u7684\u9700\u6c42\uff0c\u4e8e\u662f\u8bde\u751f\u4e86\u524d\u7aef MVC \u6846\u67b6\u30022010 \u5e74\u51fa\u73b0 Backbone.js\uff1a\u628a\u524d\u7aef\u5206\u6210 Model\uff08\u7ba1\u6570\u636e\uff09\u548c View\uff08\u5c55\u73b0\uff09\u3002<\/p>\n<p style=\"margin: 1em 0px;\">Backbone \u53ea\u6709 M \u548c V\uff0c\u6ca1\u6709 C\u3002\u524d\u7aef Controller \u548c\u540e\u7aef\u4e0d\u540c\uff1a\u4e0d\u9700\u8981\u3001\u4e5f\u4e0d\u5e94\u8be5\u5904\u7406\u4e1a\u52a1\u903b\u8f91\uff0c\u53ea\u5904\u7406 UI \u903b\u8f91\u3001\u54cd\u5e94\u7528\u6237\u64cd\u4f5c\uff0c\u76f8\u5bf9\u7b80\u5355\u3002Backbone \u7528\u4e8b\u4ef6\u5904\u7406 UI \u903b\u8f91\u3002<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">var AppView = Backbone.View.extend({\n \/\/ ...\n events: {\n \"keypress #new-todo\": \"createOnEnter\",\n \"click #clear-completed\": \"clearCompleted\",\n \"click #toggle-all\": \"toggleAllComplete\"\n },\n});<\/code><\/pre>\n<p style=\"margin: 1em 0px;\">\u524d\u7aef\u8fd8\u6709\u4e00\u79cd\u5929\u7136\u5207\u6362\u89c6\u56fe\u7684\u65b9\u6cd5\uff1aURL\u3002\u901a\u8fc7 URL \u5207\u89c6\u56fe\u5c31\u662f Router\u3002\u4ee5 Backbone \u4e3a\u4f8b\uff1a<\/p>\n<p style=\"margin: 1em 0px;\"><img decoding=\"async\" src=\"http:\/\/p3.pstatp.com\/large\/pgc-image\/3965d4f010a94dc3b0bad51f956c1b28\" alt=\"\u524d\u7aef\u5f00\u53d1\u7684\u5386\u53f2\u548c\u8d8b\u52bf\"><\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">App.Router = Backbone.Router.extend({\n routes: {\n '': 'index',\n 'show': 'show'\n },\n index: function () {\n $(document.body).append(\"\u8c03\u7528\u4e86 Index \u8def\u7531\");\n },\n show: function () {\n $(document.body).append(\"\u8c03\u7528\u4e86 Show \u8def\u7531\");\n },\n});<\/code><\/pre>\n<p style=\"margin: 1em 0px;\">\u793a\u4f8b\uff1a\u6253\u5f00 demos\/backbone-demo\/index.html\uff0c\u6309\u300a\u64cd\u4f5c\u8bf4\u660e\u300b\u67e5\u770b\u3002<\/p>\n<p style=\"margin: 1em 0px;\"><img decoding=\"async\" src=\"http:\/\/p9.pstatp.com\/large\/pgc-image\/51672e7160a14cd0bcf607923038a558\" alt=\"\u524d\u7aef\u5f00\u53d1\u7684\u5386\u53f2\u548c\u8d8b\u52bf\"><\/p>\n<p style=\"margin: 1em 0px;\">\u53e6\u4e00\u4e9b\u6846\u67b6\u63d0\u51fa MVVM\uff0c\u7528 View-Model \u4ee3\u66ff Controller\uff1aModel\u3001View\u3001View-Model\u3002View-Model \u662f\u7b80\u5316\u7684 Controller\uff0c\u552f\u4e00\u4f5c\u7528\u662f\u7ed9 View \u63d0\u4f9b\u5904\u7406\u597d\u7684\u6570\u636e\u3002\u672c\u8d28\u662f view \u7ed1\u5b9a view-model\uff0c\u89c6\u56fe\u4e0e\u6570\u636e\u6a21\u578b\u5f3a\u8026\u5408\uff0c\u6570\u636e\u53d8\u5316\u5b9e\u65f6\u53cd\u6620\u5728 view \u4e0a\uff0c\u4e0d\u5fc5\u624b\u6539 DOM\u3002<\/p>\n<p style=\"margin: 1em 0px;\"><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/03\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200331132816.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-2535\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/03\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200331132816.png\" alt=\"\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200331132816\" width=\"782\" height=\"250\"><\/a><\/p>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u4e94\u3001SPA\u3001Angular \u4e0e Vue<\/h2>\n<p style=\"margin: 1em 0px;\">\u524d\u7aef\u53ef\u4ee5\u8bfb\u5199\u6570\u636e\u3001\u5207\u6362\u89c6\u56fe\u3001\u5904\u7406\u7528\u6237\u4ea4\u4e92\uff0c\u7f51\u9875\u5176\u5b9e\u5df2\u7ecf\u662f\u5e94\u7528\u7a0b\u5e8f\u3002SPA = Single-page application\u30022010 \u5e74\u540e\uff0c\u524d\u7aef\u5de5\u7a0b\u5e08\u4ece\u5f00\u53d1\u9875\u9762\u53d8\u6210\u5f00\u53d1\u8dd1\u5728\u6d4f\u89c8\u5668\u91cc\u7684\u524d\u7aef\u5e94\u7528\u3002<\/p>\n<p style=\"margin: 1em 0px;\">\u4f20\u7edf\u67b6\u6784\uff1a<\/p>\n<p style=\"margin: 1em 0px;\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/89d570b5436441a49a96b5fd0c4095a4\" alt=\"\u524d\u7aef\u5f00\u53d1\u7684\u5386\u53f2\u548c\u8d8b\u52bf\"><\/p>\n<p style=\"margin: 1em 0px;\">\u5355\u9875\u5e94\u7528\u67b6\u6784\uff0c\u591a\u4e86\u4e00\u5c42\u524d\u7aef MVC\uff1a<\/p>\n<p style=\"margin: 1em 0px;\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/f5a9756805cd49c99629366bc9cb919f\" alt=\"\u524d\u7aef\u5f00\u53d1\u7684\u5386\u53f2\u548c\u8d8b\u52bf\"><\/p>\n<p style=\"margin: 1em 0px;\">Google \u7684 Angular \u662f\u5f53\u65f6\u6700\u6d41\u884c\u7684 MVVM \u6846\u67b6\uff0c\u98ce\u683c\u662f HTML \u589e\u5f3a\uff0c\u6838\u5fc3\u662f\u53cc\u5411\u7ed1\u5b9a\u3002<\/p>\n<p style=\"margin: 1em 0px;\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/9f7220b146c14081af1eb17056d4a553\" alt=\"\u524d\u7aef\u5f00\u53d1\u7684\u5386\u53f2\u548c\u8d8b\u52bf\"><\/p>\n<p style=\"margin: 1em 0px;\">\u793a\u4f8b\uff1a\u6253\u5f00 demos\/angular-demo\/index.html\uff0c\u53ef\u4ee5\u770b\u5230\u4e00\u4e2a\u8f93\u5165\u6846\u3002<\/p>\n<p style=\"margin: 1em 0px;\"><img decoding=\"async\" src=\"http:\/\/p3.pstatp.com\/large\/pgc-image\/8dabc46ea94f49c581cc99f4081efc77\" alt=\"\u524d\u7aef\u5f00\u53d1\u7684\u5386\u53f2\u548c\u8d8b\u52bf\"><\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">&lt;div ng-app=\"\"&gt;\n &lt;p&gt;\n \u59d3\u540d :\n &lt;input\n type=\"text\"\n ng-model=\"name\"\n placeholder=\"\u5728\u8fd9\u91cc\u8f93\u5165\u60a8\u7684\u5927\u540d\"\n &gt;\n &lt;\/p&gt;\n &lt;h1&gt;\u4f60\u597d\uff0c{{name}}&lt;\/h1&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p style=\"margin: 1em 0px;\">Vue.js \u57fa\u672c\u601d\u60f3\u548c Angular \u7c7b\u4f3c\uff0c\u7528\u6cd5\u66f4\u7b80\u5355\uff0c\u5e76\u5f15\u5165\u4e86\u54cd\u5e94\u5f0f\u7f16\u7a0b\u3002<\/p>\n<p style=\"margin: 1em 0px;\"><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/03\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200331132923.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-2537\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/03\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200331132923.png\" alt=\"\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200331132923\" width=\"244\" height=\"323\"><\/a><\/p>\n<p style=\"margin: 1em 0px;\">Vue \u7684\u6a21\u677f\u4e0e\u6570\u636e\u662f\u53cc\u5411\u7ed1\u5b9a\u7684\u3002\u6253\u5f00 demos\/vue-demo\/index1.html\uff0c\u6309\u300a\u64cd\u4f5c\u8bf4\u660e\u300b\u67e5\u770b\u3002HTML\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">&lt;div id=\"journal\"&gt;\n &lt;input type=\"text\" v-model=\"message\"&gt;\n &lt;div&gt;{{message}}&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p style=\"margin: 1em 0px;\">JS\uff1a<\/p>\n<pre style=\"overflow: auto hidden; word-break: normal; white-space: pre; tab-size: 2; border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: 0.5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; background: #002b36; max-width: 100%; overflow-wrap: normal;\"><code class=\"hljs\" style=\"word-break: normal; white-space: nowrap; tab-size: 2; font-size: 12px; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Roboto Mono', 'Courier New', 'Microsoft YaHei', monospace; display: block; overflow-x: auto; margin: 0.5em; padding: 3px 5px; color: #93a1a1; background: #002b36; overflow-wrap: normal;\">var journal = new Vue({\n el: '#journal',\n data: {\n message: 'Your first entry'\n }\n});<\/code><\/pre>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u516d\u3001\u524d\u540e\u7aef\u5206\u79bb\u3001REST \u4e0e Node<\/h2>\n<p style=\"margin: 1em 0px;\">\u4e24\u4ef6\u4e8b\u8ba9\u524d\u7aef\u5f00\u53d1\u65b9\u5f0f\u53d1\u751f\u6839\u672c\u53d8\u5316\uff1aAjax \u5e26\u6765\u524d\u7aef\u5e94\u7528\uff1b\u667a\u80fd\u624b\u673a\u8981\u6c42\u591a\u7ec8\u7aef\u3002\u524d\u7aef\u4e0d\u518d\u662f\u540e\u7aef MVC \u4e2d\u7684 V\uff0c\u800c\u662f\u5355\u72ec\u4e00\u5c42\u3002<\/p>\n<p style=\"margin: 1em 0px;\">\u5206\u79bb\u4e4b\u540e\u9760\u63a5\u53e3\u901a\u4fe1\uff1a\u540e\u7aef\u66b4\u9732\u63a5\u53e3\uff0c\u524d\u7aef\u6d88\u8d39\u6570\u636e\u3002\u63a5\u53e3\u4e00\u822c\u662f REST\uff0c\u534f\u8bae\u4e00\u822c\u662f HTTP\u3002<\/p>\n<p style=\"margin: 1em 0px;\">2009 \u5e74 Node \u8bde\u751f\uff0c\u662f\u670d\u52a1\u5668\u4e0a\u7684 JavaScript \u8fd0\u884c\u73af\u5883\uff1aNode = JavaScript + \u64cd\u4f5c\u7cfb\u7edf API\u3002<\/p>\n<p style=\"margin: 1em 0px;\"><img decoding=\"async\" src=\"http:\/\/p9.pstatp.com\/large\/pgc-image\/cfb05e1939914c7dbf0e538b12606608\" alt=\"\u524d\u7aef\u5f00\u53d1\u7684\u5386\u53f2\u548c\u8d8b\u52bf\"><\/p>\n<p style=\"margin: 1em 0px;\">\u610f\u4e49\u5728\u4e8e\uff1aJavaScript \u6210\u4e3a\u670d\u52a1\u5668\u811a\u672c\u8bed\u8a00\uff08\u548c Python\u3001Ruby \u4e00\u6837\uff09\uff1b\u6210\u4e3a\u552f\u4e00\u6d4f\u89c8\u5668\u548c\u670d\u52a1\u5668\u90fd\u652f\u6301\u7684\u8bed\u8a00\uff1b\u524d\u7aef\u5de5\u7a0b\u5e08\u53ef\u4ee5\u5199\u540e\u7aef\u3002<\/p>\n<p style=\"margin: 1em 0px;\">\u5f00\u53d1\u6a21\u5f0f\u968f\u4e4b\u6539\u53d8\uff1a\u5728 Node \u73af\u5883\u4e0b\u5f00\u53d1\uff0c\u5927\u91cf\u7528\u670d\u52a1\u5668\u7aef\u5de5\u5177\uff0c\u5f15\u5165\u6301\u7eed\u96c6\u6210\u7b49\u5de5\u7a0b\u6d41\u7a0b\uff1b\u5f00\u53d1\u5b8c\u6210\u540e\u7f16\u8bd1\u6210\u6d4f\u89c8\u5668\u80fd\u8dd1\u7684\u811a\u672c\u653e\u5230 CDN\u3002<\/p>\n<p style=\"margin: 1em 0px;\"><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/03\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200331132843.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-2536\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/03\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200331132843.png\" alt=\"\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200331132843\" width=\"601\" height=\"250\"><\/a><\/p>\n<h2 style=\"padding: 1px 12.5px; color: #ffffff; margin: 1.2em 0px 1em; border-radius: 4px; display: inline-block; background-color: #4870ac; font-size: 1.3em;\">\u4e03\u3001\u5168\u6808\u3001H5 \u4e0e\u672a\u6765<\/h2>\n<p style=\"margin: 1em 0px;\">\u524d\u7aef\u5de5\u7a0b\u5e08\u6b63\u5728\u53d8\u6210\u5168\u6808\uff1a\u4e00\u4e2a\u4eba\u4ece\u524d\u7aef\u5230\u540e\u7aef\uff0c\u4ece\u6570\u636e\u5e93\u5230 UI\u3002\u6280\u80fd\u5305\u62ec\u4f20\u7edf\u524d\u7aef\uff08HTML\u3001JavaScript\u3001CSS\uff09\u3001\u4e00\u95e8\u540e\u7aef\u8bed\u8a00\u3001\u79fb\u52a8\u7aef\uff08iOS \/ Android \/ HTML5\uff09\uff0c\u4ee5\u53ca\u6570\u636e\u5e93\u3001HTTP \u7b49\u3002<\/p>\n<p style=\"margin: 1em 0px;\">\u5386\u53f2\u6f14\u53d8\uff1a\u524d\u540e\u7aef\u4e0d\u5206 \u2192 \u524d\u540e\u7aef\u5206\u79bb \u2192 \u5168\u6808\u5de5\u7a0b\u5e08\u3002\u52a8\u529b\u662f\u66f4\u4ea7\u4e1a\u5316\u3001\u5927\u89c4\u6a21\u5730\u751f\u4ea7\u8f6f\u4ef6\uff1a\u6548\u7387\u66f4\u9ad8\u3001\u6210\u672c\u66f4\u4f4e\u3002\u901a\u7528\u6027\u597d\u3001\u80fd\u5feb\u901f\u4ea7\u51fa\u7684\u6280\u672f\u6700\u7ec8\u4f1a\u8d62\uff0c\u5bf9\u5355\u4e2a\u7a0b\u5e8f\u5458\u751f\u4ea7\u529b\u7684\u8981\u6c42\u4e5f\u8d8a\u6765\u8d8a\u9ad8\u3002<\/p>\n<p style=\"margin: 1em 0px;\">H5 \u80fd\u8d62\u79fb\u52a8\u7aef\uff0c\u662f\u56e0\u4e3a\uff1a\u5f00\u53d1\u5feb\uff08Native \u8981\u91cd\u65b0\u7f16\u8bd1\u624d\u80fd\u770b\u7ed3\u679c\uff0cH5 \u5373\u65f6\u8f93\u51fa\uff09\uff1b\u6210\u672c\u4f4e\uff08Native \u8981\u4e24\u5957\u56e2\u961f\uff0cH5 \u4e00\u5957\uff09\uff1b\u53d1\u5e03\u5feb\uff08\u5b89\u5353 Native \u65b0\u7248\u672c\u7ea6 24 \u5c0f\u65f6\uff0ciOS \u7ea6 3\uff5e4 \u5929\uff0cH5 \u53ef\u968f\u65f6\u66f4\u65b0\uff09\u3002<\/p>\n<p style=\"margin: 1em 0px;\">\u672a\u6765\u8f6f\u4ef6\u66f4\u5f3a\u8c03\u8054\u7f51\u3001\u9ad8\u5e76\u53d1\u3001\u5206\u5e03\u5f0f\u3001\u8de8\u7ec8\u7aef\u3002\u57fa\u4e8e Web \u7684\u524d\u7aef\u6280\u672f\uff0c\u4f1a\u6f14\u53d8\u6210\u672a\u6765\u5404\u7c7b\u8f6f\u4ef6\u901a\u7528\u7684 GUI \u65b9\u6848\u3002\u5de5\u7a0b\u5e08\u4f1a\u5206\u6210\u4e24\u7c7b\uff1a\u7aef\u5de5\u7a0b\u5e08\uff08\u624b\u673a\u3001PC\u3001TV\u3001VR\u2026\u2026\uff09\u548c\u4e91\u5de5\u7a0b\u5e08\u3002<\/p>\n<blockquote style=\"display: block; font-size: 0.9em; border-left: 3px solid #4870ac; padding: 0.5em 1em; margin: 0px; background: #f6f8fa; color: #40464f;\">\n<p style=\"margin: 1em 0px;\"><strong style=\"color: #4870ac;\">\u4e00\u53e5\u8bdd\u603b\u7ed3\uff1aAjax \u8ba9\u524d\u7aef\u72ec\u7acb\uff0cSPA \u8ba9\u7f51\u9875\u53d8\u6210\u5e94\u7528\uff0cNode \u8ba9\u540c\u4e00\u95e8\u8bed\u8a00\u8de8\u5230\u670d\u52a1\u5668\uff1b\u524d\u7aef\u4ece\u6a21\u677f\u8d70\u5230\u4e86\u5168\u6808\u3002<\/strong><\/p>\n<\/blockquote>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>\u524d\u7aef\u662f\u9488\u5bf9\u6d4f\u89c8\u5668\u7684\u5f00\u53d1\uff0c\u4ee3\u7801\u5728\u6d4f\u89c8\u5668\u91cc\u8dd1\uff1b\u540e\u7aef\u9488\u5bf9\u670d\u52a1\u5668\uff0c\u4ee3\u7801\u5728\u670d\u52a1\u5668\u8dd1\u3002\u4e92\u8054\u7f51\u65e9\u671f\u4e8c\u8005\u5e76\u4e0d\u5206\u5bb6\uff1a\u524d\u7aef\u4ee3\u7801\u662f\u540e [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[105,10],"tags":[150,171],"_links":{"self":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2532"}],"collection":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2532"}],"version-history":[{"count":3,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2532\/revisions"}],"predecessor-version":[{"id":3695,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2532\/revisions\/3695"}],"wp:attachment":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}