JS——MVC模式

关注

转载最新推荐文章于 2026-04-10 10:16:20 发布 2.8k 阅读 AI 写同款· GEO 优化 ›

JavaScript中的MVC模式：简介与实例演示在上面的示例中，我们首先创建一个User模型的实例，然后创建一个UserView视图的实例，最后创建一个UserController控制器的实例。在上面的示例中，UserView类表示一个用户界面，它通过HTML中的元素来展示用户的名称和电子邮件。在上面的示例中，UserController类表示一个控制器，它接收来自视图的用户输入，并根据输入更新模型。在上面的示例中，User类表示一个用户对象，具有名称（name）和电子邮件（email）属性，以及获取名称和电子邮件的方法。阅读详情

架构模式之一：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>