text: (window.webpackJsonp=window.webpackJsonp||[]).push([[91],{239:function(e,r,v){"use strict";v.r(r);var t=v(0),l=Object(t.a)({},function(){var e=this,r=e.$createElement,v=e._self._c||r;return v("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[v("h1",{attrs:{id:"_3-4-5-mvc-mvvm-mvp"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#_3-4-5-mvc-mvvm-mvp","aria-hidden":"true"}},[e._v("#")]),e._v(" 3.4.5 MVC,MVVM,MVP")]),e._v(" "),v("h2",{attrs:{id:"_1-mvc"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#_1-mvc","aria-hidden":"true"}},[e._v("#")]),e._v(" 1.mvc")]),e._v(" "),v("pre",[v("code",[e._v("                   / view    <\n               /               \\\n           /                         \\\n")])]),e._v(" "),v("p",[e._v("controller   ------------------------\x3e  \\mode")]),e._v(" "),v("blockquote",[v("p",[e._v("Model-View-Controller（模型-视图-控制器）:"),v("br"),e._v("\n用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，"),v("br"),e._v("\n在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑.它强制性的使应用程序的输入、处理和输出分开。"),v("br"),e._v("\n最典型的MVC就是JSP +servlet+javabean的模式")])]),e._v(" "),v("p",[e._v("View：只管页面的显示和样式展示。")]),e._v(" "),v("p",[e._v("Control：进行页面节点事件的注册和控制，以及页面加载性能的实现（例如方荣的硬盘缓存）。")]),e._v(" "),v("p",[e._v("Model：真正的逻辑处理，例如jslib库中的form、popup、drag等功能组件都属于model模块。")]),e._v(" "),v("blockquote",[v("p",[e._v("，View是可以直接访问Model的！从而，View里会包含Model信息，不可避免的还要包括一些 业务逻辑。"),v("br"),e._v("\n在MVC模型里，更关注的Model的不变，而同时有多个对Model的不同显示，及View。"),v("br"),e._v("\n所以，在MVC模型里，"),v("strong",[e._v("Model不依赖于View，但是 View是依赖于Model的")]),e._v("。")])]),e._v(" "),v("h2",{attrs:{id:"_2-mvp"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#_2-mvp","aria-hidden":"true"}},[e._v("#")]),e._v(" 2.mvp")]),e._v(" "),v("pre",[v("code",[e._v("                 view\n                /\n             /\n   presenter    <-------------\x3e    model\n")])]),e._v(" "),v("blockquote",[v("p",[e._v("Model-View-Presenter:是从经典的模式MVC演变而来，"),v("br"),e._v("\n它们的基本思想有相通的地方：Controller/Presenter负责逻辑的处理，Model提供数据，View负 责显示。")])]),e._v(" "),v("ul",[v("li",[e._v("MVP与MVC有着一个重大的区别：\n在MVP中View并不直接使用Model，它们之间的通信是通过Presenter (MVC中的Controller)来进行的，所有的交互都发生在Presenter内部，"),v("br"),e._v("\n而在MVC中View会从直接Model中读取数据而不是通过 Controller。")])]),e._v(" "),v("h2",{attrs:{id:"_3-mvvm"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#_3-mvvm","aria-hidden":"true"}},[e._v("#")]),e._v(" 3.mvvm")]),e._v(" "),v("p",[e._v("view<----------\x3e viewModel <-------- >model")]),e._v(" "),v("blockquote",[v("p",[e._v("Model-View-ViewModel:和MVC模式一样，主要目的是分离视图（View）和模型（Model）；"),v("br"),e._v("\n在概念上是真正将页面与数据逻辑分离的模式，"),v("br"),e._v("\n在开发方式上，它是真正将前台代码开发者（JS+HTML）与后台代码开发者分离的模式（asp,asp.net,php,jsp）。")])]),e._v(" "),v("blockquote",[v("p",[e._v("MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。"),v("br"),e._v("\n【模型】指的是后端传递的数据。【视图】指的是所看到的页面。"),v("br"),e._v("\n【视图模型】mvvm模式的核心，它是连接view和model的桥梁。"),v("br"),e._v("\n它有两个方向：一是将【模型】转化成【视图】，实现的方式是：数据绑定。\n二是将【视图】转化成【模型】,实现的方式是：DOM 事件监听。")])]),e._v(" "),v("ul",[v("li",[v("ol",[v("li",[e._v('低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，'),v("br"),e._v("\n当View变化的时候Model可以不变，当Model变化的时候View也可以不变。")])])]),e._v(" "),v("li",[v("ol",{attrs:{start:"2"}},[v("li",[e._v("可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。")])])]),e._v(" "),v("li",[v("ol",{attrs:{start:"3"}},[v("li",[e._v("独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，"),v("br"),e._v("\n使用Expression Blend可以很容易设计界面并生成xaml代码。")])])]),e._v(" "),v("li",[v("ol",{attrs:{start:"4"}},[v("li",[e._v("可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。")])])])]),e._v(" "),v("h2",{attrs:{id:"参考"}},[v("a",{staticClass:"header-anchor",attrs:{href:"#参考","aria-hidden":"true"}},[e._v("#")]),e._v(" 参考")]),e._v(" "),v("ul",[v("li",[v("a",{attrs:{href:"https://www.cnblogs.com/Decmber/p/5279028.html",target:"_blank",rel:"noopener noreferrer"}},[e._v("前端架构：MVC以及MVVM MVP介绍"),v("OutboundLink")],1)])])])},[],!1,null,null,null);r.default=l.exports}}]);