Vue MVVM模式 (三)
程序员文章站
2022-03-30 23:05:32
...
传统的模式 M（数据层）V（视图）P（控制器）
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./jquery.js"></script>
</head>
<body>
<div id="app">
<input id="input" type="text" >
<button 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>ps: 可以看到最核心的层是在 presenter 层，主要在做dom的操作，有大量的代码。
MVVM 模式
代码
ps: 当使用 mvvm 这种设计模式的时候，我们不需要关注 vm如何实现的，我们只需要关注视图层和模型层。