【mvc】概念以及一个简单的dem

[Kelichao]

MVC-DEMO

逻辑介绍

• 此功能为监听input的变化，并将input中的值赋值给span标签的内容

传统写法

<label>我是输入的值</label><input id="inp" type="text" name="">
<label>我是监听到的值</label><SPAN id="sp">- - -</SPAN>
<script type="text/javascript">

var inp = document.getElementById("inp");
var sp = document.getElementById("sp");


inp.oninput = function() {
	console.log(this.value);
	sp.innerHTML = this.value;
}


</script>

MVC写法

<label>我是输入的值</label><input id="inp" type="text" name="">
<label>我是监听到的值</label><SPAN id="sp">- - -</SPAN>
<script type="text/javascript">

var inp = document.getElementById("inp");
var sp = document.getElementById("sp");

// Controller ： 用于存放业务逻辑
var Controller = {
	cinput: function(e) {

		// 往模型上放
		Model.date = e.target.value;

		// 往模型上取，两者完全脱离联系
		sp.innerHTML = Model.date;
	}
};

// View ： 用于添加事件
var View = {
	event: function() {
		inp.oninput = Controller.cinput;
	}
};

// Model ： 用于存放数据
var Model = {
	data:""
}

// 初始化事件
View.event();

</script>

• 表面上看上去是把简单的东西复杂化，但是，如果项目架构比较大的话，该种方式是具有清晰的逻辑的，便于修改，查、改逻辑。如果你做过相对比较复杂的业务，应该会深有体会。

浅谈MVC

它们分别是Model（模型）、View（视图）和Controller（控制器）

• Mode（数据保存）：模型，底层数据，比如数据库，我自己写的配置文件等，以及从请求中拿来的数据存储地。
• View（用户界面）：视图，前端这块的话，应该可以看成页面模板。
• Controller（业务逻辑）：控制器，处理各种业务逻辑以及方法，工具函数等

以微波炉为例子

就如机器一样，我们能接触到的只有开关，里面内部的逻辑我们无法改变，但是可以通过开关调节

模块间通信逻辑

1. View 传送指令到 Controller
2. Controller 完成业务逻辑后，要求 Model 改变状态
3. Model 将新的数据发送到 View，用户得到反馈

所有的通信都是单向的

• 参考阮一峰网络文集