MVVM
（1）传统开发模式MVP
案例：jQuery操作-面向对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-compatible" content="IE=Edg,chrome=1">
<meta name="render" content="webkit">
<title>demo</title>
<script type="text/javascript" src="./jquery.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" id="input">
<button id="btn">提交</button>
<ul id="showList"></ul>
</div>
<script type="text/javascript">
function List(){
}
$.extend(List.prototype,{
init(){
this.bindEvent();
},
bindEvent(){
var btn = $(‘#btn‘);
/* 将this.handleBtnClick中this绑定到了this的Page实例引用 */
btn.on(‘click‘,$.proxy(this.handleBtnClick,this));
},
handleBtnClick(){
console.log(666)
var inputValue = $(‘#input‘).val();
var showList = $(‘#showList‘);
showList.append("<li>"+inputValue+"</li>")
$(‘#input‘).val(‘‘)
}
})
var list = new List();
list.init();
</script>
</body>
</html>分析：
jQuery代码符合MVP模式
M：与AJAX交互，获取远程数据 V：视图层---DOM结构 P：控制器层---大部分都是DOM操作
对比MVVM实现方式，可以减少DOM操作代码30%以上
.
相关推荐
姜海强 2020-08-01
chenjinlong 2020-06-10
conganguo 2020-06-09
88473166 2020-05-14
89427412 2020-05-06
conganguo 2020-05-06
yw00yw 2020-05-04
conganguo 2020-04-25
86523296 2020-04-22
89427412 2020-04-22
yw00yw 2020-04-20
86523296 2020-04-11
檀木雨林 2020-04-11
yw00yw 2020-04-11
yw00yw 2020-04-09
howema 2020-02-21
闲来也无事 2020-02-19
codercheng 2020-02-15
檀木雨林 2020-02-15