JS——MVC模式

来源：互联网发布：郭德纲网络平台编辑：程序博客网时间：2024/06/06 17:15

架构模式之一：MVC（模型—视图—控制器）
它通过关注点分离鼓励改进应用程序组织。它强调将业务数据(Model)与用户界面(View)隔离，第三个组件(Controller)仍然管理逻辑和用户输入。
如果把MVC想成一个夹心饼干，那么Model和View就是夹心饼干外边的两片，而Controller则是中间的奶油。
1、前端的View是什么？个人理解是，与页面上元素直接相关的部分都属于View。包括html，css和一部分直接控制页面元素的JS。作为观察者模式中的观察者，它可以从Model中得到数据，并将其显示到页面上。而关于数据的变更和请求，则统统交给Controller处理。
2、那么Controller呢？作为Model和View的粘合剂，Controller将View方面的请求转发给合适的Model，在必要的时候也会去更新View。而Controller本身也可以作为Model的观察者，获取Model的变更。而作为Controller本身，就不应该有涉及到页面元素的代码了。
3、最后谈谈Model，与后端的沟通、AJAX请求以及对数据的处理都属于Model的工作。Model本身不知道谁是View，谁是Controller。它只提供一些方法供View和Controller调用，并且将变更通知给它的观察者View或Controller。显然，Model与页面元素之间也解耦了。

示例：（没有使用MVC）

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><select id="selAnimal"><option value="cat">cat</option><option value="fish">fish</option><option value="bird">bird</option></select><p id="AnimalDo"></p><script src="common.js"></script><script>$("selAnimal").onchange = function() {var thisAnimalDoes;switch(this.value) {case 'cat':thisAnimalDoes = "本猫在睡觉";break;case 'fish':thisAnimalDoes = "本鱼在洗澡";break;case 'bird':thisAnimalDoes = "本鸟在唱歌";break;default:thisAnimalDoes = "陌生人?";}$("AnimalDo").innerHTML = thisAnimalDoes;}window.onload = function() {$("AnimalDo").innerHTML = "本猫在睡觉";}</script></body></html>

示例：（使用MVC）

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><select id="selAnimal"><option value="cat">cat</option><option value="fish">fish</option><option value="bird">bird</option></select><p id="AnimalDo"></p><script src="common.js"></script><script>//controller 用户操作功能var whatDoesAnimalDo = {//选择视图start: function() {this.view.start();},//更新视图set: function(animalName) {this.model.setAnimal(animalName);}};//model 数据操作whatDoesAnimalDo.model = {//数据animalDictionary: {cat: "本猫在睡觉",fish: "本鱼在洗澡",bird: "本鸟在唱歌"},currentAnimal:null,//model负责业务逻辑和数据存储setAnimal: function(animalName) {this.currentAnimal = this.animalDictionary[animalName] ? animalName : null;this.onchange();},//通知视图更新显示onchange: function() {whatDoesAnimalDo.view.update(); //应改为观察者模式},//响应视图对当前状态的查询getAnimalAction: function() {return this.currentAnimal ? this.animalDictionary[this.currentAnimal] : "陌生人?";}};//视图 $ 改成自己熟悉的 适合自己的whatDoesAnimalDo.view = {start: function(){$("selAnimal").onchange = this.onchange;},onchange: function() {whatDoesAnimalDo.set($("selAnimal").value);},update: function() {$("AnimalDo").innerHTML = whatDoesAnimalDo.model.getAnimalAction();}};window.onload = function() {$("AnimalDo").innerHTML = "本猫在睡觉";}whatDoesAnimalDo.start();</script></body></html>

注：在简单的系统中应用MVC模式，会增加结构的复杂性，并且降低效率。

Backbone.js采用了MVC。

自己曾经用过一个php框架(thinkphp)，文件框架就是MVC模式。

参考：

1、整体维护更容易。数据中心是否改变，什么时候需要更新应用程序这点很清楚，者意味着是Model(模型)或者也可能是Controller(控制器)的变化，或者仅仅是视觉，者意味着View（视图）的改变。

2、解耦Model（模型）和View（视图），意味着它能够更直接地编写业务逻辑的单元测试。

3、在整个应用程序中，底层Model（模型）和Controller（控制器）代码重复（例如我们可能已经使用的）被消除了。

4、取决于应用程序的大小和角色的分离，这种模块性可以让负责核心逻辑的开发人员和负责用户界面的开发人员同时工作。

摘录于：

《JavaScript设计模式》

http://www.cnblogs.com/juicygroup/archive/2013/10/07/3356339.html

阅读全文

0 0