MVP和MVVM设计模式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hello World</title>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="app">
		<input type="" name="" id="input">
		<button type="" id="btn">提交</button>
		<ul id="ul"></ul>
	</div>
	<script>
		function Page() {

		}
		$.extend(Page.prototype, {
			init : function() {
				this.bindEvents();
			},
			bindEvents : function () {
				var btn = $('#btn');
				btn.on('click', $.proxy(this.handleBtnClick, this))
			},
			handleBtnClick : function () {
				var inputElem = $('#input');
				var inputValue = inputElem.val();
				var ulElem = $('#ul');
				ulElem.append('<li>' + inputValue + '</li>');
				inputElem.val('');
			}
		});
		var page = new Page();
		page.init();
	</script>
</body>
</html>

这一段JQuery代码使用的是MVP设计模式,现在M层很弱,没有数据请求和接受,上面的dom代表的是V层(视图层),script里的内容是P控制器层,当我视图发生改变,点击提交按钮,调用控制器,控制器又通过dom操作来改变视图,控制器里也可以发送数据请求和M层相互交流

在这个MVP设计模式中P层其到了关键性的作用,不仅要接受视图的信息还要改变视图和Model,Model层就比较边缘了,就如上面的JQuery代码,我们有很大一部分操作都是在操作dom,给了P层很大的负担

MVVM模式也有View层和Model层,但是其没有了P层,改成了VM层,但是这一层我们不需要去编写,Vue会帮助我们完成,我们编程的重点就在View和Model层

当我们View层发生变化时,Model层就会自动发生变化,Model层发生变化,View也会发生变化

可以这样理解,当我们使用类似JQueryMVP模式是面向dom进行的编程,当我们使用类似Vue这种MVVM编程模式是面对数据进行编程,从代码量上来说,Vue也减少了极其多了dom操作,我们只需要关注数据的变化就可以了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值