2014-10-31-mvc.md

layout	date	title
post	2014-10-31 13:05:18 +0800	mvc之投石问路

什么是MVC

MVC 是一种设计模式，它将应用划分为3 个部分：数据（模型）、展现层（视图）和用户交互层（控制器）。换句话说，一个事件的发生是这样的过程： 1． 用户和应用产生交互。 2． 控制器的事件处理器被触发。 3． 控制器从模型中请求数据，并将其交给视图。 4． 视图将数据呈现给用户。

现在来看一个真实的例子

1． 用户提交一个新的聊天消息。 2． 控制器的事件处理器被触发。 3． 控制器创建了一个新的聊天模型（Chat Model）记录。 4． 然后控制器更新视图。 5． 用户在聊天窗口看到新的聊天消息。

模型

模型用来存放应用的所有数据对象。比如，可能有一个User 模型，用以存放用户列表、他们的属性及所有与模型有关的逻辑。 模型不必知晓视图和控制器的细节，模型只需包含数据及直接和这些数据相关的逻辑。任何事件处理代码、视图模板，以及那些和模型无关的逻辑都应当隔离在模型之外。

将模型和视图的代码混在一起，是违反MVC 架构原则的。模型是最应该从你的应用中解 耦出来的部分。

var user = User.find('foo');
user.destroy();

当控制器从服务器抓取数据或创建新的记录时，它就将数据包装成模型实例。

视图

视图层是呈现给用户的，用户与之产生交互。在JavaScript 应用中，视图大都是由HTML、CSS 和JavaScript 模板组成的。

实际上，和模型类似，视图也应当从应用的其他部分中解耦出来。视图不必知晓模型和控制器中的细节，它们是相互独立的。

将逻辑混入视图之中是编程的大忌。

##控制器 控制器是模型和视图之间的纽带。控制器从视图获得事件和输入，对它们进行处理（很可能包含模型），并相应地更新视图。

var Controller = {};

// 使用匿名函数来封装一个作用域
(Controller.users = function($){

	var nameClick = function(){
		/* ... */
	};

	// 在页面加载时绑定事件监听
	$(function(){
		$("#view .name").click(nameClick);
	});

})(jQuery);