MVC模型视图控制器

MVC模式
一个事件发生的过程（通信单向流动）：
1、用户在视图 V 上与应用程序交互
2、控制器 C 触发相应的事件，要求模型 M 改变状态（读写数据）
3、模型 M 将数据发送到视图 V ，更新数据，展现给用户

MVC模式是什么

MVC是一种设计模式
它是一种编程思想

• Model（模型）- 通常模型对象负责在数据库中存取数据。
• View（视图） - 通常视图是将模型里的数据可视化。
• Controller（控制器） - 从视图读取数据，控制用户输入，并向模型发送数据。

MVC的步骤

原始代码:

//黏着导航
(function() {
    var topNavbar = document.getElementById('top-navbar');
    window.addEventListener('scroll', function() {
        if (pageYOffset > 0) {
            topNavbar.classList.add('sticky');
        } else {
            topNavbar.classList.remove('sticky');
        }
    });
})();

添加view和controller：

//黏着导航，控制HTML中的top-navbar
那么top-navbar就是view
(function() {
	var view = document.querySelector('#top-navbar');

    var controller = {
    	view: null
    	,init: function (view){
			this.view = view;
			this.bindEvents();
			//this.bindEvents.call(this)
    	}
		,bindEvents: function () {
			var view = this.view;
	    	window.addEventListener('scroll', () => { //箭头函数没有this
		        if (pageYOffset > 0) {
		            this.sticky();
		        } else {
		            this.unsticky();
		        }
	    	});
	   	}
	   	,sticky: function(){
	   		this.view.classList.add('sticky');
	   	}
	   	,unsticky: function(){
			this.view.classList.remove('sticky');
	   	}
    }

    controller.init(view);
})();

MVC的作用

• Model：用来存取数据。所有与服务器交互的操作(存储、获取数据)都放在Model里
• View：数据可视化。要将数据展示在哪一块区域就将那一区域作为View。
• Controller：处理用户交互的部分。其他所有的操作放在controller里

• Controller监听View，当用户点击View，View就会通知Controller
• Controller接收到通知，就会调用Model
• Model向服务器请求数据，然后服务端将数据返回给Model
• Model将从服务器返回的数据传给Controller
• Controller得到数据后，更新View
• Controller不直接访问服务器，而是专门由Model来负责

参考答案：

• Model 操作数据
• View 表示视图
• Controller 是控制器

Model 和服务器交互，Model 将得到的数据交给 Controller，Controller 把数据填入 View，并监听 View
用户操作 View，如点击按钮，Controller 就会接受到点击事件，Controller 这时会去调用 Model，Model 会与服务器交互，得到数据后返回给 Controller，Controller 得到数据就去更新 View