js架构设计模式——从angularJS看MVVM

厚积薄发走势异常迅猛，导致现在各种MV*框架百家争雄，MVVM从MVC演变而来，为注入了全新的活力。我工作的业务不会涉及到 [ng] 这么重量级的东西，只有自己闲暇之余做的项目才能一尝。我才疏学浅，而这个话题又很大，所以见到的实在有限，但凡有讨论这些比较抽象的东西，必然有争论。这一切都是探索过去未知的领域，无论谁对谁错，任何的探索都是值得的。

本文内容如下：

前言

初次接触MVC是ASP.NET MVC，早前一直编写aspx的我接触到MVC之后爱的死去活来，深深的被它灵动简洁的思想所震撼，而当初的我js写的实在是渣，连都用不好。也从未想到前端竟然也能够导入MVC这么抽象性的东西。

近年，前端的需求也越来越重，过去后端的处理大多数都转移到了前端，而又十分争气，一雪过去被鄙夷的耻辱。过去的只是辅助页面的展现搞一些炫丽的特效，而现在已经演变的成为数据展现、加工的主力——随着前端任务繁重——前端MV*乘势而起。

MV*的思想中心很一致：UI和逻辑分离，提取数据模型。

Model View - MVC

MVC核心：Model(模型)，View(UI)，(控制器)

它们的工作模型应该是：=>Model=>View

Model View - MVVM

MVVM核心：Model(模型)，View(UI)，(视图模型)

它们的工作模型应该是：

让人比较困惑的是：MVVM中的是什么？

ng和都提供了名为的方法，其实它们的意义和MVC一致：处理/加工Model。

初次使用（以下简称ng）让我觉得很迷茫，毕竟它颠覆了传统的DOM操作，过去的页面某个列表页的数据是拿到数据之后，要么封装成Model，要么写成一个方法然后展现到页面上，例如下面的代码：

(function () {	var data = [{ name: 'linkFly', blog: 'http://www.cnblogs.com/silin6/' }],//拿到数据		html = ['
'],		$container = $('#container');	//拼接为HTML	data.forEach(function (item) {		html.push('
', item.name, ' - ', item.blog);	});	html.push('
');	//展现到页面	$container.html(html.join(''));})();

而使用ng的代码如下：

{{item.name}} - {{item.blog}} 

var app = angular.module('demo', []).controller('demoController', function ($scope) {//ViewModel双向绑定$scope.datas = [{ name: 'linkFly', blog: 'http://www.cnblogs.com/silin6/' }];});

MVVM的核心思想：不用再关注数据如何呈现到页面，由框架更新Model和View。

ng也提供了自定义的： (指令) ，代码如下：

				model="text">		javascript:;">i'm {{text}}		

可以让你的代码插件化/组件化，当你想要完成一个日历插件，可以使用来实现，是ng中的，再看 的本份：更新Model到View中。因为直面操作Model和View，所以所有的事件绑定、操作DOM的逻辑都 应该在/ng的中。

再看我们之前MVVM的图：

实现的双向绑定原理：从外部环境接收Model，呈现到View。从View接收行为（web中是浏览器的事件，例如鼠标点击之类的）再更新Model。

当理解了的职责，我相信对于ng的理解将会很大。而数据的处理/加工，应该仍然留在中。MVVM的本质也只是注入了一层。

带来的活力

其实主要源于。

初次接触ng的深感迷茫，很大程度上对MVVM不理解。因为ng的的行为太过组件化，过了很久才明白其实我们自己编写也是组件化的，其实这也映射着更好的的web思想： Web 。

ng中的可以让那些编码中习惯瞎灌一通代码的小伙伴尝到组件化的甜头，前提是你们需要经历痛苦的思想转换。

未来迟早要到来，Web 是趋势。

的思维颠覆了传统的操 作DOM的行为，迎合MVC的思想又能够让的逻辑更加的清晰。为了迎接，下下一个版本 （ 7，当前 5）准备了 .() ——监听/观察对象：当被监听的对象发生变化，通知监听者，数据双向绑定的利器。

结语

其实如果能够理解，那么MVVM框架中很多事情都将可以得到很明确的答案，多数时候我们总是在成型的编程思维上去敲代码，当引入了一个框架，就意味着你要接受它的思想，然而颠覆一个人的思想是一件很困难的事情，毕竟我们无法像盗梦空间里那样，悄悄注入一个想法，从此世界颠覆。

如此的卓越也体现了这点，在你刚开始使用它的时候就发现它并没有侵入你的思想，你仍然可以用自己的思维写出自己的代码，不得不说的理念得以让其在今天大行其道——专注DOM。

可能有人想说："是库，不要跟框架并提。"

我知道。只是感叹一下。

参考