对比Jquery和Vue实现Todolist
程序员文章站
2022-06-27 21:17:37
Vue是MVVM设计模式的前端框架，其实现Todolist相比于通过Jquery操作Dom来实现的方法是非常简洁的。下面我就来对比下这两种方法。 Vue实现 可以看到，vue实现todolist仅仅是对Model层进行的操作，既对数据进行操作，在操作完成后，vue内置的ViewModel层会自动对数 ......
vue是mvvm设计模式的前端框架，其实现todolist相比于通过jquery操作dom来实现的方法是非常简洁的。下面我就来对比下这两种方法。
vue实现
<body>
//view层，既视图层
<div id='app'>
<input type="text" v-model="inputvalue"/><br>
<input type="text" v-model:lazy="inputvalue"/>
<button v-on:click="handlebtnclick">点击</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
var app = new vue({
//model层，既数据层
el: '#app',
data: {
list: [],
inputvalue:''
},
methods: {
handlebtnclick: function () {
this.list.push(this.inputvalue)
this.inputvalue = ''
}
}
})
</script>
</body>
可以看到，vue实现todolist仅仅是对model层进行的操作，既对数据进行操作，在操作完成后，vue内置的viewmodel层会自动对数据进行处理，将结果映射在body中的view层上，如下图所示
jquery实现
<body>
//view层，既视图层
<div>
<input id="input" type="text"/>
<button id="btn">提交</button>
<ul id="list"></ul>
</div>
<script>
function page(){
}
//presenter层，既控制器层
$.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 inputval = inputelem.val();
var ulelem = $("#list");
ulelem.append('<li>' + inputval + '</li>');
inputelem.val('');
}
})
var page = new page();
page.init();
</script>
</body>
利用jquery对页面进行dom操作从而实现todolist这其实是一种mvp设计模式（model，presenter，view），但是这个实现中没有调用ajax请求获取数据，是控制器层直接对dom进行操作的，所以model层可以忽略，如图所示。
可以看出mvp设计模式中核心就是presenter层，它里面放的业务逻辑是视图层与模型层的桥梁，既mvp设计模式大量的代码都是对dom进行操作，对比mvvm设计模式，后者仅仅是对model层的数据进行操作，同时页面上数据改变时也会影响model层，既数据的双向绑定，这种模式大大简化了代码逻辑，减少了代码数量，对大型项目实现了很好的代码优化。
上一篇： java设计模式7——桥接模式
下一篇： 类属性增删改查