Vue2.6-浅析 MVP设计模式与MVVM设计模式

最新推荐文章于 2024-07-25 10:31:28 发布

东陵十三

最新推荐文章于 2024-07-25 10:31:28 发布

阅读量234

点赞数 1

分类专栏：计算机服务器开发前端文章标签： Vue2.6 MVP MVVM 面向数据开发面向dom

本文链接：https://blog.csdn.net/donglingjiu/article/details/100062712

版权

计算机同时被 3 个专栏收录

110 篇文章 0 订阅

订阅专栏

服务器

84 篇文章 0 订阅

订阅专栏

开发

73 篇文章 0 订阅

订阅专栏

MVP 设计模式

M model层数据层

P Presenter层业务逻辑相关的控制层

V view层视图层页面上的dom展示

通过以下 JQuery实现 toDoList

M层很弱没有通过ajax获取远程数据

div区域 dom域是 V 层视图

视图改变的时候触发控制器控制器可以调M(模型层)发送ajax请求获取数据控制器也可以根据视图触发的事件操作dom改变视图

P 层是 MVP 设计模式中最核心的一层是链接M 和 V的中转站

使用MVP 设计模式控制器大量的逻辑都是在操作dom

<!DOCTYPE html>
<html>
	<head>
		<title>JQuery toDoList</title>
		<meta charset="UTF-8">

		<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>	

	</head>

	<body>
		<div>
			<input type='text' id='input'/>
			<button id='btn'>submit</button>
			<ul id='list'></ul>
		</div>

		<script>
			
			function Page(){}

			$.extend(Page.prototype,{
				init:function() {
					this.bindEvents()
				},
				bindEvents:function() {
					var btn = $('#btn') ;
					//$.proxy将 handleBtnClick 绑定到当前Page实例
btn.on('click',$.proxy(this.handleBtnClick,this))
				},
				handleBtnClick:function() {
					//alert('123') 
					var inputElem = $('#input') ;
					var inputValue = inputElem.val() ;
					var ulElem = $('#list') ;
					ulElem.append('<li>'+inputValue+'</li>') ;
					inputElem.val('') ;
				}
			})

			var page = new Page() ;
			page.init() ;
		</script>
	</body>
</html>

MVVM设计模式

如下 Vue实现 toDoList

M 模型层操作数据

V 层 div区域 dom视图

操作 M 层数据 V 层视图同步改变

VM 层 vue底层监听到数据变化重新渲染视图 vue监听到事件被触发通过VM 调用 M层逻辑改变M层数据数据发生变化 VM 自动重新渲染视图

MVVM模式核心在于 M层开发 MVP模式JQuery面向 dom开发 MVVM模式 Vue面向数据开发

(vue如何知道数据改变了并且自动渲染视图？ ES5中核心API object.defineProperties 同时引入了虚拟dom机制 )

<!DOCTYPE html>
<html>
	<head>
		<title>ToDoList</title>
		<meta charset="UTF-8">

		<script src="./vue.js"></script>
	</head>

	<body>
		<div id="app">
			<input type='text' v-model="inputValue"/>
			<button v-on:click="handleBtnClick">submit</button>
			<ul>
				<li v-for="item in list">{{item}}</li>
			</ul>
		</div>


		<script>
			var app = new Vue({
				el:"#app",
				data:{
					list:[] ,
					inputValue:'input something...'
				},
				methods:{
					handleBtnClick:function() {
						this.list.unshift(this.inputValue)
						this.inputValue='input something...'
					}
				}

			})
		</script>
	</body>
</html>