浅析MVCMVPMVVM框架实现

　　复杂的软件必须有清晰合理的架构，否则无法开发和维护。为了将业务和视图的实现代码分离，目前比较流行三种前端架构：MVC（ModelViewController）MVP（ModelViewPresenter）MVVM（ModelViewViewModel）
　　Model为模型层，主要管理业务模型的数据和行为；View为展示层，其职责就是管理用户界面。
　　三个架构模式目的都是为了解耦Model和View，主要不同点就在于三者实现解耦的方案不同。1、MVC
　　一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。简单来说就是通过controller的控制去操作model层的数据，并且返回给view层展示，当用户出发事件的时候，view层会发送指令到controller层，接着controller去通知model层更新数据，model层更新完数据以后直接显示在view层上，这就是MVC的工作原理。如下图：
　　代码实现如下：selectidanimaloptionvaluechickchickoptionoptionvaluehenhenoptionoptionvaluecockcockoptionselectspanidnamespansvoiceisspanidvoicespan。varM｛voices：｛chick：bibi，hen：gugu，cock：wowo｝，name：，voice：，change：function（name）｛this。this。voicethis。voices〔name〕；V。update（）；调用V｝，get：function（k）｛returnthis〔k〕；｝｝；varV｛init：function（）｛document。querySelector（animal）。onchangefunction（）｛C。set（this。value）；调用C｝；｝，update：function（）｛document。querySelector（name）。textContentM。get（name）；document。querySelector（voice）。textContentM。get（voice）；｝｝；varC｛init：function（）｛V。init（）；｝，set：function（name）｛M。change（name）；调用M｝｝；C。init（）；
　　以上代码很清晰分出M、V和C三个模块，V通过事件通知C控制M的变化，M变化后会调用V进行视图更新，整个流程是单向的。2、MVP
　　MVP是从经典的模式MVC演变而来，它们的基本思想有相通的地ControllerPresenter负责逻辑的处理，Model提供数据，View负责显示。
　　各部分之间的通信，都是双向的。；View与Model不发生联系，都通过Presenter传递；View非常薄，不部署任何业务逻辑，称为被动视图（PassiveView），即没有任何主动性，而Presenter非常厚，所有逻辑都部署在那里。如下图：
　　代码实现如下：selectidanimaloptionvaluechickchickoptionoptionvaluehenhenoptionoptionvaluecockcockoptionselectspanidnamespanvoiceisspanidvoicespan。varM｛voices：｛chick：bibi，hen：gugu，cock：wowo｝，name：，voice：，change：function（name）｛this。this。voicethis。voices〔name〕；｝，get：function（k）｛returnthis〔k〕；｝｝；varV｛init：function（）｛document。querySelector（animal）。onchangefunction（）｛C。set（this。value）；调用C｝；｝，update：function（kv）｛for（kinkv）｛document。querySelector（k）。textContentkv〔k〕；｝｝｝；varP｛init：function（）｛V。init（）；调用V｝，set：function（name）｛M。change（name）；调用MV。update（｛name：M。get（name），voice：M。get（voice）｝）；调用V｝｝；P。init（）；
　　代码来看跟MVC差不太多，区别主要在于M和V没有直接交互，而是通过P来进行完全控制，所以P也被称为控制狂，任何交互上的事情都由很强的控制欲。3、MVVM
　　MVVM采用双向绑定（databinding）：View的变动，自动反映在ViewModel，反之亦然。AngularJS和Vue都采用这种模式，而React采用了单向数据流，属于MVP架构。
　　要实现数据绑定，通常都采用发布者订阅者模式进行实现，但这部分工作如果由开发人员自己来写代码实现，其实还是挺复杂的，因此，各大平台都提供了各自的内部实现。比如Vue和AngularJS自身都实现了数据绑定，Android目前最主流的方案就是采用Jetpack，iOS最常用的方案则是结合ReactiveCocoa（RAC）实现。
　　MVP和MVVM都是为了解决界面和数据的分离问题，两者只是采用了不同的实现方案。MVP之间的交互主要是通过接口实现的，其主要弊端就是需要编写大量接口。而MVVM则是通过数据绑定的方式实现交互，虽然其实现需要依赖具体的一些框架工具，但明显大大减少了开发者需要编写的代码量。
　　代码实现如下：selectidanimaldatabindchange：doChangeoptionvaluechickchickoptionoptionvaluehenhenoptionoptionvaluecockcockoptionselectspandatabindnamespanvoiceisspandatabindvoicespan。varM｛voices：｛chick：bibi，hen：gugu，cock：wowo，｝，name：，voice：doChang：function（）｛M。namethis。M。voicethis。voices〔obj。name〕；｝｝；varV｛bindEvent：function（el，evt，func）｛el〔onevt〕M〔func〕（）；｝，updateText：function（el，text）｛el。textC｝｝；varVM｛init：function（rootSelector）｛this。observer（）；this。compiler（rootSelector）；｝，paths：｛｝，observer：function（）｛for（varkinM）｛（function（k）｛varnamek，valueM〔k〕；Object。defineProperty（M，name，｛get：function（）｛｝，set：function（v）｛V。updateText（this。paths〔name〕，v）；｝｝）；｝）（k）；｝｝，compiler：function（rootSelector）｛varbindsdocument。querySelector（rootSelector）。querySelectorAll（〔databind〕）；for（vari0，lenbinds。i）｛varelbinds〔i〕；vardirectiveel。getAttribute（databind）；if（directive。indexOf（：）1）｛事件指令vardirectivesdirective。split（：）；varevtdirectives〔0〕，funcdirectives〔1〕；V。bindEvent（el，evt，func）；｝else｛文本指令this。paths〔directive〕V。updateText（el，M〔directive〕）；｝｝｝｝；VM。init（content）；
　　MVCMVPMVVM的原理以及代码实现，文章到这里就差不多结束了。可能文章解析的不够全面，需更全面对架构的进阶。我们可以前往这里获取学习笔记方式，里面有对（架构的全方位解析大厂架构实战演练），展示如下部分截图：《Android架构学习》私信：手册获取！
　　【私信手册获取】架构设计必备核心技术手册小结
　　从MVC架构模式到MVVM，从分离展示层到展示模型层，经过几十年的发展和演变，MVC架构模式出现了各种各样的变种，并在不同的平台上有着自己的实现。
　　MVCMVPMVVM都是根据不同的应用需求和应用环境逐步发展而来的，它们都有各自优缺点和适用环境。比如Web开发中因为要跨越网络通讯，如果使用MVP或者MVVM来实现代价是巨大的，因为目前来说网络数据很珍贵的资源。