前端MV*框架的意义

经常有人质疑，在前端搞MV*有什么意义？也有人提出这样的疑问：以AngularJS，Knockout，BackBone为代表的MV*框架，它跟jQuery这样的框架有什么区别？我jQuery用得好好的，有什么必要再引入这种框架？

　　回答这些问题之前，先要理清一些历史，前端从什么时候开始有框架的？

　　早期前端都是比较简单，基本以页面为工作单元，内容以浏览型为主，也偶尔有简单的表单操作，这个时期每个界面上只有很少的JavaScript逻辑，基本不太需要框架。随着AJAX的出现，Web2.0的兴起，人们可以在页面上可以做比较复杂的事情了，然后前端框架才真正出现了，以jQuery为代表，针对界面上常见的DOM操作，远程请求，数据处理等作了封装，也有专注于处理数据的Underscore，严格来说，这些都不能算框架，而是算库。

　　库和框架是有一些区别的：库是一种工具，我提供了，你可以不用，即使你用了，也没影响你自己的代码结构。框架则是面向一个领域，提供一套解决方案，如果你用我，就得按照我的方式办事。按照这个定义，jQuery和Underscore都只能算是库，ExtJS和dojo算框架。

　　MV*框架又是为什么兴起的呢？它的出现，伴随着一些Web产品逐渐往应用方向发展，遇到了在C/S领域相同的问题：由于前端功能的增强、代码的膨胀，导致不得不做“前端的架构”这个事情了。

　　很多做后端开发的人对前端架构很不屑，认为前端只是很薄的一层东西，做架构干什么？什么，不但要搞架构，还要搞MVC？Java Struts的MVC中，整个前端都只能算是View而已，你还要在这个View里面划分模型和控制器等其他东西？他们中的多数对这个很不屑，但Web前端随着复杂度的增加，很多地方跟客户端已经没有本质区别了。

　　jQuery的思维方式是：以DOM操作为中心

　　MV*框架的思维方式是：以模型为中心，DOM操作只是附加

　　所以回到那个问题上，jQuery满足了你的业务需要，你还有什么必要引入MV*框架？

　　这个是要看产品类型的，如果是页面型产品，多数确实不太需要它，因为页面中的JavaScript代码，处理交互的绝对远远超过处理模型的，但是如果是应用软件类产品，这就太需要了。

　　长期做某个行业软件的公司，一般都会沉淀下来一些业务组件，主要体现在数据模型、业务规则和业务流程，这些组件基本都存在于后端，在前端很少有相应的组织。在以往的经验里，他们是有做MVC的，也尝试做了一些界面组件，但做法比较过时，比如说使用JSF或者GWT这样的方式。

　　JSF的问题是什么？它的问题并不在于界面跟逻辑混合，所谓的纵向切分组件，Polymer这种纯前端框架也是这么切分的，它问题在于组件的生成和渲染不在同一个地方。所以，逻辑代码的位置很尴尬，如果这个界面简单还好说，复杂起来就很麻烦了，就是很多明明是前端逻辑代码，却需要通过后端去生成。

　　GWT这种方式相对要好一些，它的问题是留给UI调节的余地太小了，比较缺乏灵活性。

　　这类基于某种服务端技术的组件化方式有一些局限性，比如它较大程度限制了前端的发挥，在早一些的时候，这种方式可能还不错，但是现在随着时代发展，用户对前端用户体验要求越来越高，需要我们把很大一部分精力继续放回前端来。JSF等方案的另外一个问题是绑定了某种服务端环境，很难切换到另外一种后端上，如果碰上要用Hybird方式开发，想复用一些前端逻辑，几乎毫无可能。

　　那么，我们看看纯前端的框架，看看都是怎么解决这些问题的。以Google为例，它推出了两个框架，Polymer和Angular，而且处于并行发展的阶段，这两者理念还有不小的差别，给不少人带来了困惑。

　　Polymer切分组件的方式有点类似JSF，它跟HTML5标准中的Shadow DOM和Element有很大联系，这种切分组件的方式非常直观，每个组件都是端到端的，包含UI和逻辑，直接放置到某个界面上就能用，这种方式很容易被业务开发人员接受，但里面的时序比较难处理。

　　比如说，有两个组件，里面各包含一个下拉框，有数据的联动关系，因为它们处在两个不同的组件里，联动的处理代码就很难写，考虑到组件的特点，要尽量隐藏自己的内部实现，所以从外部获取组件内部的某个元素要绕一层，而组件不能依赖其他外部的东西，所以到最后只有通过事件去实现，这个联动代码写好了应当放在哪里，也是个大问题。我们的例子仅仅是这么简单，就要绕这么个大圈子才能保证时序，如果场景比较复杂，非常难以控制。

　　如果同样的组件在某个界面被复用多次，数据的一致性也很难保证，设想一下某个界面存在两个一样的下拉框，分别处于不同组件中，两者的数据都需要分别去加载，这个过程是有浪费的，更严重的是，如果这个下拉框对应的数据有更新，很难把每个实例都更新一遍，这个处理过程是非常麻烦的。

　　Angular框架处理问题的方式跟它有所不同，它是水平分层，所有这些数据访问逻辑都跟UI彻底分离，所以可以很轻松地把这个逻辑代码写出来，这么一来，前面所述端到端的组件就彻底退化，变成只有界面展现了。

　　看看刚才碰到的两个问题，第一个，模型代码按照业务领域进行划分，获取的数据放在两个不同的数组，然后通过双向绑定跟UI产生关联，如果UI上一个下拉框选中项发生变更，只需要监控这个取值项，然后更新另一个下拉框的取值列表即可，完全不需要绕弯子。即使这两个处于不同模型中，也可以用类似后端的方式，采用事件总线等机制去完成通信。

　　第二个更简单了，复用的组件其实只有UI，也就是说，只有UI是多实例的，模型其实只有一份，比如说一个地区的树形结构，即使一个界面上同时有维护和使用两种功能，都可以共享同一份模型，当维护这边对数据进行了更新，就实时反馈到模型中，然后由双向绑定再把这个模型同步到界面上的使用方去，整个过程清晰可控。

　　从协作关系上讲，很多前端开发团队每个成员的职责不是很清晰，有了前端的MV*框架，这个状况会大有改观。MV*框架的理念是把前端按照职责分层，每一层都相对比较独立，有自己的价值，也有各自发挥的余地。

　　为什么多数做互联网前端开发的同学们感受不到MV*框架的重要性呢，因为在这个协作体系里，Model的这一块不够复杂，在传统软件领域，Model的部分是代码最多的，View的相对少一些，而互联网领域里，基本是相反的，所以Model这块沦为附加，如果主要在操作View和Controller，那当然jQuery这类框架比较好用了。

　　所以，经常看到有互联网产品的同学们讲前端MVC，但举例的时候，都比较牵强，很多时候，他们举出来的那个Model，其实都不能算真正的Model，而是在操作View的过程中一些辅助的模型，真正的Model是贯穿前后端的。

　　归根结底，前端MV*框架带来的是一整套工作流程的变更，后端工程师也可以编写前端的模型代码，把它跟后端彻底打通，交互工程师处理UI跟模型的互动关系，UI工作人员可以专注、无障碍地处理HTML源码，把它们以界面模版的形式提供给交互工程师。这一整套协作机制能够大大提高B/S架构系统的开发效率，如果再有外围的管控平台，生产效率将真正踏进工业化的阶段。

　　到这个阶段，前端开发人员的出路是什么呢？我认为有两种。拿服装行业来对比，如果你要的是普通的，就使用工业手段批量生产，使用MV*框架，做好架构和组件重用，做得快，细节不是很讲究。如果你想要更好的，有特色的，就需要名家设计，手工打造，非常精巧，高端大气上档次。所以，这也就代表着前端开发的两种发展方向。