86523296 2019-12-01
(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%以上
.
<ListBox Name="sideMenu" SelectedIndex="{Binding MenuSelectedIndex}" ItemsSource="{Binding MenuList}