Front-End MV*简述(一)

本文作者：IMWeb 何璇 原文出处：IMWeb社区 未经同意，禁止转载

近几年来由于web应用的交互越来越复杂，前端技术也迎来了一个飞速发展的时期。本文意在描述前端MV_类型的框架发展历程及对部分MV_框架的介绍。

为什么需要MV*

从前的web应用，前端主要负责改善用户体验，而服务器则将视图(view)和数据结合渲染成页面吐给浏览器。而随着Ajax等技术的出现，如今的web应用的也变得越来越复杂，相比于桌面应用来说也不虚。

如果此时我们还是仅仅使用jquery类库来开发web应用，那么随着应用的功能越来越丰富，业务逻辑越来越复杂，你的代码就可能会变成这样：

然后应用就会在一堆杂乱无章的选择器和回调函数中死亡。所以前端也需要将代码的逻辑分层，引用设计模式分离代码的职责，解除不同逻辑之间的耦合，使得前端的代码具有良好的维护性和扩展性。

什么是MV*

在讲什么是MV*之前首先讲讲什么是MVC? 可以先看看维基百科的结果和著名前端布道师Addy Osmani的解释。

MVC is an architectural design pattern that encourages improved application organization through a separation of concerns. It enforces the isolation of business data (Models) from user interfaces (Views), with a third component (Controllers) traditionally managing logic, user-input, and coordination of Models and Views. The pattern was originally designed by Trygve Reenskaug while working on Smalltalk-80 (1979), where it was initially called Model-View-Controller-Editor.

传统的MVC模式是从GUI编程衍生的MVC模式：

• M是Models，表示应用中特定领域(domain-specific)的数据或业务规则，我把他理解为是一个具有数据结构能代表现实实体的抽象形式，当然还有就是当model发生改变时它能通知到相应的观察者(observers)
• V是Views，表示应用中的组成展示视图的模版或标记语言等，它们是Models的观察者，但是它们不耦合
• C是Controllers，负责处理用户输入和更新Models

然而，前端Javascript框架并不严格遵循传统的MVC模式，部分框架的解决方案实现了所谓的Model-View-Presenter(MVP) and Model-View-ViewModel(MVVM)模式，实际上就是将职责重分配，都是为了将数据，视图与业务逻辑的拆分。

所以我们把这些前端框架叫做MV*框架。

关于框架与库

传统软件工程对于库和框架的区分主要着眼于对应用运行流程的控制权。框架提供架构，控制运行流程，让开发者在合适的地方书写针对具体问题的代码；而库则附属于架构，不控制运行流程，只提供可调用的函数

许多前端项目像Backbone官方文档描述本身是库，却经常在各种地方被人们称作框架 。但是对于前端来说，库与框架的区分显得并不重要，因为我们经常将前端库和框架做比较，在这里不做细致区分。

过去的路

2010年，作为前端MV*模式开山鼻祖的Backbone诞生了，Backbone是一个轻量级的javascript库，作者是Jeremy Ashkenas，同时他也是coffeescript的作者。

Backbone对于许多前端框架的设计来说具有深远的影响，如其名就像是做了个骨架。一些早年的框架如Ext，SproutCore也在2011年的时候将框架实现为MVC架构的形式。

也许你会说Backbone不是第一个web前端MV框架，更早的Cappuccino（一个专门设计给web application(not website)的框架，用自己开创的建立于javascript之上的Objective-J语言开发，实现了一套基于cocoa框架的API），早已实现了MVC模式，毕竟上文也提到说MVC其实是从早期的GUI引申的概念。但Backbone是唯一影响深远且基于javascript实现了MV模式的框架或库，当然实现上可能有更早的痕迹可循，例如js-model等，这里不做深究。

同年，MVVM思想也开始出现，knockoutjs就是较早的尝试，但由于作者并不是搞前端的，不熟悉javascript语言，使得knockout的绑定语法被许多开发者吐槽。

2011年，就逐渐开始涌现出许多前端框架，比如JavascriptMVC，深受到backbone影响的Spine.js等。

2012年，出现了许多较为成熟的框架，比如Google的Angular，前身是SproutCore的Emberjs等。后来还出现了舍弃兼容优化的方案，不同组件化方案的框架等等，有Googler尤大大的Vuejs，batmanjs等， 国内也出现像Q.js，Avalonjs等。概念火了，就会百花齐放。

再接下来，基本上就不是mv*的天下了，自从Node和Hybrid开发火了之后，前端工程师的价值体现更加多元化，让我们继续走下去。

（接下来将尽力去剖析一些成熟的框架，写下自己的理解）

说明

文中事实均来源于网络，如发现错误，欢迎指正，谢谢！ 本文首发IMWeb。

Reference

开源前端框架纵横谈 — 尤雨溪

Exploring JavaScript MV* Frameworks Part 1 – Hello Backbonejs

Developing Backbone.js Applications

TodoMVC