MVC
2019-01-07 本文已影响0人
白羽薇
最初
- JavaScript 是一种强大的、动态的面向对象编程语言
- 这门语言被误解的原因：早期的JavaScript 比较糟糕，有许多bug ； 其名字带有java前缀，让人以为与java有关系，但它们是两种语言。
增加结构
- 应该将应用解耦成一系列相互平等且独立的部分。
- MVC是一种久经考验的搭建应用的方式，可以确保应用的可维护性和可扩展性。MVC模式完全适用于JavaScript应用
MVC
- MVC是一种设计模式，将应用划为三部分：数据（模型）、展现层（视图）和用户交互层（控制器）。
- 事件的发生过程：
1.用户和应用发生交互
2.控制器的事件处理器被触发
3.控制器从模型中请求数据，并将其交给视图
4.视图将数据呈现给用户
例：在Holla中发送一个新的聊天信息的过程：
1.用户提交一个新的聊天信息
2.控制器的事件处理器被触发
3.控制器创建了一个新的聊天模型（Chat Model）记录
4.控制器更新视图
5.用户在聊天窗口看到新的消息
MVC各部分具体详解如下：
模型
- 模型用来存放应用所有的数据对象。模型只需包含数据及直接和这些数据相关的逻辑。
- 任何事件处理器代码、视图末班，以及那些和模型无关的逻辑都应该隔离在模型外
- 数据是面向对象的，任何定义在这个数据模型上的函数或逻辑都可以直接被调用
例：
var user = User.find("foo");
user.destory();
destory()函数是存放在命名空间User的实例中，User存放了所有的记录（这只是理想情况），因为我们控制了全局变量的个数，更好的避免了潜在的冲突。这种代码更加清晰，而且非常容易做继承。
视图
- 视图层是呈现给用户的，用户与之产生交互。在JavaScript应用中，视图大都由HTML、CSS和JavaScript模板组成。
- 除了模板中简单的条件语句之外，视图不应当包含任何逻辑
- 包含视觉呈现相关的逻辑部分没有定义在视图之内即可。我们将视图呈现逻辑归类为“视图助手（helper）”：和视图有关的独立的小型工具函数。
例：
//helper.js
var helper = {};
helper.formatData = function(){/*...*/};
//template.html
<div>
${helper.foematDate(this.date)}
</div>
helper是一个命名空间，可以防止冲突并保持代码清晰、可扩展
控制器
- 控制器是模型和视图之间的纽带。控制器从视图获得时间和输入，对它们（很可能包含模型）进行处理，并进行相应的更新视图。
- 当页面加载时，控制器会给视图添加事件监听，然后当用户和你的应用产生交互时，控制器中的时间触发器就开始工作。
- 不用类库和框架也能实现控制器，下面代码就是使用简单的jQuery代码来实现的：
var Controller = {};
//使用匿名函数来封装一个作用域
（Controller.users = function($){
var nameClick = function(){
/*...*/
};
//在页面加载时绑定事件监听
$（function(){
$("#view.name").click(nameClick)
}）;
}）(jQuery);
