浅谈本身对前端MVC的理解

1、MVC的定义

  MVC全名Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写。MVC这一律念是来源于后端的框架构建思想，是一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑汇集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不须要从新编写业务逻辑。

• 视图(view)是用户看到并与之交互的界面。
• 模型(model)表示数据模型，并提供数据给视图。
• 控制器(controller)是链接视图和模型桥梁，处理业务逻辑操做，具体是指接受用户的输入并调用模型和视图去完成用户的需求。

  

2、MVC解决的问题

  随着前端发展到面向模块编程的时代，MVC架构就应运而生了，数据模型（modele）、页面视图（View）、业务逻辑（Controller）分离有效地解决以下问题：

• 用store数据更新代替页面频繁dom操做，简化业务代码；
• 全局暂存数据，避免重复请求数据资源；
• 模块解耦，组件化开发，避免功能模块间互相影响；
• 局部刷新，减小页面刷新次数，提升用户体验。

3、MVC的推演过程

  咱们使用jQuery实现todolist，step by step优化代码直至推演出MVC，使你们更好地理解MVC架构。
  只使用jQuery渲染视图层list列表和count数字统计，并实现new、toggle、destroy、destroy finished、toggle all等交互操做，dom操做就比较频繁，如图所示：

  为了持久化数据存储，建立store将数据存储到locationStorage，虽然不用MVC也能实现，但逻辑很是复杂，每一个功能函数都涉及到数据存储改动，如图所示：

  为了简化数据渲染操做，引入模板引擎，每当数据变化，调用render模板渲染便可，如图所示：

  为了实现页面状态持久化，引入router路由，经过不一样的访问URL区分页面不一样状态，MVC架构就出现了，如图所示：

4、MVC架构的扩展

一、MVC衍生的MVP

  MVP（Model-View-Presenter）是MVC模式的改良，由IBM的子公司Taligent提出。和MVC的相同之处在于：Controller/Presenter负责业务逻辑，Model管理数据，View负责显示；不一样之处在于：在MVC里，View是能够直接访问Model的，但MVP中的View并不能直接使用Model，而是经过为Presenter提供接口，让Presenter去更新Model，再经过观察者模式更新View。

  与MVC相比，MVP模式经过解耦View和Model，彻底分离视图和模型使职责划分更加清晰；因为View不依赖Model，能够将View抽离出来作成组件，它只须要提供一系列接口提供给上层操做。

二、MVC衍生的MVVM

  MVVM（Model-View-ViewModel）将Presenter 更名为 ViewModel，基本上与MVP模式彻底一致。惟一的区别是，它采用双向绑定（data-binding）：View的变更，自动反映在 ViewModel，反之亦然。Vue、React、Angular框架都使用了MVVM模式。

  咱们就以Vue为例子，分析一下MVVM模式：

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>
复制代码

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
复制代码

  上面html部分至关于View视图层，能够看到这里的View经过经过模板语法来声明式的将数据渲染进DOM元素，当ViewModel对Model进行更新时，经过数据绑定更新到View。
  Vue实例中的data至关于Model模型层，而ViewModel层的核心是Vue中的双向数据绑定，即Model变化时VIew能够实时更新，View变化也能让Model发生变化。
  总体看来，MVVM比MVC精简不少，不只简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操做DOM元素。

总结

  MVC、MVP、MVVM...M-V-Whatever等模式，都下降了代码的耦合性，组件化编程提升了代码的可重用性，但各自有着本身的特色。咱们重要的是理解架构模式的思想，根据业务需求场景，因地制宜地选择合适的架构模式。