Vue及JQuery实现todolist以及MVP,MVVM模式的理解

　　Vue 是一套用于构建用户界面的渐进式JavaScript框架，通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。初学Vue的时候，第一个实现是todolist。

<body>
	<div id='app'>
		<input type='text' v-model="inputValue"/> <!--双向绑定-->
		<button v-on:click="handleBtn">Submit</button> <!--注册事件-->
		<ul>
			<li v-for="item in list">{{item}}</li>  
		</ul>
	</div>

	<script>
		var app = new Vue({
			el: '#app', //接管范围
			data: {     
				list: [],
				inputValue: ''
			},
			methods: {
				handleBtn:function() {
					this.list.push(this.inputValue)
					this.inputValue=''  //清除文本框内容
				}
			}
		})
	</script>

　　同样的功能如果用jQuery实现，则是以下方式：

<body>
	<div>
		<input type='text' id='input' />
		<button id='Btn'>Submit</button>
		<ul id='list'></ul>
	</div>

	<script>
		function Page() {

		}
		$.extend(Page.prototype, { //$.extend将第二个参数对象合并到第一个
			init: function(){
				this.bindEvents();
			},
			bindEvents: function(){
				var btn=$('#Btn');
				btn.on('click', $.proxy(this.handleBtn, this));
			}, //$.proxy接受已有的函数并返回带上下文的新的函数,解决this转移问题
			handleBtn: function(){
				var ulElem=$('#list');
				var inputElem=$('#input');
				var inputValue=inputElem.val();
				ulElem.append('<li>'+inputValue+'</li>');
				//jq文档操作append() 方法在被选元素的结尾（仍在内部）插入内容
				inputElem.val('');
			}
		})
		var page=new Page();
		page.init();
	</script>
</body>

　　可以看出vue框架取代了大量DOM操作，只需明确使用数据的逻辑，这就是MVVM模式。

　　MVP模式分为model（数据层），presenter（控制层），view（视图层）。上述JQ例子中，用于存储数据的M层比较弱，没有通过ajax；V层是DOM部分；P层当视图改变时，控制器会发挥作用（很大一部分代码都在做DOM操作）。
　　MVVM模式的VM层是vue内置的，ViewModel负责连接 View 和 Model，保证视图和数据的一致性（改变视图层以及感知视图的变化），这种轻量级的架构让前端开发更加高效、便捷。这个模式我们主要关注操作数据的M层，极大简化了DOM操作。

另外，如果将列表项组件化，则可以应用vue的component。下面提供一种全局组件方法：

<todo-item v-bind:content="item" v-for="item in list"></todo-item>

Vue.component("TodoItem",{
			props: ['content'] //item借助content传递
			template:"<li>{{content}}</li>"
		}) //全局(名字+模板)

Vue及JQuery实现todolist以及MVP,MVVM模式的理解

猜你喜欢